Условные комментарии (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]-->

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

ОператорОписание
!отрицание
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

Понравилась статья? Поделиться с друзьями:
Комментариев: 3
  1. creativo

    Условные комментария это вещь.

    1. Дмитрий

      конечно вещь! а ты думал

  2. FORTRESS-DESIGN (автор)

    Для получения кроссбразерной верстки и вытягивании древних браузеров — аналогов нет.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Перейти к верхней панели