Условные комментарии Conditional Comments используют для загрузки разных файлов CSS-стилей для разных браузеров и их версий (особенно для IE). Это связано с особенностями отображения html-страниц и css-стилей разными браузерами. Существует много уловок и грязных css-хаков для решения проблем кроссбраузерности, но они нарушают стандарты W3C.
Условные комментарии соответствуют всем стандартам поэтому я рекомендую их использовать для решения проблем с самым капризным браузером Internet Explorer.
Форма записи условных комментариев
/* Если браузер IE версией младше или равной 6-ой */
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/css/ie6.css"><![endif]-->

Запись начинается условием <!--[if lte IE 6]> (в данном случае для Internet Explorer до 6 версии включительно), далее подключаем файл стилей и закрываем наше условие <![endif]-->

Стоит помнить о том, что каждый новый файл стилей, в случае совпадения имен классов, будет перекрывать предыдущий класс стилей.

В условные комментарии можно добавлять любую необходимую информацию, например, если мы хотим подсказать пользователю о том, что ему пора обновить браузер или сделать предложение для пользователей определенного браузера: скачать плагин или добавить наш сайт в закладки ;)

Разберем возможные варианты условий:

/*Загрузим файл только в IE*/
<!--[if IE]><link rel="stylesheet" type="text/css" href="/css/ie.css"><![endif]-->

/*Загрузим файл в современные браузеры (не IE)*/ 
<!--[if !IE]><link rel="stylesheet" type="text/css" href="/css/cool-styles.css"><![endif]--> 

Используйте по аналогии следующие условия

<!--[if lt IE 8]> /* Если браузер IE версией строго младше 8-ой */
<!--[if gt IE 6]> /* Если браузер IE версией строго старше 6-ой */
<!--[if lte IE 8]> /* Если браузер IE версией младше или равной 8-ой */
<!--[if gte IE 6]> /* Если браузер IE версией старше или равной 6-ой */

Определение версии IE с помощью условных комментариев

С помощь условных комментариев можно стопроцентно определить версию пользовательского браузера Internet Explorer. Известно, что определение версии IE через JavaScript бывает ошибочным. Например, когда на Windows XP установлен IE 8-ой версии - метод $.browser.version() всеми любимого JQuery определяет его как IE 6-ой версии, что может приводить к ошибкам.

Как определить версию IE без ошибок?
Достаточно просто:

<!--[if lte IE 6]> <div id="versionIE" style="display:none">IE6-</div> <![endif]-->
<!--[if IE 7]> <div id="versionIE" style="display:none">IE7</div> <![endif]-->
<!--[if gte IE 8]> <div id="versionIE" style="display:none">IE8+</div> <![endif]-->
<!--[if !IE]>ALL RIGHT<![endif]-->

Мы создали скрытый блок с различным содержимым, в зависимости от версии браузера IE.
Теперь узнаем через javascript какой у нас браузер

/*С применением JQuery*/
$(document).ready(function(){
/*Запишем версию браузера и используем её в условиях*/
var versIE = $('div#versionIE').text(); 
if(versIE == 'IE6-'){
/* Ваш код */
} else if(versIE == 'IE7'){
/* Ваш код */
} else if (versIE == 'IE8+'){
/* ... */
} else {
/* ... */
}
});

Вот так легко можно загрузить дополнительный файл стилей для IE и безошибочно определить его версию используя javascript.

Вернуться в раздел: Блог