Записи с тегом «хаки»

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

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

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

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

Internet Explorer 6

1. .class { _color: #666; }

Internet Explorer 6 и 7

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

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

Internet Explorer 7

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

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

1. html>body .class { *color: #666; }

Internet Explorer 8

1. .class { color /*\**/: #666\9; }

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

Firefox

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

Opera

1. @media all and (min-width: 0) {
2. .class { color: #666; }
3. }

1. .class, x:-moz-any-link { color: #666; }

1. *|html[xmlns*=""] .class { color: #666; }

1. html:first-child .class { color: #666; }

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

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

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

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

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