заработок вебмастеру

Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

четверг, 6 августа 2009 г.

Часто используемые expression для MSIE6

MSIE6 скоро стукнет, наверное, 10лет, а заказчики всё ещё на него ровняются. Я не буду говорить что я ненавижу ie6, потому что на самом деле это не так. Для меня верстка и JS программинг под MSIE6, всегда вызывала интерес. Ведь на самом деле то что легко реализовывать под остальные браузеры, с такой же легкостью можно сделать и под IE6. Всё благодаря технологиям которые в нём используются. Несколько из технологий, которые часто приходится использовать — expression и filter: AlphaImageLoader. Конечно при отключённых скриптах ничего из этого работать не будет, так как expression — это тот же javascript но записанный в css а AlphaImageLoader использует DirectX. Но если пользователь отключает скрипты в MSIE6 то это его проблемы, в эпоху WEB2.0 отключать скрипты — себя не уважать (правда про использование MSIE6 можно сказать то же самое :) ) И так часто используемые мной expression
@charset "utf-8";

/*
 * боремся с кешированием картинок, потому что MSIE постоянно перегружает их,
 * каждый раз когда сними что-то происходит -
 * навели курсор, поменяли размер, поменяли координаты
 */
body{filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/********** MIN-WIDTH && MAX-WIDTH *********/

/*
 * compatMode нужен чтобы избежать вылета MSIE6
 * если у эелемента есть padding и в других не документированных случаях
 */
* html #page{
width: expression((document.compatMode && document.compatMode == 'CSS1Compat') ?
(document.documentElement.clientWidth < 999 ? "968px" :
(document.documentElement.clientWidth > 1400 ? "1400px" : "auto") ) :
(document.body.clientWidth < 999 ? "968px" :
(document.body.clientWidth > 1400 ? "1400px" : "auto")));
}


/********** :first-child && :last-child ********/

ul li{margin-left: expression((this == parentNode.firstChild) ?
runtimeStyle.marginLeft = "0px" : runtimeStyle.marginLeft = "11px" )}
ul li{margin-left: expression((this == parentNode.lastChild) ?
runtimeStyle.marginLeft = "0px" : runtimeStyle.marginLeft = "11px" )}


/****** PNG ********/

/*
 * проставим элементам у которых в бекгроунде png картинка класс png
 */
* html *{
filter:expression((/\.png/.test(this.currentStyle.backgroundImage.toString())) ?
(this.className +=' png', runtimeStyle.filter='none') :
runtimeStyle.filter='none');
}

/*
 * теперь всем png-картинкам и всем элементам с классом .png применим фильтр
 */
* html img, * html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:
(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?
(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "blank.gif"):(this.origBg = this.origBg ? this.origBg :
this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}



... а что дальше?

четверг, 2 июля 2009 г.

Проблемы с абсолютным позиционированием в MSIE6

На практике приходится постоянно сталкиваться с двумя багами абсолютного позиционирования в IE6. Обе проблемы вызваны свойством position:relative у родительского блока (когда мы хотим абсолютно позиционировать блок относительно этого родителя а не документа).

Проблема номер один — когда рядом с родительским блоком находится какой то блок с position:relative и как не выставляй z-index абсолютно позиционированному блоку, он никак не отобразится по верх него. проблема решается установкой z-index родителю (если соседний с родителем блок имеет такие же стили, то z-index у них должен отличатся), ну и стараться использовать position:relative только когда оно действительно нужно. Проблема состоит в том что ИЕ сравнивает не только z-index блоков, но и z-index их родителей и их последовательность. И родительский считается им важнее. То есть если есть два блока с position reletive и z-index 10, и у одного из них есть вложенный блок c position absolute и z-index 20, то отображаться поверх другого блока он будет только в том случае если родительский блок находится в коде позже. Если же на оборот то поверх абсолютно позиционированного блока будет отображаться блок который идёт позже, хоть у него и такой же z-index как у родителя.
Я всегда стараюсь обходит стороной, если надо выводить кучу элементов у которой при каком-то событии должен появляться абсолютно позиционированный относительно елемента блок, то родителю назначаю position:relative тоже по событию.Как я уже говорил "ну и стараться использовать position:relative только когда оно действительно нужно", а то я иногда встречал записи такого вида *{position:relative}

Вторая проблема, это когда у родительского блока стоит обтекание (float:left; или float: right), тогда с абсолютно позиционированным блоком происходит не понятная вещь - или он вообще пропадает из виду (наверное его выкидывает за пределы окна) или он позиционируется относительно всего документа. С этим багом я боролся разными методами (куча игр с hasLayout) но решение найденyое методом тыка clear:both меня очень удивило. Но самое главное &mdash это работает.

Удачи в борьбе с MSIE

... а что дальше?