Тег: хаки

CSS-хаки для Internet Explorer, Firefox и Opera

IE6. Как много в этой аббревиатуре для сердца верстальщика слилось… :lol: Ежеминутно со всех сторон света на всех языках мира доносятся тысячи проклятий в адрес разработчиков этого замечательного браузера. Но сегодня постараемся обойтись без этого. Хотя, иногда задумываешься, а ведь не было бы IE — как же было бы скучно, да и верстальщикам платили бы меньше. :-D

IE7 тоже тот ещё продукт, но хоть PNG с прозрачностью отображает нормально. А вот IE8 уже гораздо больше любит стандарты, но всё равно жуткий тормоз… Ну вот и как после этого хорошо относиться к продуктам Microsoft? Так, я же не хотел! :!:

В этом посте я собрал все CSS-хаки, что смог найти в сети. Сам стараюсь их не использовать, за исключением редких случаев. Один случай как раз был недавно — замечательная Noname CMS заказчика автоматом вырезала все комментарии из HTML-шаблонов (в том числе и условные, в которых были стили для IE6). Ну чтож, пришлось переделать на хаки…

Начнём с нашего «любимого» браузера:

Internet Explorer 6

.class { _color: #666; }

Internet Explorer 6 и 7

* html .class { color: #666; }
.class { *color: #666; }

Internet Explorer 7

*:first-child+html .class { color: #666; }
*+html .class { color: #666; }
html>body .class { *color: #666; }

Internet Explorer 8

.class { color /***/: #6669; }

Существуют хаки и для нормальных браузеров, мне ни разу не приходилось ими пользоваться, но их тоже полезно знать:

Firefox

@-moz-document url-prefix() {
	.class { color: #666; }
}

Opera

@media all and (min-width: 0) {
	.class { color: #666; }
}
.class, x:-moz-any-link { color: #666; }
*|html[xmlns*=""] .class { color: #666; }
html:first-child .class { color: #666; }

.class можно заменить вашим названием или вообще любым элементом, соответственно, вместо color: #666; может быть любое свойство.

Внимание! Использование большинства из этих хаков приведёт к ошибке валидации CSS-документа, что не очень страшно, но всё равно настоятельно рекомендую использовать вместо хаков условные комментарии и отдельные CSS-файлы для разных браузеров:

Условные комментарии (Conditional Comments)

<link rel="stylesheet" href="style.css" />
<!--[if lte IE 7]><link rel="stylesheet" href="lteie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="ie8.css" /><![endif]-->

1 подключится во всех браузерах.
2 подключится в Internet Explorer, версия которого меньше или равна 7.
3 подключится только в Internet Explorer 8.

4