Условные комментарии в CSS
February 12th, 2007 by Yuriy DrozdovАвтор: PPK
URL оригинала на английском языке: http://www.quirksmode.org/css/condcom.html
Условные комментарии работают только в Explorer под Windows, и они отлично подходят для написания специальных инструкций адресованных Explorer под Windows. Эти инструкции поддерживаются начиная с версии Internet Explorer 5 и выше и даже существует возможность давать различные инструкции разным версиям Explorer 5.0, 5.5, 6.0.
Условные комментарии выглядят так:
-
<!--[if IE 6]>Специальные инструкции для IE 6 здесь. <![endif]-->
- Их основная структура такая же как и в HTML комментариях (<!–– ––>). Поэтому другие браузеры будут считать условные комментарии простыми комментариями и будут их полностью игнорировать.
- Explorer Windows, однако, был запрограммирован распознавать специальный синтаксис <!––[if IE]>, решать условие if и парсить содержимое условного комментария так, как если бы это было содержание нормальной страницы.
- Т.к. условные комментарии используют синтаксис HTML комментариев, то они могут быть включены только в HTML страницу и не могут быть включены в CSS файл. Я предпочитаю вставлять специальные стили в CSS файл, но в данном случае это невозможно. Вы можете вставить <link> тэг в условный комментарий и подключить файл с описанием CSS стилей.
Пример:
Ниже я добавил много условных комментариев, которые выводят разные сообщения в зависимости от версии Internet Explorer.
Замечание: однако, если вы используете несколько версий Internet Explorer, то условные комментарии будут воспринимать их всех как самую последнюю версию которая у вас установлена.
Тест
Ниже написаны несколько условных комментариев, которые показывают версию Internet Explorer, которую вы используете. Если вы не видите ниже никак сообщений, значит вы не используете Internet Explorer.
Код
Синтаксис, который использовался:
-
<!--[if IE]>
-
Если верить условным комментариям это - Internet Explorer<br />
-
<![endif]-->
-
<!--[if IE 5]>
-
Если верить условным комментариям это - Internet Explorer 5<br />
-
<![endif]-->
-
<!--[if IE 5.0]>
-
Если верить условным комментариям это - Internet Explorer 5.0<br />
-
<![endif]-->
-
<!--[if IE 5.5]>
-
Если верить условным комментариям это - Internet Explorer 5.5<br />
-
<![endif]-->
-
<!--[if IE 6]>
-
Если верить условным комментариям это - Internet Explorer 6<br />
-
<![endif]-->
-
<!--[if IE 7]>
-
Если верить условным комментариям это - Internet Explorer 7<br />
-
<![endif]-->
-
<!--[if gte IE 5]>
-
Если верить условным комментариям это - Internet Explorer 5 и выше<br />
-
<![endif]-->
-
<!--[if lt IE 6]>
-
Если верить условным комментариям это - Internet Explorer меньше чем 6<br />
-
<![endif]-->
-
<!--[if lte IE 5.5]>
-
Если верить условным комментариям это - Internet Explorer меньше или эквивалентен 5.5<br />
-
<![endif]-->
-
<!--[if gt IE 6]>
-
Если верить условным комментариям это - Internet Explorer больше чем 6<br />
-
<![endif]-->
-
</p>
Замечание по синтаксису:
- gt: больше чем
- lte: меньше или эквивалентно
CSS hack?
Условные комментарии - это CSS hack? Собственно говоря,- да, они служат для указания специальных инструкций некоторым браузерам. Однако они не полагаются на один баг браузера, чтобы решить другой его баг, как это делают настоящие CSS hack'и. Кроме того они могут быть использованы не только для CSS hack(но это редко встречается)
Так как условные комментарии основаны не на CSS hack, а на хорошо продуманной особенности, то я верю, что они безопасны для использования. Конечно, другие браузеры тоже могут применить условные комментарии (пока этого никто не сделал), но они не будут реагировать на специальный синтаксис <!--[if IE]>
Я использую условные комментарии редко. Сначала я смотрю могу ли я решить проблему в Internet Explorer с помощью только CSS. Если нет, то я не раздумывая использую условные комментарии.
Comment тэг
Читатель сказал мне, что Explorer (Windows и Mac) поддерживает (нестандартный) тэг <comment>.
<p>This is <comment>not</comment> Internet Explorer.</p>
This is not Internet Explorer.
Этот тэг может пригодиться если вы хотите использовать стили для всех браузеров кроме IE. Но к сожалению оба Explorer Windows и Mac поддерживают этот тег и если вы хотите разграничить содержимое для каждого из них, вы этим тэгом не сможете воспользоваться.
[...] Условные комментарии в CSS[...]
а я как раз использую для того чтобы в комментарии заключить подключение отдельного цсс файла с хаками под эксплорер и не травмировать психику нормальных браузеров (например чтобы дебаг файрфокса был девственно чистым, как это и пологается)
[...] Используюя условные комментарии задать отрицательный маржин. <!–[if lte IE 6]> <style type=”text/css”> #right p {margin-left:-3px;} </style> <![endif]–> [...]
Спасибо! Вот сейчас понадобилось — нашёл решение у тебя
Нема за що, друже!
А как вы решаете проблему min-width в IE6. У меня не получилось ее решить с помощью width.expression(
Можете почитать здесь:
http://blog.sribna.com/css-min-height-byistryiy-hak.htm
[...] Для того, чтобы вертикальное выравнивание коснулось и браузера Internet Explorer немного изменим HTML код и CSS, а также воспользуемся условными комментариями. CSS код представлен ниже: [...]
[...] По материалам Условные комментарии в CSS и Использование условных комментариев в IE Прочитал что-то новое и полезное? Тогда подпишись [...]
Если уж говорить о CSS багах, то неплохо бы упомянуть # перед параметром CSS, например { #padding: 10px } будет работать только в IE, а –moz-…. (тут я точно не вспомню) будет работать только в мозиллах.
Например что mozilla не любит { filter: alpha(opacity=50); } и ругается об этом, а для IE старых версий по-другому никак. то же самое с { cursor: pointer } для мозиллы и { cursor: hand } для IE.
Кстати, Firefox при встрече с <!–[if IE]> тоже warning’и всякие пишет, что есть не очень приятно.–>
Спасибо за замечания.
Если говорить о CSS хаках, то они полагаются на один баг браузера, чтобы решить другой его баг. Условные комментарии этого не делают. На очень большой список фильтров для разных браузеров я давал тут http://blog.sribna.com/css-filtryi.htm ссылку.
Что касается других особенностей, то мир CSS настолько большой, что в одной статье автор не мог все охватить.
На счет warning’и в FF, вот Вам пример http://sribna.com - там тоже используются условные комментарии и никаких предупреждений FF не выдает, как впрочем, и другие браузеры.
Ой. А я не знал что можно использовать не только в стилях, а и во всей странице. Возможно и warning в моих стилях возникают, что я пихал прямо в stylesheet, когда надо было отдельный , который фиксит глюк IE.
Было прямо в stylesheet
TR.rown TD {
cursor: pointer;
cursor: hand;
}
По уму надо так:
TR.rown TD {cursor: pointer; }
TR.rown TD {cursor: hand; }
Век живи - век учись
Спасибо за открытие глаз, однозначно.
Раскройте секрет, пожалуйста, для чего у вас для элемента #footer стоит padding:0pt 0pt 0pt 1px;
В статье есть такие строки:
Условные комментарии можно писать только в html файле. Обычно специальные стили для IE пишут в отдельный css файл, а потом с помощью условных комментариев подключают.
я хотел попробовать эта FF например
Если верить условным комментариям это - Internet Explorer
можно?
ничего не понял
Это можно было пробовать где угодно. Комментарий к этой статье - самое последнее место где я стал бы это делать