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

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

Рекомендуем прочесть  Root — SEO-оптимизированная тема для WordPress
<!--[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: :???: :?: :!:

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