К сожалению, полное соответствие стандартам понимания 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/ очень полезная таблица с довольно обширным описанием различных правил и их понимания самыми популярными браузерами.малогабаритные котлы
8 ответов к “Условные комментарии в CSS и персональные CSS-хаки для Internet Explorer 7, Opera и FireFox”
У условных комментариев есть еще такая конструкция:
http://zodios.net/htmlcss/ifcomments.html
HTML
Подробней о фокусе с ней можно прочитать в:
Отличный пост. Главное, что тема не высосана из пальца. Браво.
Ну вот не нужно трындеть! Как раз Мозилла косячит с межстрочными расстояниями, не понимает переносов. В то время, как Эксплорер и Опера показывают примерно одинаково
статья хорошая только вот хаки устарели да и опера вышла новая 10.6 и она кардинально отличается от 9 ветки выход один писать для каждого браузера свой стиль и подгружать его скриптом а уж потом использовать хаки для каждой версии браузера свой как это сделать читайте тут
Перевел интересную статью по CSS хакам, с прицелом на последнюю оперу. CSS Хаки для Firefox, Opera, Safari и Internet Explorer
Хаки только под ie7
http://divhack.com/node/6
человечешки скажите как мне свой стиль в браузере оставить для сайта. тоесть не применять его с сервера а свой на компе подгружать