====== CSS-хаки и фильтры ====== ===== Подключение CSS-файлов для IE ===== Для фильтрации CSS-стилей по версия IE используются так называемые [[http://msdn2.microsoft.com/en-us/library/ms537512.aspx|Conditional Comments]].

В файл ''cssf-ie6.css'' включена информация и краткое описание по следующим хакам. ===== :hover для IE ===== Для IE6 подключается htc-файл ''csshover2.htc'', для отработки событий ''*:hover'', в файле ''cssf-ie6.css''. Используется [[http://www.xs4all.nl/~peterned/csshover.html|whatever:hover]]. ===== PNG & IE ===== Для IE6 подключается htc-файл ''iepngfix.htc'', для правильной работы фоновых изображений формата PNG для всех элментов, в файле ''cssf-ie6.css''.


* { behavior: url("css/iepngfix.htc"); }

Используется [[http://www.twinhelix.com/css/iepngfix/|IE PNG Fix v1.0 RC4]] последней версии. Кто считает каждый байт, есть пример использования фильтра для IE:


element {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/png-image.png', sizingMethod='scale');
}

===== IE min-width & max-width ===== Весьма простой приём, с использованием [[http://msdn2.microsoft.com/en-us/library/ms537634.aspx|expression]]:


element {
	min-width: 780px; 
    	max-width: 1260px; 
	width: expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 1260? "1260px" : "auto");
}

===== IE5 или IE6? ===== Также, в файл включен пример фильтрации CSS-свойств по версиям IE:


#hack {
	color:	green;	/* IE 5.01 */
	color/**/:blue; /* IE 5.5 */ 
	c\olor:	red;	/* IE 6 не работает перед буквами a, b, c, d, e, f */
}

Интересующиеся могут посмотреть [[http://www.webdevout.net/css-hacks|CSS hacks]] и [[http://centricle.com/ref/css/filters/|css filters]]. ===== Opera ===== Несколько способов написать CSS для Opera. Обратите внимание, что **все эти хаки понимает и Safari**. Инлайн стили:


/* Все версии оперы… */
@media all and (min-width: 0px) {
	#element { color: red; }
}

/* Opera 6 */
@media all and (min-width: 1px) { {} #element { color: red; } }

/* Opera 7, 8 */
@media all and (min-width: 1px) { #element { color: red; } }

/* Opera 9 */
@media all and (width) { #element { color: red; } }

/* Opera 9 */
@media all and (min-width:0px) {
	head~body #element { color: red; }
}

Или создать файл opera.css и подключить его в ''head'' секции документа:

Обратите внимание на ''type="opera/css"''. И скажите спасибо [[http://lovtsevich.com/|Павлу Ловцевичу]] за этот хак. ===== Safari =====


/* Safari 3 */
body:first-of-type #element { color: red; }

===== Mozilla Firefox =====


/* Gecko */
html:not([lang*=""]) #element { color: red; }

/* Mozilla Firefox */
html:not([lang]) #element { color: red; }

/* Firefox / Firebird / Phoenix, Netscape 6+ */
html:not[lang*=""] #element { color: red; }

/* Gecko 1.8+ - Firefox 1.5, Camino, Seamonkey, Galeon, Epiphany и т.д. */
html:not([lang*=""]):not(:only-child) #element { color: red; }

Эти правила понимает также и **Safari** ===== Konqueror =====


/* Konqueror */
html:not(:nth-child(1)) #element { color: red; }

---- Ссылки по теме: * [[http://pornel.net/firefoxhack]] * [[http://tmbu.info/browser-specific-css-hacks/]] * [[http://www.evotech.net/blog/2007/06/targeting-safari-30-with-css/]] * [[http://pokrovskii.com/6-expression-dlya-ie6/|http://pokrovskii.com/6-expression-dlya-ie6/]]