В этой статье раскрывается понятие условного комментария, а также приводится их классификация с примерами использования.
Всем верстальщикам без исключения знакома та ситуация, когда написанный ими код прекрасно выводится во всех браузерах, кроме всеми «любимого» Internet Explorer. В таком случае нужно вставить вспомогательный код или скрипт, который принудит нашего старичка работать так, как и все прочие нормальные браузеры. Именно для этого было разработан такой прием, как условный комментарий.
Условный комментарий — особый код, назначение которого задать параметры только для IE. Прочие браузеры игнорируют такую запись, принимая ее за обычный комментарий.
Синтаксис
Стандартный пример правильной записи условного комментария:
HTML
<!--[if условие]> Код для IE <![endif]-->
Такая запись должна использоваться в тех браузерах, которые могут распознать запись условного комментария. При проверке на валидацию будет получен положительный результат.
Допускается также использование такого формата:
HTML
<![if expression]> Код для IE <![endif]>
Данный формат предназначен для работы в тех браузерах, которые не могут распознать запись условного комментария. Также такая запись не пройдет проверку на валидацию. Однако этот нежелательный эффект устраняется через javascript. Для этого нужно знать версию программы и определенный код.
Условия и примеры
В таблице приведен список операторов для записи комментариев с примерами и пояснениями:
Оператор | Как использовать | Пояснения |
IE | [if IE] | Сейчас поддерживается только такая запись, которая расшифровывается как Internet Explorer |
value | [if IE 7] | Отвечает за указания версии программы, считывается, если совпадает с существующими версиями |
! | [if !IE] | Передает значение логического отрицания. Это значит, что будет установлено противоположное значение аргумента |
lt | [if lt IE 5.5] | less-than меньше чем. Отрабатывает, когда первый аргумент меньше второго |
lte | [if lte IE 6] | less-than or equal меньше или равно. Реагирует на ту ситуацию, когда второе значение больше первого или равно ему |
gt | [if gt IE 5] | greater-than больше чем. Отрабатывает, когда первый аргумент больше второго |
gte | [if gte IE 7] | greater-than or equal больше или равно. Реагирует на ту ситуацию, когда второй аргумент меньше или равен первому |
( ) | [if !(IE 7)] | Объединяет определенные части кода в одно целое |
& | [if (gt IE 5)&(lt IE 7)] | Означает логическую команду И. Приводит код в действие, когда оба условия истинны |
| | [if (IE 6)|(IE 7)] | Означает логическую команду ИЛИ. Приводит код в действие, когда одно из указанных условий истинно |
true | [if true] | Только правдивые значения |
false | [if false] | Всегда противоречащие значения |
Теперь следует рассмотреть, как выглядит полноценное лечения несуразных свойств Internet Explorer:
HTML
<!--[if IE 6]> <p>Будет показываться только в среде IE6.</p> <![endif]--> <![if !IE]>Для всех браузеров, за исключением IE<![endif]>
Также для того, чтобы условные комментарии отыграли свою главнейшую роль исключили из кода хаки, необходимо подключить соответствующие таблицы стилей для каждой необходимой версии браузера:
HTML
<!--[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]-->
Отметим пару положительных сторон применения условных комментариев:
- можно составить прогноз поведения кода в более новых версиях браузера;
- проходимость проверки на валидность.
Отрицательные стороны:
- сложность внесения поправок в код, так как нужно будет исправлять основную таблицу стилей и таблицу для IE.
- продлевается время загрузки страницы в IE, так как требуется загрузка вспомогательных файлов.