Условные комментарии (Conditional Comments)

Определение условных комментариев и их назначение

Использование условных комментариев (Conditional Comments) позволяет легально, валидно и без применения JavaScript писать код для ИЕ.

Условные комментарии — один из документированных способов в верстке, который позволяет определить  браузер Internet Explorer и даже различать его версии. Необходимость в этом часто возникает при подключении .css или .js-файлов, которые содержать отличные правила, предназначенные для старых версий ИЕ.

Использование условных комментариев

Поддержка условных комментариев начинается с пятой версии ИЕ. Допускается их использование как в HEAD, так и в BODY, со следующим синтаксисом:

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="Screen" href="/css/filename.css">
<!--[endif]-->

От простого многострочного, условный комментарий по написанию отличается двумя блоками:

• [if условие] — задает условие. Если оно принимает значание true, то код внутри комментария интерпритируется браузером. Если false — игнорируется.
• ![endif] — закрывает условный комментарий.

Посмотрим, как можно отдать 2 разных куска кода разным браузерам:

<![if gte IE5]>
Вы используете IE5 и выше!
<![endif]-->

<![if !IE]>
Как хорошо, что вы не пользуетесь IE!
<![endif]>

Как определить IE 5.5 и IE 6

С помощью условных комментариев можно отдавать разный код разным версиям Internet Explorer:

<!--[if IE 5.5000]>
У вас очень древний браузер IE 5.5!
<![endif]-->

<!--[if IE 6]>
До сих пор работаете в IE 6?
<![endif]-->

Таблица операторов условных комментариев

С помощью операторов мы можем задать более комплексное условие, наример:

<!--[if gte IE 6]>
Ваш браузер IE 6, или IE 6.1 или IE 7!
<![endif]-->

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

Давайте рассмотрим несколько примеров использования условных комментариев.

Для всех современных браузеров пишем стили и подключаем  css-файлы обычным способом :

<link rel="stylesheet" type="text/css" media="Screen" href="/css/colors.css">
<link rel="stylesheet" type="text/css" media="Screen" href="/css/main.css">
<link rel="stylesheet" type="text/css" media="Screen" href="/css/common.css">
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css">

Решение проблем посредством условных комментариев

Если возникли проблемы с отображением сайта в ИЕ, воспользуемся условными комментариями:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="Screen" href="/css/main-ie7.css">
<link rel="stylesheet" type="text/css" media="Screen" href="/css/common-ie7.css">
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="Screen" href="/css/main-ie6.css">
<script type="text/javascript" src="/js/ie6-fix.js"></script>
<![endif]-->

Порядок подключения css-файлов следующий: сначала указываются общие стили, а потом индивидуальные для проблемного браузера.

Conditional comments block downloads