Условные комментарии
Дата публикации: 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 за счет дополнительного файла)
Источники:
- MSDN :: About Conditional Comments
- designformasters.info Условные комментарии (спасибо за перевод)
По теме
- CSS хаки — CSS конструкции, которые понимают одни браузеры и игнорируют другие
- мета тег X-UA-Compatible — задает режим отображения страниц для IE
- условные CSS
Теги: хаки, CSS приемы
Показать комментарии