Разные версии браузеров ИЕ имеют свое представление о стандартах, чем сильно усложняют жизнь верстальщикам. Один и тот же элемент имеет свои проблемы под разными ие, и получить одинаковое отображение для всех версий становится почти не возможным.
С введением условных комментариев (conditional comments), жизнь немного упростилась. При их помощи можно вынести корректно отображающиеся стили под конкретный браузер.
Плюсы применения условных комментариев:
- Отсечение ранних версий браузера.
- Не требуется скриптов.
- Разделение кода по логике определения.
При попытке выполнить код в условном комментарии, не предназначенном под данную версию браузера, клиент пропустит ее.
Условные комментарии не требуют наличия скриптов.
При помощи условных комментариев возможно разделение кода на отдельные куски, которые выборочно будут загружены соответсвующим клиентом. Это приведет к уменьшению времени обработки страницы, лучшей читабельности кода.
Базовый синтаксис использования.
| Тип комментария | Значение |
|---|---|
| обычный HTML комментарий | <!— Comment content —> |
| скрывать от ранних версий | <!—[if expression]> HTML <![endif]—> |
| не скрывать от ранних версий | <![if expression]> HTML <![endif]> |
Сами условные комментарии составляются из подстановки нескольких параметров.
| Значение | Пример | Пояснение |
|---|---|---|
| IE | [if IE] | Единственное указанное значение «IE» сообщает об использовании этой строки браузером Internet Explorer. |
| цифра | [if IE 7] | Цифра или значение с плавающей точкой указывает на определенную версию браузера. Возвращает булево значение при совпадении/несовпадении. |
| ! | [if !IE] | Оператор НЕ(NOT operator). Помещенный в начале указателя или регулярного выражения, придает ему отрицательный смысл. |
| lt | [if lt IE 5.5] | Оператор меньше-чем (less-than operator). Возвращает true если версия клиента меньше первого аргумента. |
| lte | [if lte IE 6] | Оператор меньше чем или равен(less-than or equal operator). Возвращает true если версия клиента меньше или равна первому аргументу. |
| gt | [if gt IE 5] | Оператор больше-чем(greater-than operator). Возвращает true если версия клиента больше первого аргумента. |
| gte | [if gte IE 7] | Оператор больше-чем или равен(greater-than or equal operator). Возвращает true если версия клиента больше или равна первому аргументу. |
| ( ) | [if !(IE 7)] | Оператор вложенных условий(subexpression operators). Используется вместе с булевыми выражениями для создания комплексных выражений. |
| & | [if (gt IE 5)&(lt IE 7)] | Оператор И(AND operator). Возвращает true если все вложенные выражения верны. |
| | | [if (IE 6)|(IE 7)] | Оператор ИЛИ(OR operator). Возвращает true если хотя бы один из вложенных операторов верен. |
| true | [if true] | Всегда созвращает true. |
| false | [if false] | Всегда возвращает false. |
Сокрытие от ранних версий клиента
Следющий пример показывает сокрытие текста от более ранних версий.
<!--[if IE 5]> <p>Welcome to Internet Explorer 5.</p> <![endif]-->
Основное отличие сокрытия — наличие тире — в комментарии, как в обычном HTML комментарии. Более ранние версии клиента воспринимают это как обычный HTML комментарий, и игнорируют теги.
Открытие для ранних версий клиента
<!--[if lt IE 5]--> <p>Please upgrade to Internet Explorer version 5.</p> <!--[endif]-->
Данный пример выполнится в ранних версиях клиента. В этом примере нет тире —. Старые версии браузеров распознают такие условия как неизвестные теги и ничего с ними не делают, просто парсят документ дальше и выполняют теги внутри вложенной конструкции.
Указание версий.
После точки допустимо указывать еще четыре значения для точного определения версии клиента.
Следующий пример укажет на версии браузера, имеющие 5 в начале (5, 5.5)
<!--[if IE 5]> <p>Welcome to any incremental version of Internet Explorer 5!</p> <![endif]-->
Этот пример конкретно указывает версию
<!--[if IE 5.0000]> <p>Welcome to Internet Explorer 5.0!</p> <![endif]-->
3 комментария
Условные комментарии под разные версии IE…
Thank you for submitting this cool story — Trackback from progg.ru…
Интересные возможности. Но я так и не могу придумать зачем бы я скрывал какойто текст от пользователей ранних версий браузера:-)
Например затем, что в ранних версиях он может отображатся не совсем так как ты хочешь…