вход

CSS эффективность: Используйте один файл стилей для нескольких носителей

С увеличением числа устройств, отображающих информацию, в CSS было введено такое понятие как тип носителя. Большинство разработчиков используют несколько файлов для связки CSS, предназначенных для разных типов носителей, таких как screen, print, или handheld. Эти фалы затем связывают либо через элементы ссылок с media атрибутом или через объявление @import с одним или более определением типа носителя.

Напомню типы носителей:

  • all - все типы. Значение по умолчанию.
  • aural - речевые синтезаторы для воспроизведения текста вслух.
  • braille - устройства Брайля для слепых людей.
  • handheld - наладонные компьютеры.
  • print - печатающие устройства.
  • projection - проектор.
  • screen - экран монитора.
  • tv - телевизор.

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

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

  • это увеличивает количество запросов HTTP от браузера к серверу;
  • усложняет установку нескольких CSS файлов;

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

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

ат-правило @media

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

Посмотрите на пример файла стилей, который использует правила @media :

body {
    color:#444;
    background-color:#fff;
}
@media screen, projection {
    body { background-image:url(background.png); }
}
@media print {
    body { color:#000; }
}
@media handheld {
    body { color:#0f6517; }
}

Предполагая, что все правила в этом примере применяются ко всем типам носителей, следующее будет применено:

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

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


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
2 комментария

Статья → CSS эффективность: Используйте один файл стилей для нескольких носителей

  1. добавление множества @import приводит к медленной непараллельной загрузке файлов стилей, поэтому множество http-запросов не единственный минус.

  2. Николай:

    Это верно

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

Статья → CSS эффективность: Используйте один файл стилей для нескольких носителей

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.