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

Автор: Евгений Рыжков Дата публикации: 02.02.2009

Условные комментарии — специальная конструкция, содержимое которой предназначено только для браузера Internet Explorer. Остальные браузеры это воспринимают как обычный комментарий.

Синтаксис

<!--[if условие]> HTML код <![endif]-->

Для браузеров поддерживающих условные комментарии. Проходит валидацию.

<![if expression]> HTML код <![endif]>

Для браузеров не поддерживающих условные комментарии. Не проходит валидацию (этот недостаток устраняется с помощью нехитрого javascript: определяем браузер и вставляем нужный код).

Условия

ЭлементПримерЗначение
IE[if IE]Единственное поддерживаемое сейчас свойство IE, равное версии Internet Explorer.
value[if IE 7]Целое или дробное число обозначающее версию браузера. Выражение истинно если число совпадает с версией браузера.
![if !IE]Оператор отрицания (NOT). Возвращает значение обратное логическому значению аргумента.
lt[if lt IE 5.5]Меньше (less-than). Возвращает true если первый аргумент меньше второго.
lte[if lte IE 6]Меньше либо равно (less-than or equal). Возвращает true если первый аргумент меньше либо равен второму.
gt[if gt IE 5]Больше (greater-than). Возвращает true если первый аргумент больше второго.
gte[if gte IE 7]Больше либо равно (greater-than or equal). Возвращает true если первый аргумент больше либо равен второму.
( )[if !(IE 7)]Скобки позволяют выделить подвыражения в сложном выражении.
&[if (gt IE 5)&(lt IE 7)]Оператор AND. Возвращает true если оба подвыражения истинны.
|[if (IE 6)|(IE 7)]Оператор OR. Возвращает true если одно их подвыражений истинно.
true[if true]Всегда true.
false[if false]Всегда false.

Примеры

<!--[if IE 6]>
<p>Это можно будет увидеть только в IE6.</p>
<![endif]-->

<![if !IE]>Это увидят все браузеры кроме IE<![endif]>

Основное применение условных комментариев — исправление ошибок Internet Explorer, не прибегая к хакам. Для этого подключаем файлы стилей специально написанные для IE.

<!--[if IE 6]><link href="path-to/ie6.css" rel="stylesheet" type="text/css"/><![endif]-->
<!--[if IE 7]><link href="path-to/ie7.css" rel="stylesheet" type="text/css"/><![endif]-->

Плюсы:

  • предсказуемость поведения в будущих версиях браузера (чего не скажешь о CSS хаках)
  • валидность кода

Недостатки:

  • увеличивается время на разработку и отладку (один файл править проще и быстрей)
  • увеличивается время загрузки страниц (для IE за счет дополнительного файла)

Источники:

По теме