Условные комментарии включают в себя собственное расширение Microsoft для Internet Explorer, которое предоставляет механизм для нацеливания на каждую из версий IE либо по отдельности, либо по группе. Это расширение было введено в IE5, но удалено в IE10, поэтому его можно использовать только в документах, отображаемых в браузерах от IE5 до IE9 включительно на платформе Windows.
Условные комментарии используют специальный синтаксис — HTML-разметку, обернутую в условный оператор — и помещаются в HTML-комментарий. Если утверждение оценивается как true , вложенный HTML-код раскрывается в HTML-документе. Если утверждение оценивается как ложное, вложенный HTML-код остается скрытым. Поскольку условные комментарии размещаются вместе с комментариями HTML, вложенный HTML-код также остается скрытым от всех браузеров, которые не поддерживают условные комментарии.
Условные комментарии могут быть размещены в любой точке документа, в которой могут находиться обычные комментарии. Таким образом, вы не можете разместить их во внешних файлах CSS или между
теги. Однако их можно использовать для ссылки на определенные файлы или для предоставления определенного содержимого HTML (или CSS) для версий IE, указанных в условном выражении. Обсуждение разметки HTML в справочнике CSS может показаться странным, но условные комментарии - это рекомендуемый Microsoft механизм доставки целевого CSS в браузер.
Основы условных комментариев
Основная форма условных комментариев выглядит следующим образом:
<!--[if IE ]> <link href="iecss.css" rel="stylesheet" type="text/css"> <![endif]-->
Условный оператор содержится в квадратных скобках и начинается с выражения, за которым следует выражение. Содержимое HTML-кода ограничено открытием заявление.
В приведенном выше примере вложенный HTML-контент тег - будет показан всем браузерам IE, которые поддерживают условные комментарии. Он ссылается на таблицу стилей, которую увидит только IE. Все браузеры, кроме IE версии 5 и выше, увидят приведенный выше код в виде одного простого HTML-комментария. Если мы уберем скобки и текст для ясности, мы в основном останемся с обычной структурой комментариев следующим образом:
<!-- <link href="iecss.css" rel="stylesheet" type="text/css"> -->
Операторы условных комментариев
Как мы уже упоминали, мы можем использовать условные комментарии для применения правил CSS к конкретным версиям браузера IE с помощью операторов сравнения, которые позволяют точно ориентировать каждую версию IE. Мы можем написать сложные выражения, используя один или несколько операторов, перечисленных в таблице 1.
Таблица 1. Операторы условных комментариев
| оператор | Описание |
|---|---|
IE |
представляет Internet Explorer; если числовое значение также указан, он представляет вектор версии |
lt |
меньше чем оператор |
lte |
меньше или равно |
gt |
больше чем |
gte |
больше или равно |
! |
оператор НЕ |
() |
оператор подвыражения |
& |
оператор AND |
| |
оператор ИЛИ |
true |
оценивает как истинное |
false |
оценивается как ложный |
Так, например, вы бы использовали следующую разметку для целевой версии IE 7:
<!--[if IE 7 ]> <p>Only IE 7 will see this</p> <![endif]-->
В качестве альтернативы, если вы хотите настроить таргетинг на все браузеры IE, кроме IE7 и выше (то есть версий до IE7), вы можете использовать этот метод:
<!--[if lt IE 7 ]> <p>Only less than IE 7 will see this</p> <![endif]-->
Если бы вы хотели включить IE7 в этот список, вы бы использовали оператор lte, который выбирает все номера версий, которые меньше или равны 7.
Операторы gt (больше чем) и gte (больше или равно) работают аналогично. Посмотрите на этот пример:
<!--[if gte IE 6 ]> <p>Only IE 6 and greater will see this</p> <![endif]-->
Этот условный комментарий выберет все браузеры IE с номерами версий больше или равными 6, которые, очевидно, будут включать IE7 и даже IE8 - если он когда-либо появится!
Следует отметить, что когда вы используете одну цифру для представления версии IE, на которую вы хотите настроить таргетинг (например, [если IE 7]), эта директива будет применяться ко всем версиям этого браузера, включая версии с векторами версий. Например, если вы использовали условный комментарий ниже, вы бы включили все версии IE5, включая IE5.5:
<!--[if IE 5]> <p>This covers all versions of IE5 including IE5.5</p> <![endif]-->
Вы также можете использовать оператор «not»,!, Чтобы исключить одну из версий браузера IE. Чтобы исключить IE6, но не IE7 или IE5 (если вы когда-либо хотели это сделать), вы должны использовать это выражение:
<!--[if !IE 6]> <p>IE7 or IE5 only</p> <![endif]-->
Условно-скрытые комментарии внизу
Более сложные выражения могут быть созданы с использованием одного или нескольких доступных операторов. Например, следующий условный комментарий нацелен на IE6 и IE7 с использованием подвыражений и оператора OR:
<!--[if (IE 6)|(IE 7)]> <p>IE6 or IE7 only </p> <![endif]-->
Microsoft называет этот стиль условных комментариев скрытым , поскольку браузеры, не поддерживающие условные комментарии (включая IE4 и более ранние версии), будут интерпретировать код условного комментария как стандартный HTML-комментарий и полностью его игнорируют. И да, Microsoft описывает все браузеры, кроме IE5 и более поздних, как браузеры «нижнего уровня»!
Однако существует еще одна версия условных комментариев, которая позволит использовать эти браузеры нижнего уровня; они называются обусловленными комментариями нижнего уровня .
Условные комментарии нижнего уровня
В условных комментариях нижнего уровня содержимое HTML внутри условных операторов показывается браузерам, которые не поддерживают условные комментарии, поскольку условные операторы - и только условные операторы - игнорируются. Если оператор оценивается как истинный (в поддерживающем браузере), содержимое внутри условных операторов также раскрывается.
К сожалению, синтаксис этих условных комментариев нижнего уровня часто приводит к ошибкам проверки HTML. Вот предложенный Microsoft синтаксис:
<![if !IE]> <p>This is shown in downlevel browsers, but is invalid HTML!</p> <![endif]>
Однако доступна лучшая, правильная версия синтаксиса . Было обнаружено, что если вы слегка измените синтаксис, эффект понижения может быть сохранен, а HTML-код будет проверен:
<!--[if !IE]>--> <p>This is shown in downlevel browsers.</p> <!--<![endif]-->
Здесь мы просто заключаем условные выражения в комментарии HTML. Следует отметить, что это использование не соответствует спецификациям Microsoft для этих комментариев, но в настоящее время оно работает во всех версиях IE5 и более поздних (включая IE7) и, что более важно, также будет проверять - в отличие от версии Microsoft.
Тем не менее, существует проблема с этим подходом, если вы хотите использовать браузеры более низкого уровня, а также поддерживаемую версию браузера Microsoft. Взгляните на этот пример, который пытается нацелиться на браузеры нижнего уровня и IE7 или более позднюю версию:
<!--[if gte IE 7]>--> <p>This is shown in downlevel browsers and IE7 or later.</p> <!--<![endif]-->
В этом примере используется допустимый HTML, но браузеры IE7 и более поздних версий также покажут -> после открывающей условной инструкции. Исправление, предлагаемое Microsoft, заключается в добавлении дополнительного <! сразу после вступительного условного комментария:
<!--[if gte IE 7]><!--> <p>This is shown in downlevel browsers and IE7 or later.</p> <!--<![endif]-->
Условные комментарии на практике
Если вы хотите использовать условные комментарии в своем подходе к доставке целевого CSS, вот что вы можете сделать. Во-первых, сделайте ссылку на вашу стандартную таблицу стилей обычным способом (через тег, например). Затем используйте условные комментарии для ссылки на одну или несколько других таблиц стилей, которые содержат CSS, ориентированный на IE. Таблицы стилей только для IE должны содержать только необходимые исправления CSS. Они не должны быть дублированием вашей стандартной таблицы стилей - это будет пустой тратой пропускной способности и в любом случае будет полностью избыточным. Вот пример такого подхода:
<link href="main.css" rel="stylesheet" type="text/css"> <!--[if IE 7]> <link href="ie7.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if IE 5]> <link href="ie5.css" rel="stylesheet" type="text/css"> <![endif]-->
main.css - это стандартная таблица стилей, тогда как ie7.css, ie6.css и ie5.css содержат CSS для определенных версий IE. Возможно, вам не нужно указывать конкретную версию, как в этом примере. Помните, что каскад будет действовать, и что правила в файлах CSS, ссылки на которые находятся ниже в исходном коде страницы, будут отменять любые ранее определенные правила CSS.
Нравится ли вам условные комментарии или нет, они позволяют легко и безопасно ориентироваться на версии IE, и они так же ориентированы на будущее, как и любой из этих приемов. Комментарии также обеспечивают логическую структуру вашего подхода к управлению CSS и отделяют целевой CSS от стандартного CSS. Когда-нибудь в будущем, когда целевой CSS больше не требуется, код, который уже отделен, может быть легко удален.