Главная/ HTML и CSS приемы | Обходим баги, находим интересные решения/ Css Tricks/ Условные комментарии

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

Дата публикации: 02.02.2009

Последнее обновление: 30.11.2010

Условные комментарии — специальная конструкция, содержимое которой предназначено только для браузера 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 за счет дополнительного файла)

Источники:

По теме

Теги: ,
Показать комментарии