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

Опубликовано: 12.05.2011 Последняя правка: 16.12.2015

Условные комментарии IE

Условные комментарии IE — это специальные HTML-комментарии, содержимое которых браузеры Internet Explorer воспринимают как не закомментированный код. Для всех остальных браузеров эти комментарии ничем не отличаются от обычных, поэтому, встретив их в коде, они пропускают их и никак не обрабатывают. То же самое можно сказать и о валидаторах — при использовании условных комментариев, код всегда остается валидным на все 100%. Поэтому многие верстальщики применяют именно их, а не хаки, по крайней мере, когда дело касается IE.

Условные комментарии для IE были придуманы компанией Microsoft, чтобы помочь веб-разработчикам в кроссбраузерной верстке сайтов.

Используя их, можно добавлять в HTML-код страниц любые теги, подключать стили или скрипты таким образом, чтобы видели и обрабатывали их только браузеры IE. Причем синтаксис условных комментариев позволяет указывать, какие именно версии IE будут видеть добавленный код — все версии или только некоторые из них (IE6, IE7, IE8 и т.д.). Например, если использовать следующий код, то Internet Explorer 8 выведет на странице параграф (тег <P>) с текстом, а все остальные браузеры ничего «не увидят».

Синтаксис условных комментариев для IE

В общем случае условные комментарии указываются следующим образом:

Где условие может принимать одно их следующих значений:

Условие Описание Пример
IE Указывается, когда необходимо, чтобы комментарий поняли все версии Internet Explorer.
Версия Указание точной версии браузера, которая записывается через пробел после IE, можно использовать дробные числа, разделяя их точкой, например 5.5.
WindowsEdition Для IE8, который работает на Windows 7 можно применить отдельное условие.
! Логическое НЕТ (отрицание). Ставится перед условием, если необходимо, чтобы комментарий поняли все IE, кроме указанных. В том числе можно создать запрет вообще для всех Internet Explorer.
lt Меньше чем. Ставится, если условный комментарий должны понять все IE ниже указанной версии.
lte Меньше либо равно. Ставится, если понять должны все версии IE равные или ниже указанной.
gt Больше чем. Указывается для комментария, который предназначен для всех IE выше заданной версии.
gte Больше либо равно. Указывается, если комментарий предназначен для версии равной или выше заданной.
( ) Скобки. Служат для выделения подвыражений при создании сложных условий.
& Логическое И. Используется для объединения нескольких подвыражений. В этом случае условный комментарий «сработает», только если браузер пользователя будет соответствовать сразу всем подвыражениям.
| Логическое ИЛИ. Сработает, если браузер будет соответствовать хотя бы одному подвыражению.

Если необходимо, чтобы условный комментарий понял браузер отличный от IE (например, Opera), то это тоже можно сделать, но код потеряет валидность. Например:

Вообще подобный подход практически не используется в верстке, обычно указывают стандартные условные комментарии предназначенные только для IE.

Условные комментарии для IE. Примеры.

Пример 1

Пример HTML и CSS: условные комментарии для подключения отдельных внешних стилей

Результат примера

В этом примере у второго изображения птицы была ограничена видимая область с помощью свойства CSS clip. Однако IE6 и IE7 понимают это свойство, только если координаты области указаны через пробел, а не запятые. Поэтому был создан отдельный файл со стилями, в котором эти координаты указали так, как нравится данным браузерам. А потом этот файл подключили через условные комментарии и в итоге все остались довольны. Вот содержимое файлов со стилями:

Содержимое файла style.css

Содержимое файла ie6-ie7.css

Как видите, дублировать абсолютно все стили не нужно, старые Эксплореры свободно прочитают и применят первые три свойства из файла style.css, ведь они их понимают. А вот последнее свойство они как раз и возьмут из файла ie6-ie7.css.

Пример 2

Ну и на закуску очень простой пример, демонстрирующий подключение HTML-кода внутри тела документа (тег <BODY>).

Пример HTML и CSS: условные комментарии для обработки кода в зависимости от типа браузера

Результат примера

В данном примере в зависимости от версии IE будут выводиться разные сообщения. Если же браузер не относится к Internet Explorer, то также выведется свое сообщение. Еще раз обращаю ваше внимание на то, что комментарий, который предназначен не для IE, является невалидным.

От версии к версии браузер Internet Explorer является одним из самых чувствительных к верстке.

Часто используют различные хаки в стилях, чтобы избежать проблемы отображения. Однако оптимальный вариант — создать в коде условия, по которым определенные файлы стилей будут подключены в зависимости от установленной версии.

