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.

Для правильной работы background-position допольнительно подключается файл iepngfix_tilebg.js.

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

Используется IE5.5+ PNG Alpha Fix v2.0 Alpha.

Кто считает каждый байт, есть пример использования фильтра для IE:

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

PNG-файл, созданный в Photoshop, несёт в себе дополнительное поле gAMA - file gamma = 0.45000. Это поле можно безболезненно удалить(TweakPNG в помощь). И не будет проблем с одного и того же файла с разными цветами.

PNG gamma: хотели, как лучше, получилось, как всегда

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

IE?

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

#hack {
	color/**/:blue;	/* IE 5.5 */
	_color: red;	/* IE 6 */
}
html > body #hack {
	*color: brown;	/* IE 7 */
}

Интересующиеся могут посмотреть css hacks и css filters.

Opera

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	head~body #element { color: red; }
}

Safari & Google Chrome

/* Safari &amp;amp;amp;amp;amp;amp;amp;amp; Google Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#element { color: red; }
}

/* или */

body:nth-of-type(1) #element { color: red; }

Mozilla Firefox

/* Firefox 1 - 2 */
body:empty #element { color: red; }

/* Firefox */
@-moz-document url-prefix() {
	#element { color: red; }
}

Konqueror

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

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