Условные комментарии для IE: методы применения
Не секрет, что при тестировании сайта в IE, мы часто получаем неприятные сюрпризы. И зачастую приходится тратить огромное количество времени в поисках решения проблем, связанных с некорректной интерпретацией таблиц CSS IЕ. Чтобы избежать использования хаков и трюков в основной таблице стилей, создается дополнительная для IЕ.
Существуют два способа решения проблем с IЕ.
Первый способ, это использования хаков и трюков в основной таблице стилей.
Например:
#nav{div.infoBox { float: left; margin-right: 10px; _margin-right: 5px; }
Но это временное решение проблемы, т. к. не известно как будущие браузеры будут интерпретировать использованные вами хаки и трюки. И если вы не хотите перепроверять свою работу с каждым выходом новой версии браузеров, лучше использовать их осмотрительно и только в качестве последнего средства.
Второй способ работы с IE – использование условных комментариев для IЕ. Это решение от Microsoft.
Один из самых распространенных вариантов, это подключение специально созданных внешних таблиц стилей для IЕ:
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" />< ![endif]-->
<!—Стили именно для всех версий IE -->
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />
< ![endif]--> <!—Стили именно для IE 7 -->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />< ![endif]-->
<!—Стили именно для IE 6 -->
<!-- [if lt IE 5.5] >< ![endif]-->
<!— Ниже данной версии. Например: IE 5 -->
<!-- [if lte IE 6] >< ![endif]-->
<!—Включая данную версию и ниже данной версии. Например: IE 6, IE 5,5 -->
<!-- [if gt IE 5] >< ![endif]-->
<!—Выше данной версии т.е. IE 5,5, 6, 7 и т.д. -->
<!-- [if gte IE 7] >< ![endif]-->
<!— Включая данную версию и выше. Т.е. IE7, 8, 9 -->
<!--[if !IE]><!--> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]-->
<!— Для всех браузеров кроме IE -->
Получается, что мы создаем отдельную версию таблиц, если есть ошибки или неточности при тестировании в определенной версии IE, и подключаем её при помощи условных комментариев. Главное,чтобы данные таблицы стилей были записаны ниже основных, только тогда они перепишут стили основной таблицы.
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--основная таблица стилей -->
<!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" />< ![endif]-->
<!--таблица CSS для IE -->
Это самый распространенный метод «борьбы» с IE.
Правда, и у него есть некоторые недостатки:
* Иногда приходится тратить время на поиски по таблицам того или иного CSS правила.
* Согласно данному источнику, включение нескольких дополнительных файлов с таблицами стилей увеличивает количество HTTP запросов, что уменьшает скорость загрузки сайта.
* Так как они включены в раздел, загрузка страницы задерживается до полной загрузки стилей.
Что бы избежать данных недостатков был разработан новый метод внедрения стилей под IE.
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
В таблице CSS это записывается вот так:
div.text { color: #333;}
.ie6 div.text { color: #000; }
Как вы видите дополнительные таблицы стилей не создаются, а создаются соответствующие классы под версии IE, которые присваиваются и опять же прячутся от других браузеров с помощью условных комментариев.
Кроме того, данный метод исправляет проблему блокировки загрузки, обнаруженную Stoyan Stefanov и Markus Leptien, описанную в статье «IE 6 тормозит IE 8» .
В общем все просто, главное приноровится. Для того чтобы окончательно решить какой метод использовать, вы можете изучить статью рассматривающую то, как условные комментарии блокируют загрузки. В ней приведены подробные результаты тестирования загрузки сайтов, при использовании разных методов применения условных комментариев.