/* 29.09.2005 */
Определяем тип и версию браузера с помощью HTML комментариев
Довольно часто возникают ситуации, когда разные браузеры по разному отображают один и тот-же документ. Причиной тому могут служить как различные ошибки браузеров, так и подходы в стиле "а мы пойти своим путем", когда производители обозревателей не желают следовать стандартам. Но как это не парадоксально, некоторые нестандартные "фичи" помогают обходить различия браузеров. И сегодня мы поговорим о комментариях в браузере Internet Explorer...
Для того чтобы страница выглядела одинаково в разных браузерах, необходимо заставить разные типы браузеров, а часто и разные версии одного браузера, обрабатывать разный код. Обычно это реализуется с помощью скриптов (которые определяют тип, версию браузера) или CSS-хаков. Но в IE есть более простой и изящный способ - это комментарии.
Тег COMMENT
Начиная с версии 3.0 Internet Explorer поддерживает нестандартный тег COMMENT, который позволяет обозначить часть страницы как HTML комментарий. Его поведение аналогично стандартному комментарию HTML (<!-- комментарий -->) , НО понимает его только Internet Explorer. Другие же браузеры, встречая тег COMMENT, игнорируют его, однако содержимое этого тега нормально ими обрабатывается.
Таким образом, используя тег COMMENT, можно задавать код, который будет восприниматься всеми кроме IE.
Пример:
<html> <body> <style type="text/css"> /* Для IE */ DIV {border: 1px solid red;} </style> <comment> <style type="text/css"> /* Для всех других кроме IE */ DIV {border: 2px dashed blue;} </style> </comment> <div>Комментарий HTML</div> </body> </html>
IE отобразит сплошную красную рамку в один пиксел, а все остальные синюю пунктирную рамку толщиной в два пиксела.
Условные комментарии
Условные комментарии, также как и тег COMMENT изобретение Microsoft. Поддерживаются они только браузером Internet Explorer начиная с версии 5, другие же браузеры их не знают. Так что это такое?
Условные комментарий - это контейнер специального вида, содержимое которого либо игнорируется и никак не отображается браузером, либо обрабатывается как обычный HTML в зависимости от значения условного выражения.
Пример:
<!--[if IE 5]>
<SCRIPT type="text/javascript">
alert("Вы используете обозреватель IE с основным номером версии 5");
</SCRIPT>
<![endif]-->
В примере, выражение if IE 5 внутри квадратных скобок - называется условным выражением (между квадратными скобками и выражением недопустимы пробелы). Если данное условное выражение вычисляется в логическое true (логическая истина), то содержимое контейнера разбирается и отображается на странице, иначе игнорируется. Касательно нашего примера, условное выражение if IE 5 будет вычислено в истину, если браузер Internet Explorer с основным номером версии 5, и тогда будет выполнен javascript код внутри комментария.
Рассмотрим синтаксис:
<!--[if expression]> HTML <![endif]-->
Параметр HTML внутри синтаксического блока означает любой блок HTML содержимого, включая скрипт. if expression -условное выражение распознаваемое браузером IE версии 5 и выше.
С браузером IE версии 5 и выше разобрались, а как же другие браузеры? Давайте вспомним синтаксис обычных HTML комментариев:
<!-- текст комментария -->
Вы заметили? Да, да условный комментарий по сути дела является обычным HTML комментарием, поэтому если браузер ничего не знает об условных комментариях, то он воспринимает [if expression]> HTML <![endif] как текст обычного HTML комментария и игнорирует его.
Однако, существует и альтернативный синтаксис условных комментариев, который заставляет браузеры, ничего не ведающие об условных комментариях, не игнорировать содержимое, а наоборот воспринимать содержимое как обычный HTML, который обрабатывается и отображается.
Альтернативный синтаксис:
<![if expression]> HTML <![endif]>
Пример:
<![if IE 7]>
Пример, изображения в формате PNG, в котором задействован альфа-канал:
<img src="alpha_channel.png">
<![endif]>
В примере выше, содержимое комментария, демонстрирующее использование альфа-канала в формате PNG, будет отображено "незнающими" браузерами, а также IE версии 7.
Обратите внимание, что в открывающей части комментария после "<!" нет "--", а в закрывающей части нет "--" перед ">", поэтому условный комментарий альтернативного синтаксиса не воспринимается "незнающими" браузерами, как обычный комментарий, они видят незнакомые теги <![if expression]> и <![endif]>, и по правилам обязаны проигнорировать их, но только сами теги, а не их содержимое.
По сути дела, условный комментарий такого синтаксиса, подобен тегу COMMENT, только в отличии от последнего у него ещё есть условное выражение.
Условное выражение
Условные выражения нужны для определения типа и версии браузера. Условное выражение (expression) - есть комбинация операторов, значений, и свойств, представленных в таблице ниже.
| Элемент | Синтаксис | Пояснения |
|---|---|---|
| feature | IE | Строка. На данный момент поддерживается только одно значение: строка "IE", соответствующая браузеру Internet Explorer. |
| version | число | Целое или вещественное число, определяющее версию браузера. |
| оператор | ! | Оператор логического отрицания. Данный оператор возвращает true, если следующее за ним выражение вычисляется в false. |
| сравнение | feature | Возвращает логическое значение true, если feature совпадает с типом браузера. |
| сравнение | feature version | Возвращает логическое значение true, если feature совпадает с типом браузера, а номер версии браузера совпадает с version. |
| сравнение | lt | Оператор сравнения меньше чем (less-than). Сравнивает значения или выражения. Возвращает логическое значение true, если первый аргумент меньше чем второй. |
| сравнение | lte | Оператор меньше или равно (less-than-or-equal). Сравнивает значения или выражения. Возвращает логическое значение true, если первый аргумент меньше или равен второму. |
| сравнение | gt | Оператор больше (greater-than). Сравнивает значения или выражения. Возвращает логическое значение true, если первый аргумент больше чем второй. |
| сравнение | gte | Оператор больше или равно (greater-than-or-equal). Сравнивает значения или выражения. Возвращает логическое значение true, если первый аргумент больше или равен второму. |
Примеры условных выражений:
[if IE 5] - IE с основным номером версии 5 (т.е. 5.0, 5.01, 5.5 ...)
[if IE 5.0] - IE с основным номером версии 5 и первой цифрой добавочного номера версии 0 (т.е. 5.0, 5.01 ..., но не 5.5)
[if !IE 5] - любой IE кроме 5 серии
[if gt IE 5.01] - любой IE версии больше чем 5.01, не включая 5.01
[if gte IE 5.5] - любой IE версии больше или равно 5.5
[if lt IE 6] - любой IE версии меньше 6
Формат строки версии браузера
Для получения правильного результата следует внимательно относиться к составлению условного выражения, и конкретно к номеру версии браузера. Номер версии можно определить как целое число, в случае, когда указывается только главный номер версии браузера. В ситуациях, где выражение должно проверять и дополнительный номер версии браузера, номер версии может быть определен как целое число, за которым следует десятичная точка, и затем до четырех последовательных цифр. Поэтому, полный номер версии, похож на вещественное число с максимум четырьмя десятичными разрядами.
Примеры:
- 5 - корректный формат
- 5.0453 - корректный формат.
- 5.0.4.5.3 - НЕкорректный формат;
Выше я сказал, что номер версии похож на вещественное число, потому что он на самом деле не является числом, и важно иметь в виду, что в номере версии сравнивается отдельно каждая цифра, причем сравнивается то количество цифр, которое присутствует в номере версии условного выражения. Поэтому условное выражение [if IE 5] соответствует всем версиям IE5, ибо сравнивается только основной номер версии, а выражение [if IE 5.0] соответствует и версии 5.0, и версии 5.01, и версии 5.0002 и т.д. ибо сравнивается основной номер и одна цифра после точки.
Следует отметить, что IE5 идущий с Windows 2000, имеет полный номер версии 5.0002, а не 5.0000. Номер версии 5.5 в полном виде выглядит как 5.5000.
P.S.: При работе с условными комментариями не всегда необходимо использование скриптов, и в случае их отсутствия на странице, браузеру нет нужды в загрузке машины сценариев (это относится, по крайней метре, к IE). Условные комментарии обрабатываются при загрузке на фазе разбора страницы, таким образом, только нужное содержимое попадает на веб-страницу. Условные комментарии можно свободно комбинировать с другими техниками определения браузера.