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

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)
);
}



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