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

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

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

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

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

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

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

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

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

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

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

<!--[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.

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

Условие в условном комментарии создается с помощью

специальных слов, запомнить значение которых очень легко, так как их всего четыре:

  • — меньше ()
  • — меньше или равно ()
  • — больше ()
  • — больше или равно ()

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

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

На этом все.

conditional comments

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

Вы здесь

Главная → Блог → CSS → Условные комментарии в 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, так как требуется загрузка вспомогательных файлов.

Ключевые слова: 

CSS приемы

CSS база. Или что должен знать каждый верстальщик

Уровень сложности:

Средний

Еще интересное

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

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

Если в одной системе установлено несколько IE, условные комментарии будут отображаться для каждой установки. как самая высокая установленная версия.

Эта страница была переведена на бразильский португальский, упрощенный китайский, русский, венгерский, румынский, фарси, итальянский и вьетнамский языки.

Условные комментарии работают только в IE и поэтому отлично подходят для предоставления специальных инструкций, предназначенных только для IE. Они поддерживаются от IE 5 до IE9.(включительно).

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

Если вам нужны специальные стили для IE10 и выше, вам придется найти другой метод, так как условные комментарии были отключены в IE10. Однако в этих версиях гораздо меньше ошибок, чем в более ранних.

Условные комментарии работают следующим образом:
  1. Их основная структура такая же, как у HTML-комментария ( ). Поэтому все остальные браузеры увидят их как обычные комментарии и полностью проигнорируют.
  2. IE, тем не менее, был запрограммирован на распознавание специального По условному комментарию это не IE 5-9

    Обратите внимание на специальный синтаксис:

    • gt : больше
    • lte : меньше или равно

    Обратите внимание на последнее. У него другой синтаксис, и его содержимое отображаются во всех браузерах, кроме IE:

    взломать CSS?

    Являются ли условные комментарии CSS-хаками? Строго говоря, да, поскольку они может служить для предоставления специальных инструкций по стилю для некоторых браузеров. Однако они не зависят от одного браузера. ошибка, чтобы решить другую, как это делают все настоящие хаки CSS. Кроме того, их можно использовать не только для CSS-хаков. только (хотя такое случается редко).

    Поскольку условные комментарии основаны не на взломе браузера, а на преднамеренной функции, я считаю, что они безопасны в использовании. Конечно, другие браузеры тоже могут реализовывать условные комментарии (хотя пока ни один из них не сделали это), но вряд ли они отреагируют на конкретный запрос

    Все, что находится между , будет подхвачено Internet Explorer. Таким образом, это будет работать с файлом CSS как обычно, а затем, только если браузером является Internet Explorer (на практике это будет Internet Explorer версии 9 и ниже), он также применит дополнительный патч для файла CSS.

    Вы также можете ориентироваться на определенные версии Internet Explorer: