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

Reading time ~5 minutes

Короткая статья, посвященная условным комментариям. Такие комментарии до сих пор активно применяются на практике и имеют отношение исключительно к браузерам семейства Internet Explorer (IE).

Точнее - условные комментарии и являются изобретением фирмы ООО “Микрософт”, призванным помочь браузерам этой конторы более-менее адекватно обрабатывать веб-сайты. Откуда такое странное название - условный комментарий? Его можно расшифровать как слияние двух слов:

  • условие;
  • комментарий;

Условие - это как обычное условие if в любом языке программирования (в том же JavaScript, к примеру). А комментарий - это как обычный комментарий в HTML-документе:

-- Это комментарий в HTML -->

Синтаксис условного комментария

Сочетание условия и комментария в итоге получило название условного комментария. Синтаксис можно представить примером ниже:

--[if lte IE 8]>
 ...
endif]-->

Новичок, если увидит впервые такой синтаксис, может удивиться и устрашиться его сложного написания (таким новичком был я когда-то, пока не привык). Тем более, его сложно запомнить для написания вручную, проще просто копировать. Но на самом деле в условных комментариях все предельно просто.

Начинается (if) условный комментарий со строки:

--[if lte IE 8]>
 <p>... после которой идет HTML-код. Заканчивается (<strong>endifstrong>) условный комментарий строкой:p>
endif]-->

Реальный рабочий пример условного комментария можно привести ниже. Например, таким образом:

--[if lte IE 8]>
 <link rel="stylesheets" type="text/css" href="css/ie.css" media="screen, projection">
endif]-->

Расшифровать подобный условный комментарий можно таким образом: “если браузером посетителя является Internet Explorer версии 8 или ниже, то следует загрузить таблицу стилей ie.css, расположенную по адресу css/”.

Цель создания условных комментариев

Условные комментарии понимают только браузеры семейства IE. Для других браузеров (таких как Chrome, Firefox или Opera) такие строки являются обычным HTML-комментарием, который они просто опускают (проходят мимо него).

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

Зачем понадобилась такая особенность именно для браузеров IE, много говорить не надо. Все хорошо знают, что IE версии 6-9 отображают HTML-страницы не всегда в соответствии с веб-стандартами.

Поэтому был придуман обходной маневр, призванный не нагружать “правильные” браузеры Chrome, Firefox или Opera лишним кодом, предназначенным только для браузера IE.

Ключевые слова в условных комментариях

Условие в условном комментарии создается с помощью специальных слов, запомнить значение которых очень легко, так как их всего четыре:

  • lt - меньше (<)
  • lte - меньше или равно (<=)
  • gt - больше (>)
  • gte - больше или равно (>=)

То есть, запись вида:

--[if lte IE 7]>
 ...
endif]-->

… читается как: “если браузер IE версии 7 или ниже (версия 6 или 5), то применить код внутри комментария”.

Или же:

--[if lt IE 9]>
 ...
endif]-->

… “если версия браузера IE меньше 9, то применить код внутри комментария.

С записями - IE 6, IE 7, IE 8, IE 9 - думаю, все должно быть понятно без объяснений: Internet Explorer 6 (IE 6), Internet Explorer 7 (IE 7), Internet Explorer 8 (IE 8), Internet Explorer 9 (IE 9).

Заключение

Более подробно и обстоятельно об условных комментариях можно почитать из первоисточника (очень логично и правильно так сделать) - About conditional comments. Правда, оригинал написан на языке Шекспира, но кто не владеет им, может разобраться и так.

Стоит также заметить, что на оф. сайте Microsoft говориться о том, что в браузере IE начиная с версии 10 прекращается поддержка условных комментариев - Условные комментарии более не поддерживаются. То есть, браузер IE10 не сможет понять условный комментарий в HTML-документе и пропустит его, посчитав обычным комментарием.

Насколько я могу лично судить о таком шаге, вызван он тем, что в компании Microsoft уверены в том, что браузер версии 10 сможет правильно работать в соответствии с W3C-стандартами и “костыль” в виде условного комментария ему больше не требуется.

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке