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

Комментарии 4

  1. KJS

    Спасибо за статью.
    Лично мое мнение, использование Хаков это плохой тон.
    Так же лучше избегать и условных комментариев.
    Ну конечно под исключения попадают безвыходные ситуации. Но прежде чем опустить руки, нужно перепробовать все для избегания этих приемов, профессионал всегда должен найти выход.

  2. Сергей М.

    Некоторое мило и наивно, конечно, но нормальное такое перечисление приемов в одном месте.

    Старницы в открытом доступе вики не работают.

  3. Слава

    «03 подключится только в Internet Explorer 8.»

    А не пробовали правдивость этой строчки оценить в десятой опере? :) Вас может ждать сюрприз. Меня лично, правда с другим кодом…ждал. Опера как оказалось прекрасно реагирует на условные комментарии ИЕ. Причём не важно что там написано, в смысле какая версия ИЕ. Пришлось искать другие способы….хотя хотелось пройтись по лёгкой хоть и неверной дорожке.

Комментарии закрыты.