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

Разные браузеры поддерживают разные наборы тегов/скриптов, классический пример - тег <MARQUEE> в Internet Explorer. Иногда можно использовать специфику конкретного браузера, чтобы заставить его отображать страницу в соотвествии со стандартами. В этой статье пойдет речь про условные комментарии появившиеся в IE5+.

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

<!--[if IE]> Вы используете 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]-->

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

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

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

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

<!--[if gte IE 6]> Ваш браузер IE 6, или IE 6.1 или IE 7! <![endif]-->

Примеры

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

Пример первый. Отдадим IE стили в теге head:

<!--[if IE]> <style type="text/css"> div.mycontainer { width: 300px; filter:alpha(opacity=100); } </style> <![endif]-->

Пример второй. Если версия IE >= 5 выведем бегущий блок <MARQUEE>

<!--[if gte IE 5]> <marquee scrollAmount="3" direction="up" width="200" height="150"> <ul> <li>Новость 1</li> <li>Новость 2</li> <li>Новость 3</li> <li>Новость 4</li> </ul> </marquee> <![endif]-->

Теперь и вы можете настраивать поведение IE так, как вам захочется!

Поделись с друзьями:
Комментарии

Огромное спасибо! Обычно операторы так муторно описаны... Сидел, вспоминал как подключить отдельный css-файл для ослика, и Вы мне в этом помогли!

У вас в коде этой страницы имеются ошибки в написании условных операторов!
Исправьте, а то как-то не солидно :)

2 Rolan:
И где же ошибки? Я чего-то не заметил)))

Нажмите на ссылку на валидатор "W3C xhtml 1.0" (15-я строка).

2 Rolan:
А не кто и не спорит, что конструкция, не для ИЕ, не проходит валидацию, но безскриптовой альтернативы нет. А ошибок у Mike нет, он использует условные комментарии, так, как они прописаны в MSDN!

По статистике пользуются ИЕ 70%. Так что это пока самый популярный браузер. Никто, конечно не говорит, что самый лучший, но факт остается фактом.

Опишите пожалуйста условный коментарий для Opera.

Для нормальных браузеров нет условных комментариев. Они есть только в ИЕ, поскольку он работает очень криво.

Аватар пользователя Байкалов Герман

Артём, Игорь для оперы эти комментарии и не должны работать. Во всех браузерах, кроме IE, эти комментарии не воспринимаются как код. Только IE их читает. Эти комментарии для валидности и кроссбраузерности.

Спасибо, реально помогло в маркированном списке.