Эффективная работа с CSS: используем единый файл стилей для различных медиа-типов

Использование стилей для различных медиа-типов (screen, print или handheld) предполагает подключение нескольких css-файлов. Подключаются они при помощи элементов link с атрибутом media или через операторы @import с указанием одного или нескольких медиа-типов.

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

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

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

At-правило @media

Правило @media позволяет вам группировать различные media-типы в одном файле. Все правила вне правил @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; }
}

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

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

Данный способ, возможно, подойдет не каждому, но лично я считаю что он позволяет избежать избыточности, а также снижает риск проявления ситуаций, при которых можно "просмотреть" один или несколько медиа-типов при внесении изменений в файл стилей.

Оригинал статьи Роджера Йоханссона CSS efficiency tip: use a single stylesheet file for multiple media 

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.