Условные комментарии 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" "https://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" "https://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, является невалидным.