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

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

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

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

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

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

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

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

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

01 body {
02   color:#444;
03   background:#fff;
04 }
05
06 @media screen, projection {
07   body { background-image:url(background.png); }
08 }
09
10 @media print {
11   body { color:#000; }
12 }
13
14 @media handheld {
15   body { color:#0f6517; }
16 }

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

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

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

Источник:   w3pro.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи