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 отобразят тёмно зелёный цвет на белом фоне;
- для всех остальных типов носителей цвет текста будет серым на белом фоне;
Разбиение может быть удобным для кого то, но лично для меня это уменьшает избыточность и риск того, что я пропущу какие либо параметры для каких либо типов при следующем обновлении своего файла стилей.
добавление множества @import приводит к медленной непараллельной загрузке файлов стилей, поэтому множество http-запросов не единственный минус.
Это верно