Условный комментарий для ie

Условный комментарий для ie

Условные комментарии используются для написания специальных инструкций которые будут работать только в Internet Explorer не ниже 5-ой версии.

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

Структура похожа на обычный комментарий в HTML, поэтому остальные браузеры будут воспринимать его как обычный комментарий. Explorer распознаёт специальный синтаксис , решает условие if и парсит содержимое условного комментария так, как если бы это было содержание нормальной страницы. Условные комментарии используют синтаксис HTML комментариев, поэтому они могут быть включены только в HTML страницу. Удобно бывает сделать отдельные стили для IE и вставить тег link в условный комментарий.

Ниже написаны несколько условных комментариев, которые показывают версию Internet Explorer, которую вы используете.

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

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

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

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

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

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

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

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

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

Читайте также:  Пофамильный список погибших в вов

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

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

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

Оператор Описание
! отрицание
lt меньше чем
lte меньше или равно
gt больше чем
gte больше или равно

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

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

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

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

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

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

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

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

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

Читайте также:  Как в программе лайтрум изменить язык

) с текстом, а все остальные браузеры ничего «не увидят».

Синтаксис условных комментариев для 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-кода внутри тела документа (тег ).

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

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

Ссылка на основную публикацию
Уроки нлп для начинающих
Если вы хотя бы немного интересуетесь психологией, то о нейролингвистическом программировании (НЛП), наверное, тоже слышали. В статье мы постараемся объяснить...
Технология etth что это
ETTH — Ethernet To The Home (ETTH) is a specific application of Fiber to the premises (FTTP) that first emerged...
Технология nfc в наушниках что это
NFC — это аббревиатура от английского Near Field Communication. С помощью этой технологии становится возможным обмен данными между различными устройствами,...
Уроки ворд 2010 для начинающих
Microsoft Office 2010 — бесплатные обучающие уроки для чайников с нуля. Получите необходимые навыки профессиональной работы с пакетом Microsoft Office...
Adblock detector