Важно, что условные комментарии можно использовать не только для подключения стилей, но и для отображения любых дополнительных блоков, подключения javascript.

Все версии IE

<!—[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]—>

Все браузеры кроме IE

<!—[if !IE]><!—> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!—<![endif]—>

IE седьмой версии

<!— [if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]—>

IE шестой версии

<!— [if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]—>

IE пятой версии

<!— [if IE 5]> <link rel="stylesheet" type="text/css" href="ie5.css" /> <![endif]—>

IE версии 5.5

<!— [if IE 5.5000]> <link rel="stylesheet" type="text/css" href="ie55.css" /> <![endif]—>

IE шестой версиии ниже

<!— [if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> <![endif]—><!— [if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> <![endif]—>

IE седьмой версии и ниже

<!— [if lt IE 8]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]—><!— [if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]—>

IE восьмой версии и ниже

<!— [if lt IE 9]> <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> <![endif]—><!— [if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> <![endif]—>

IE шестой версии и выше

<!— [if gt IE 5.5]> <link rel="stylesheet" type="text/css" href="ie6-and-up.css" /> <![endif]—><!— [if gte IE 6]> <link rel="stylesheet" type="text/css" href="ie6-and-up.css" /> <![endif]—>

IE ведьмой версии и выше

<!— [if gt IE 6]> <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> <![endif]—><!— [if gte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> <![endif]—>

IE восьмой версии и выше

<!— [if gt IE 7]> <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> <![endif]—><!— [if gte IE 8]> <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> <![endif]—>

Универсальный метод условных комментариев для IE6

В этом подходе используется максимально упрощенное отображение сайта для самого проблемного с точки зрения верстки 6-го IE. Для шестерки подключается css с googlecode, для версий, начиная с седьмой, подключается ваш обычный файл стилей.

<!—[if !IE 6]><!—> <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" /> <!—<![endif]—> <!—[if gte IE 7]> <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" /> <![endif]—> <!—[if lte IE 6]> <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" /> <![endif]—>

Свойство устанавливает коэффициент масштабирования элемента и используется как для увеличения, так и для уменьшения размеров объекта. Значение по умолчанию — , что соответствует, отображению элемента без масштабирования, с исходными размерами. Данное свойство может применяться ко всем элементам и не наследуется.

Свойство не является частью стандарта CSS и поддерживается только браузерами Internet Explorer 5.5+, Google Chrome 1.0+ и Apple Safari 4.0+. В Internet Explorer 8+ рекомендуется использовать свойство . Для достижения кроссбраузерной совместимости целесообразнее использовать свойство из модуля CSS3 2D Transforms.

Если для элемента вложенного в другой элемент так же установлен коэффициент масштабирования, то для дочерного элемента размеры будут расчитываться не относительно его исходного размера, а относительно его исходного размера с учетом масштаьбирования родительского элемента. Хотя свойство {name} не наследуется, но изменение масштаба коснется всех потомков данного элемента.

Допустимые значения 

  • — Вещественное число, указывающее коэффициент масштабирования, где 1.0 соответствует исходным размерам, или значению normal. Значения меньше 1.0 соответствуют уменьшению, а больше 1.0 — увеличению масштаба. Отрицательные значения игнорируются.
  • — Процентное значение, указывающее коэффициент масштабирования, где 100% соответствуют исходным размерам, или значению normal. Значения меньше 100% соответствуют уменьшению, а больше 100% — увеличению масштаба. Отрицательные значения игнорируются.
  • — масштабирование отсутствует, элемент отображается с исходными размерами

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

Значение Результат
.zoom-normal { zoom: normal; zoom: 100%; zoom: 1; } нормальное отображение
100%
.zoom-in { zoom: 125%; zoom: 1.25; } увеличенный масштаб
125%
.zoom-out { zoom: 75%; zoom: 0.75; } уменьшенный масштаб
75%
.zoom-multiply-outer { zoom: 125%; zoom: 1.25; } .zoom-multiply-inner { zoom: 80%; zoom: 0.80; }

вложенный масштаб
125% + 80%
реальный размер:
125% * 80% = 100%

 

Свойство относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение normal. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

Краткое описание

Синтаксис:

<вещественное число> | <проценты> | normal

По умолчанию:

normal

Применяется к:

всем элементам

Наследование:

не наследуется

Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style.zoom

Кроссбраузерная совместимость

Internet Explorer

Firefox

Chrome

Safari

Opera

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

Закрыть меню