Разные браузеры поддерживают разные наборы тегов/скриптов, классический пример - тег <MARQUEE> в Internet Explorer, иногда можно использовать специфику конкретного браузера, чтобы заставить его отображать страницу в соотвествии со стандартами. В этой статье пойдет речь про условные комментарии появившиеся в IE5+.
Посмотрим, как можно отдать 2 разных куска кода разным браузерам:
С помощью условных комментариев можно отдавать разный код разным версиям Internet Explorer:
Операторы позволяют использовать условия в условных комментариях, например оператор "!", запрещает выдачу кода указанной версии IE. Вот полный список возможных операторов:
С помощью операторов мы можем задать более комплексное условие, наример:
Давайте рассмотрим несколько примеров использования условных комментариев.
Пример первый. Отдадим IE стили в теге head:
Посмотрим, как можно отдать 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 так, как вам захочется!
@ 09 Июня 2008 в 15:20
Огромное спасибо!!! Обычно операторы так муторно описаны... Сидел, вспоминал как подключить отдельный css-файл для ослика, и Вы мне в этом помогли!!!
@ 23 Августа 2008 в 23:28
У вас в коде ЭТОЙ страницы имеются ошибки в написании условных операторов!
Исправьте, а то как-то не солидно :)))
@ 04 Сентября 2008 в 09:24
2 Rolan:
И где же ошибки? Я чего-то не заметил)))
@ 05 Сентября 2008 в 23:15
Нажмите на ссылку на валидатор "W3C xhtml 1.0"
15-я строка
@ 22 Октября 2008 в 20:11
2 Rolan:
А не кто и не спорит, что конструкция, не для ИЕ, не проходит валидацию, но безскриптовой альтернативы нет. А ошибок у Дяди Миши нет, он использует условные комментарии, так, как они прописаны в MSDN!
@ 19 Мая 2009 в 11:22
По статистике пользуются ИЕ 70%. Так что это пока самый популярный браузер. Никто, конечно не говорит, что самый лучший, но факт остается фактом.
@ 28 Июня 2009 в 23:01
Опишите пожалуйста условный коментарий для Opera.
@ 29 Сентября 2009 в 12:52
Для нормальных браузеров нет условных комментариев. Они есть только в ИЕ поскольку он работает очень криво.
@ 14 Декабря 2009 в 08:24
Артём,Игорь для оперы эти комментарии и не должны работать. Во всех браузерах, кроме IE, эти комментарии не воспринимаются как код. Только IE их читает. Эти комментарии для валидности и кроссбраузерности.
@ 29 Июля 2010 в 02:18
Спасибо, реально помогло в маркированном списке
@ 02 Февраля 2011 в 15:56
Спасибо, реально помогло.