css-html.org

Перевод статьи «Hack-free CSS» for IE с сайта virtuelvis.com.
Перевел Cake_Seller.

Резюме: в статье описываются условные комментарии для Internet Explorer’а, их синтаксис и примеры применения.

Далее курсивом примечания переводчика.

Джефри Зельдман (Jeffrey Zeldman) пишет, что при проверке CSS-валидатором код, который содержит так называемый "трюк с боксовой моделью" (Box Model Hack)(переводы статьи про трюк с боксовой моделью можно найти тут и тут) идентифицируется как невалидный.

Я не собираюсь вдаваться в дебаты о том кто прав, валидатор или Зельдман. Вместо этого я собираюсь предложить более подходящее решение, которое используется при подключении таблиц стилей, когда нужно чтобы эти стили применялись только в MS Internet Explorer или в отдельных его версиях. Это решение может снизить фактор IE (IE Factor).

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

IE давно поддерживает так называемые условные комментарии (Conditional Comments) которые позволяют делать контент видимым только для IE. Использовать условные комментарии, в отличие от других CSS-хаков, довольно просто:

1. Создайте общую таблицу стилей для всех браузеров, без каких-либо хаков, чтобы потом продолжить работу по исправлению ошибок при отображении страницы в IE.
2. Создайте общую таблицу стилей с исправленными ошибками для всех версий IE.
3. Создайте таблицы стилей с исправлениями ошибок отдельно для каждой версии IE.
4. Подключите таблицы из пунктов 2 и 3, используя условные комментарии.

Синтаксис условных комментариев

Условные комментарии - это просто специальным образом сформированные HTML комментарии, которые понимают только определенные версии Internet Explorer’a для Windows. Для примера вы можете использовать условные комментарии для исправления бага прозрачности PNG в IE.

Приведенный условный комментарий будет понят браузерами IE5, IE5.5 и IE6 (а также IE7):

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->

Применение относительно IE5

Если вам необходимо применить условный комментарий только для IE5, то необходимо просто указать версию:

<!--[if IE 5.0]>
  <link rel="stylesheet" type="text/css" href="ie-5.0.css" />
<![endif]-->

Применение относительно IE5.5

Если необходимо применить относительно IE5.5, то это будет выглядеть так:

<!--[if IE 5.5]>
  <link rel="stylesheet" type="text/css" href="ie-5.5.css" />
<![endif]-->

Применение относительно IE6

То же самое для IE6:

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

IE5 и IE5.5 - для исправления бага боксовой модели

Если вам нужно, используя условные комментарии, исправить баг с боксовой моделью в браузерах IE5 и IE5.5, то вы можете использовать один из приведенных примеров.

Первый пример подключит таблицу стилей к любой версии Internet Explorer’а первая цифра которой 5:

<!--[if IE 5]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

В качестве альтернативы, вы можете указать, чтобы таблицы стилей подключались к любой версии браузера, номер которой меньше 6-ти:

<!--[if IE lt 6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

Порядок использования

Если вы не хотите, чтобы общие таблицы стилей доминировали над таблицами, которые вы создавали специально под IE, то нужно подключать сначала общие таблицы, а уже потом таблицы для IE. На примере это выглядит так:

<link rel="stylesheet" type="text/css" href="common.css" />

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

<!--[if IE lt  6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

Другие достоинства этого метода

Используя условные комментарии, вы также получаете способ для более достоверного определения версии браузера.

• Браузеры, которые выдают себя за Internet Explorer, но на самом деле ими не являются, не будут использовать таблицы стилей предназначенные для IE.
• С помощью этого метода вы можете составить точную статистику относительно того, какую версию IE используют посетители, без ошибок, вызванных программами и браузерами выдающими себя за IE.

Валидность

Возможно, одной из самых приятных частей этой техники является то, что ваши таблицы стилей и ваши тщательно оформленные (X)HTML документы сохранят полное соответствие спецификации.

Дополнение!

Ссылка на оригинал статьи с дополнением

Существует одно предупреждение, о котором стоит упомянуть.

Если вы используете несколько версий Internet Explorer’а на одной машине, то все эти версии будут выдавать себя за самую новую из установленных версий. Это означает, что если вас установлен IE6, но вы просматриваете страницу с помощью IE5, выполниться этот условный комментарий:

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

А этот условный комментарий не выполниться:

<!--[if IE 5.0]>
  <link rel="stylesheet" type="text/css" href="ie-5.0.css" />
<![endif]-->