Conditional Comments, или условные комментарии в IE

В статье про закруглённые углы мы слегка затронули тему условных комментариев для написания костылей к IE.
Сейчас мы постараемся подробно разобрать, что же такое условные комментарии и как с их помощью можно сильно упростить себе жизнь.

Использование

Код условного комментария в IE задаётся следующим способом:

<!--[if IE]> ваш код <![endif]-->

Другие браузеры видят в нём простой комментарий, и не обрабатывают его.

А теперь о способах проверки IE:

1. Это и в самом деле IE?

<!--[if IE]>Этот текст будет виден в любой версии IE<![endif]-->

2. Отдельная версия

<!--[if IE 6]>Этот текст будет виден только в IE 6<![endif]-->
<!--[if IE 5]>А этот - только в IE 5 (неужели им кто-то ещё пользуется?)<![endif]-->
<!--[if IE 7]>Этот - только в IE 7<![endif]-->

3. Больше – меньше

gt - больше, lt – меньше чем указанная версия.

<!--[if lt IE 8]>Пожалуйста, обновите свой браузер до 8 версии<![endif]--> <!-- всё, что ниже IE 8 -->
<!--[if gt IE 6]>Этот текст увидят только обладатели 7 и 8 версии IE<![endif]--> 

gte - больше или равно, lte – меньше или равно указанной версии.

<!--[if lte IE 7]>Этот пример будет виден в IE 7 версии или более ранней<![endif]--> 
<!--[if gte IE 6]>Этот пример будет виден в IE 6 версии или более поздней<![endif]--> 

4. И, Или, Не

& - выбрать диапазон

<!--[if (gte IE 5) & (lte IE 7)]>Пример будет виден только в IE 5,6,7<![endif]-->

| - задать несколько соответствий

<!--[if (IE 5) | (IE 7)]>Пример будет виден только в IE 5 и 7<![endif]-->

! - выбрать все браузеры, кроме определённого

<!--[if !(IE 6)]>IE 6 - фуфло<![endif]--> <!-- обладатели IE 6 этого не увидят. а жаль. -->

5. Простой способ обнаружить IE 8 под Windows 7

Лично я не вижу в этом практической ценности, но вдруг кому-то пригодится…

<!--[if WindowsEdition]>Этот код увидят только те, кто использует IE 8 под Windows 7<![endif]--> 

А теперь немного практики:
Следующий текст будет на голубом фоне в IE 5, на красном – в IE 6 и 7, на зелёном – в IE 8 и на желтом – во всех остальных браузерах.

HTML

<style>
.block {
	background-color:#F2E973;
}
</style>
<!--[if IE 5]>
	<style>
	.block {
		background-color:#70D0F5;
	}
	</style>
<![endif]-->
<!--[if (IE 6) | (IE 7)]>
	<style>
	.block {
		background-color:#F47171;
	}
	</style>
<![endif]-->
<!--[if IE 8]>
	<style>
	.block {
		background-color:#AFEE6A;
	}
	</style>
<![endif]-->
<div class="block"></div>

---

Категории

• CMS
• CSS
• jQuery
• MySQL
• PHP
• Вёрстка

Контакты