Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

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

Дата:27.12.15 в 13:34
Раздел: 

В этой статье раскрывается понятие условного комментария, а также приводится их классификация с примерами использования.

Условные комментарии или как бороться с Internet Explorer

Всем верстальщикам без исключения знакома та ситуация, когда написанный ими код прекрасно выводится во всех браузерах, кроме всеми «любимого» 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, так как требуется загрузка вспомогательных файлов.

Оценок: 2 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)