CSS-хаки и фильтры

CSS-хаки и фильтры

Подключение CSS-файлов для IE

Для фильтрации CSS-стилей по версия IE используются так называемые Conditional Comments.

<!--[if lte IE 6]>
<link rel="stylesheet" href="css/cssf-ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="css/cssf-ie7.css" type="text/css" media="screen" /><![endif]-->

В файл cssf-ie6.css включена информация и краткое описание по следующим хакам.

:hover для IE

Для IE6 подключается htc-файл csshover2.htc, для отработки событий *:hover, в файле cssf-ie6.css.

Используется whatever:hover.

PNG & IE

Для IE6 подключается htc-файл iepngfix.htc, для правильной работы фоновых изображений формата PNG для всех элментов, в файле cssf-ie6.css.

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

Используется 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

Весьма простой приём, с использованием 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 */
}

Интересующиеся могут посмотреть CSS hacks и 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 секции документа:

<head>
	<link rel="stylesheet" href="css/opera.css" type="opera/css" media="screen" />
</head>

Обратите внимание на type="opera/css". И скажите спасибо Павлу Ловцевичу за этот хак.

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

Ссылки по теме: