Разные браузеры поддерживают разные наборы тегов/скриптов, классический пример - тег <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-файл для ослика, и Вы мне в этом помогли!!!