Содержание
Определение условных комментариев и их назначение
Использование условных комментариев (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]-->
Таблица операторов условных комментариев
| Оператор | Описание |
|---|---|
| ! | отрицание |
| lt | меньше чем |
| lte | меньше или равно |
| gt | больше чем |
| gte | больше или равно |
С помощью операторов мы можем задать более комплексное условие, наример:
<!--[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