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

Reading time ~4 minutes

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

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

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

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

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

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

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

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

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

Начинается (

1
if
) условный комментарий со строки:

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

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

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

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

1
ie.css
, расположенную по адресу
1
css/
”.

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

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

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

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

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

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

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

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

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

<!--[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-стандартами и “костыль” в виде условного комментария ему больше не требуется.

На этом все.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024