Статьи

Как использовать условные комментарии для лучшего CSS

Я новый участник блогов SitePoint и в основном буду рассказывать о внешней разработке и технологиях семантической паутины. Я с нетерпением жду участия в сообществе SitePoint!

Иногда это самые простые вещи, которые остаются незамеченными дольше всего. Например, сегодня вечером, когда я начал читать WSG , я увидел ссылку на условные имена классов Пола Хаммонда для Internet Explorer . В предложении он показывает, как использование условных комментариев для настройки имени <body>class

Код Пола витрины выглядит так:

[T] его HTML:

 
<!--[if IE ]>
  <body class="ie">
<![endif]-->
<!--[if !IE]>-->
  <body>
<!--<![endif]-->

с CSS, который выглядит примерно так:

 
div.foo {
    color: inherit;
}
.ie div.foo {
    color: #ff8000;
}

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

  • Избегание необходимости в дополнительной таблице стилей только для IE, повышение производительности сайта за счет уменьшения накладных расходов HTTP (как упоминает Пол в своем посте).
  • Исключение (традиционных) специфичных для IE хаков CSS из таблиц стилей полностью. Этого можно достичь, используя более конкретные условные комментарии с более широким набором имен классов. Например, следующий код может быть использован для конкретной идентификации IE7 в HTML:
     <!--[if IE ]>
      <body class="ie">
    <![endif]-->
    <!--[if IE 7]>
      <body class="ie ie7">
    <![endif]-->
    <!--[if !IE]>-->
      <body>
    <!--<![endif]-->
    

    в этом случае CSS-селекторы с префиксом .ie.ie7

  • Другие технологии (помимо CSS), которые взаимодействуют с документом HTML, будут знать об их среде, специфичной для IE. На ум приходит JavaScript. Да, да, я знаю, что перехват в браузере намного хуже, чем обнаружение объектов на основе возможностей, но факт остается фактом: иногда IE не дает вам «всей правды и ничего, кроме правды…».

Безусловно, есть ряд «философских» или «стилистических» моментов, которые следует сделать с помощью такой техники, например, что разделение хаков в их собственных файлах полезно для удобства сопровождения. Мое личное мнение о таких вещах состоит в том, что взлом должен быть сделан как можно более очевидным, чтобы вы исправили его при первой же возможности, а не забыли об этом. Вот почему я долгое время предпочитал помещать * html

Я почти стесняюсь признать, что раньше не сталкивался с этой техникой. Конечно, один этот факт говорит мне о том, что вполне возможно успешно реализовать высококачественные веб-дизайны без этой техники. Тем не менее, понятие условных имен классов для IE, безусловно, поднимает некоторые интересные вопросы относительно того, как можно упростить код только для IE, и я думаю, что любой метод, улучшающий понимание кода, стоит хотя бы второго взгляда.