Условные комментарии

При вёрстке сайта нередко возникает ситуация, когда страница по-разному отображается в различных браузерах. В идеале, конечно, добиться необходимого результата стандартными средствами CSS и HTML, но сейчас поговорим о том, как заставить браузеры отображать различный код для одинакового отображения веб-страницы.
Простой пример, когда это может пригодиться - вывод картинки в формате *.png
Проблема в том, что в Internet Explorer v5.5 - 6 для отображения PNG-прозрачности к изображению необходимо применять фильтр AlphaImageLoader (более ранние версии IE не в состоянии использовать прозрачность вообще).

Определять тип и версию браузера средствами Java Script или PHP не совсем удобно. Так, в первом случае, у пользователя может быть отключён Java Script, а в случае с PHP представьте себе такой вариант - пользователь зашёл на сайт с Internet Explorer (сценарий PHP выполнился и выдал необходимый код), пользователь сохранил страницу на локальном компьютере и открыл её в другом браузере. И что он увидит?

Для решения проблемы можно воспользоваться так называемыми CSS-хаками или условными комментариями.
Условные комментарии это изобретение компании Microsoft и понимаются только браузерами Internet Explorer начиная с версии 5.0
Общий синтаксис условного комментария:

Как видите, по синтаксису это обычный HTML-комментарий, именно поэтому браузеры, которые не понимают условных комментариев, воспримут этот код как HTML-комментарий и попросту проигнорируют его.

Рассмотрим как работают условные комментарии.
if expression - условное выражение, возращающее "true" или "false" (обращаем внимание, что между квадратными скобками и выражением пробелы недопустимы). Если данное условное выражение вычисляется в "true" (логическая истина), то содержимое условного комментария отображается на странице, в противном случае - игнорируется.

Пример условного комментария для вывода нашей картинки

<![if gte IE 7]>
   <img src="image/penguins_light.png" alt="Пример использования условного комментария" />
<![endif]>

В первом блоке проверок вернёт "true" для Internet Explorer младше версии 7 (1-ое условие) и больше или равно версии 5.5 (2-ое условие)
Во втором вернёт "true" для Internet Explorer больше или равно версии 7 и для всех остальных браузеров. Да-да, и для всех остальных браузеров. Обратите внимание, что в открывающей части комментария во втором блоке после "<!" нет "--", а в закрывающей части нет "--" перед ">", поэтому условный комментарий не воспринимается "непонимающими" браузерами как комментарий. Они видят незнакомые теги <![if gte IE 7]> и <![endif]> и игнорируют сами теги, но не их содержимое.

Условное выражение есть комбинация операторов, значений и свойств, представленных в таблице ниже.

Элемент	Синтаксис	Пояснения
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", если первый аргумент больше или равен второму

Формат строки версии браузера
Номер версии браузера можно определить как целое число в случае, когда указывается только главный номер. В ситуациях, где выражение должно проверять и дополнительный номер версии браузера, номер версии может быть определен как целое число, за которым следует десятичная точка, и затем до четырех последовательных цифр.

5 - корректный формат
5.0002 - корректный формат
5.0.0.0.2 - некорректный формат

Важно иметь в виду, что в номере версии сравнивается отдельно каждая цифра, причем сравнивается то количество цифр, которое присутствует в номере версии условного выражения.
Поэтому условное выражение <!--[if IE 5]]> соответствует всем версиям IE5, ибо сравнивается только основной номер версии
а выражение <!--[if IE 5.0]]> соответствует и версии 5.0, и версии 5.01, и версии 5.0002 и т.д. ибо сравнивается основной номер и одна цифра после точки.

Условные комментарии можно свободно комбинировать с другими техниками определения браузера.
Внутри блока условного комментария может находиться как простой текст, так и html-код и css-стиль и JavaSript`ы.

Примеры условных выражений:
IE с основным номером версии 5 (т.е. 5.0, 5.01, 5.5 ...)

IE с основным номером версии 5 и первой цифрой добавочного номера версии 0 (т.е. 5.0, 5.01 ..., но не 5.5)

Любой IE кроме 5 версии

Любой IE версии больше чем 5.01, не включая 5.01

Любой IE версии больше или равно версии 5.5

Любой IE версии меньше 6