Рекомендации по увеличению производительности CSS

Версия для печати

Большинство людей используют несколько файлов для создания CSS под разные типы устройств (media-типы), такие как экраны мониторов, принтеры или КПК. В этом случае файлы присоединяются к веб-странице либо с помощью элементов link с атрибутом media, либо посредством правила @import с указанием одного или более медиа-типов.

Нет ничего плохого в разделении ваших CSS на несколько файлов и присоединением их этим способом (на момент написания статьи именно таким образом это реализуется на нашем сайте), но при этом существует два недостатка: это приводит к большему числу HTTP-запросов от браузера к серверу и необходимости поддержки в актуальном состоянии нескольких CSS файлов одновременно.

Некоторые люди любят распределять свои CSS по нескольким файлам, и не только по причине различных media-типов, а ещё и по принадлежности разделам сайта или предназначению содержимого соответствующих таблиц стилей (позиционирование, цвета, типографика).

К счастью для меня и тех, кто поступает так же как я, существует способ объединения всех CSS в один файл.

Используйте правило @media

Правило @media позволит вам сгруппировать в одном файле ваши CSS правила по типу устройств, для которых они предназначены. Любые правила, находящиеся вне правил @media применятся ко всем типам устройств, к которым применен сам файл CSS.

Ниже расположен пример таблицы стилей, в которой использованы правила @media:

body {
  color:#444;
  background:#fff;
}

@media screen, projection {
  body { background-image:url(background.png); }
}

@media print {
  body { color:#000; }
}

@media handheld {
  body { color:#0f6517; }
}

Исходя из того, что расположенные выше правила находятся в CSS-файле, который применен ко всем типам устройств, действуют следующие положения:

• Для медиа-типов screen и projection текст будет тёмно-серым, а фон будет состоять из повторяющегося изображения.
• Для медиа-типа print текст будет чёрным, а фон белым.
• Агенты пользователя, которые используют медиа-тип handheld, применят тёмно-зелёный цвет к тексту, а фон сделают белым.
• Для всех остальных медиа-типов текст будет тёмно-серым, а фон белым.

Вы можете использовать этот способ или нет, но я обнаружил, что он приводит к уменьшению избыточности и снижает риск того, что один или несколько медиа-типов будут пропущены мной при очередном редактировании CSS.