» » » Условные комментарии для IE: методы применения

Условные комментарии для IE: методы применения

Условные комментарии для 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» .

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

Другие публикации по теме:

Комментарии