Опубликовано: 12.05.2011 Последняя правка: 16.12.2015

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

Условные комментарии IE — это специальные HTML-комментарии, содержимое которых браузеры Internet Explorer воспринимают как не закомментированный код. Для всех остальных браузеров эти комментарии ничем не отличаются от обычных, поэтому, встретив их в коде, они пропускают их и никак не обрабатывают. То же самое можно сказать и о валидаторах — при использовании условных комментариев, код всегда остается валидным на все 100%. Поэтому многие верстальщики применяют именно их, а не хаки, по крайней мере, когда дело касается IE.

Условные комментарии для IE были придуманы компанией Microsoft, чтобы помочь веб-разработчикам в кроссбраузерной верстке сайтов. Используя их, можно добавлять в HTML-код страниц любые теги, подключать стили или скрипты таким образом, чтобы видели и обрабатывали их только браузеры IE. Причем синтаксис условных комментариев позволяет указывать, какие именно версии IE будут видеть добавленный код — все версии или только некоторые из них (IE6, IE7, IE8 и т.д.). Например, если использовать следующий код, то Internet Explorer 8 выведет на странице параграф (тег <P>) с текстом, а все остальные браузеры ничего «не увидят».

<body>
<!--[if IE 8]><p>Привет от IE8</p><![endif]-->
</body>

Синтаксис условных комментариев для IE

В общем случае условные комментарии указываются следующим образом:

<!--[if условие]>содержимое комментария<![endif]-->

Где условие может принимать одно их следующих значений:

УсловиеОписаниеПример
IEУказывается, когда необходимо, чтобы комментарий поняли все версии Internet Explorer.<!--[if IE]>____<![endif]-->
ВерсияУказание точной версии браузера, которая записывается через пробел после IE, можно использовать дробные числа, разделяя их точкой, например 5.5.<!--[if IE 7]>____<![endif]-->
WindowsEditionДля IE8, который работает на Windows 7 можно применить отдельное условие.<!--[if WindowsEdition]>____<![endif]-->
!Логическое НЕТ (отрицание). Ставится перед условием, если необходимо, чтобы комментарий поняли все IE, кроме указанных. В том числе можно создать запрет вообще для всех Internet Explorer.<!--[if !IE]>____<![endif]-->
ltМеньше чем. Ставится, если условный комментарий должны понять все IE ниже указанной версии.<!--[if lt IE 8]>____<![endif]-->
lteМеньше либо равно. Ставится, если понять должны все версии IE равные или ниже указанной.<!--[if lte IE 7]>____<![endif]-->
gtБольше чем. Указывается для комментария, который предназначен для всех IE выше заданной версии.<!--[if gt IE 8]>____<![endif]-->
gteБольше либо равно. Указывается, если комментарий предназначен для версии равной или выше заданной.<!--[if gte IE 7]>____<![endif]-->
( )Скобки. Служат для выделения подвыражений при создании сложных условий.<!--[if !(IE 7)]>____<![endif]-->
&Логическое И. Используется для объединения нескольких подвыражений. В этом случае условный комментарий «сработает», только если браузер пользователя будет соответствовать сразу всем подвыражениям.<!--[if (gt IE 6)&(lt IE 9)]>____<![endif]-->
|Логическое ИЛИ. Сработает, если браузер будет соответствовать хотя бы одному подвыражению.<!--[if (IE 8)|(IE 9)]>____<![endif]-->

Если необходимо, чтобы условный комментарий понял браузер отличный от IE (например, Opera), то это тоже можно сделать, но код потеряет валидность. Например:

<![if !IE]>Содержимое комментария для всех, кроме IE<![endif]>

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

Условные комментарии для IE. Примеры.

Пример 1

Пример HTML и CSS: условные комментарии для подключения отдельных внешних стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Условные комментарии IE</title>
  <link rel="stylesheet" type="text/css" href="files/style.css">
  <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="files/ie6-ie7.css"><![endif]-->
 </head>
 <body>
  <div>
   <img src="images/bird.png" width="200" height="200" alt="Птица">  
   <img id="bird_clip" src="images/bird.png" width="200" height="200" alt="Часть птицы">
  </div>
 </body>
</html>

Результат примера

В этом примере у второго изображения птицы была ограничена видимая область с помощью свойства CSS clip. Однако IE6 и IE7 понимают это свойство, только если координаты области указаны через пробел, а не запятые. Поэтому был создан отдельный файл со стилями, в котором эти координаты указали так, как нравится данным браузерам. А потом этот файл подключили через условные комментарии и в итоге все остались довольны. Вот содержимое файлов со стилями:

Содержимое файла style.css

#bird_clip {
 position: absolute; /* абсолютное позиционирование */
 top: 220px; /* смещение сверху вниз */
 left: 10px; /* смещение слева направо */
 clip: rect(10px, 170px, 150px, 20px); /* координаты видимой области */
}

Содержимое файла ie6-ie7.css

#bird_clip {
 clip: rect(10px 170px 150px 20px); /* координаты видимой области для IE6 и 7 */
}

Как видите, дублировать абсолютно все стили не нужно, старые Эксплореры свободно прочитают и применят первые три свойства из файла style.css, ведь они их понимают. А вот последнее свойство они как раз и возьмут из файла ie6-ie7.css.

Пример 2

Ну и на закуску очень простой пример, демонстрирующий подключение HTML-кода внутри тела документа (тег <BODY>).

Пример HTML и CSS: условные комментарии для обработки кода в зависимости от типа браузера

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Условные комментарии IE</title>
 </head>
 <body>
  <!--[if IE]><p>Ваш браузер Internet Explorer</p><![endif]-->
  <!--[if lte IE 7]><p>Младше 8-й версии</p><![endif]-->
  <!--[if gte IE 8]><p>8-й версии или старше</p><![endif]-->
  <!--[if IE]><p>Я думаю это...</p><![endif]-->
  <!--[if IE 6]><p>IE 6.</p><![endif]-->
  <!--[if IE 7]><p>IE 7.</p><![endif]-->
  <!--[if IE 8]><p>IE 8.</p><![endif]-->
  <!--[if IE 9]><p>IE 9.</p><![endif]-->
  <!--[if gt IE 9]><p>Хммм, IE 10?</p><![endif]-->
  <![if !IE]><p>Вы пользуетесь не Internet Explorer.</p><![endif]>
 </body>
</html>

Результат примера

В данном примере в зависимости от версии IE будут выводиться разные сообщения. Если же браузер не относится к Internet Explorer, то также выведется свое сообщение. Еще раз обращаю ваше внимание на то, что комментарий, который предназначен не для IE, является невалидным.