Условные комментарии в CSS и персональные CSS-хаки для Internet Explorer 7, Opera и FireFox

К сожалению, полное соответствие стандартам понимания CSS остается проблемой для браузеров разных производителей и сегодня. И если Opera, Firefox и Safari близки к правильному пониманию стандартов, то самый массовый обозреватель интернета Internet Explorer (даже в последней 7 версии) очень далек от правильной интерпретации стандартов html и css.Поэтому вебмастеру очень часто в своей работе приходится сталкиваться с трудностями согласования внешнего вида страницы в различных клиентских агентах. Здесь как раз и приходят нам на помощь CSS-хаки и условные комментарии. Сначала про условные комментарии.

Условные комментарии в CSS

Следует сказать отдельное «спасибо» разработчикам IE за то, что выпустив нестандартный браузер и впихнув его в свое время 90% пользователей, они, наверное, ужаснулись от искаженной их продуктом картинки интерната, и снабдили IE возможностью понимать условные комментарии. В целом условные комментарии понимают как IE6 так и IE7. Суть условного комментария заключается в специальном объявлении, которое дает понять браузеру, что это только для него. Выглядят они так:

<!--[if IE 6]>Специальные инструкции для IE 6 здесь.<![endif]-->

<!--[if IE 7]>Специальные инструкции для IE 7 здесь.<![endif]-->

По моему мнению, большой недостаток условных комментариев заключается в том, что они использую синтаксис обычного html и могут использоваться только непосредственно в html документе и никак не в css, что не очень гибко с точки зрения использования. Единственным вариантом использования такого рода конструкций является создание отдельного css-файла стилей для этих браузеров и простого импорта стиля через ссылку в контексте условного комментария.

Например:

<!--[if IE 6]><link href="css/style_ie7.css" rel="stylesheet" type="text/css" /><![endif]-->

Объявление <!—[if IE 6]> говорит, что правило будет использовано только для IE6, но если добавить значения по синтаксису

• gt: больше чем
• lte: меньше или эквивалентно

То можно выбирать определенные версии браузеров в разных объявлениях.

Стоит отметить, не смотря на то, что такой способ решения проблем отображения страниц в браузерах IE является довольно трудоемким, поскольку нужно создавать отдельные файлы стилей, он является оптимальным с точки рения валидности верстки.

Чего нельзя сказать про CSS-хаки (уловки), которые несмотря на удобство и некую универсальность, являются недопустимыми с точки зрения валидности CSS. Но не смотря на это стоит рассказать про них подробнее.

Персональный CSS хак для Internet Explorer 7

Обычно верстальщики используют простой прием, чтобы скрыть стиль для всех остальных браузеров и оставить его видимым для IE. Реализуется это с помощью добавления * к стилю (например: *border:1px solid #000;). Это удобно использовать, когда нужно ввести незначительный параметр и нет нужды создавать специальный стиль для «шестого» IE.

Однако этот комментарий понимает и более правильный с точки зрения интерпретации стилей разметки браузер IE7. И иногда такое правило оказывается губительным для разметки в IE7.

Чтобы избежать подобных неожиданных проблем, можно использовать персональный CSS хак для Internet Explorer 7: *:first-child+html.

Пример кода

p.test1 {
background: #FAA;
}
*:first-child+html p.test1 {
background: #95FF95;
}/* for IE7*/

Этот хак поддерживает только Internet Explorer 7

Все остальные браузеры

• IE 4-6/Win
• FireFox
• NS 6.0-7.2
• NS 4.x
• Opera 5+
• Safari
• Konqueror 3
• iCab 3
• IE 5.x/Mac

Его не читают

Причем IE 5.5 и IE 6 будет игнорировать любое правило, которое использует этот хак, даже если описывается цепочка селекторов, разделенных запятыми. Чтобы убедиться в этом, посмотрим на еще один тест.

Пример кода

p.test2 {
background: #FAA;
}
* html p.test2 {
background: #FF8;
}/* for IE6*/
*:first-child+html p.test2,
* html p.test2 {
background: #95FF95;
}/* for IE7*/

Персональные CSS-хаки для Opera и FireFox

Иногда случается так, что и относительно лояльные к спецификации CSS браузеры дают сбой. Очень часто отображение страниц в Firefox (Mazilla) и Opera фактически идентично и безукоризненно (в последних версиях), но иногда случается так, что и они дают сбой.
Для того чтобы решить эту проблему приходится использовать хаки.

CSS-хаки для браузера Opera:
@media all and (min-width: 0) {
.style { background: #FF0; }
}
html:first-child .style {
background: #FF0;
}
/* код валидный */

CSS-хаки для браузера FireFox:

html:root .style {
background: #FA0;
}
/* хак понимает Safari */


.style, x:-moz-any-link {
background: #FA0;
}
Соотвественно, «.style» заменяется на нужный класс:)

Однако, не смотря на свою практичность, любой css-хак с точки зрения валидности является недопустимым. Так как он фактически нарушает нормальную логику семантики CSS. И валидатор не пропустит эту страницу.

В итоге, вебмастеру приходится делать выбор между валидностью и кроссбраузерностью. Конечно, такие ситуации случаются не часто, но, как правило, в сложных конструкциях страниц к ним приходится прибегать, чтобы сделать вид сайта идентичным во всех браузерах.

И на последок, вот http://centricle.com/ref/css/filters/ очень полезная таблица с довольно обширным описанием различных правил и их понимания самыми популярными браузерами.малогабаритные котлы