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

Медиа-запросы — один из лучших способов создания веб-страниц, удобных для мобильной версии или для печати — просто назначайте разные таблицы стилей для разных версий.

Некоторые CSS-свойства предназначены только для определенных носителей. Например, свойство page-break-after применяется только к печатному носителю. Однако большинство свойств могут совместно использоваться разными типами медиа, но могут требовать разных значений для этого свойства. Например, свойство font-size может использоваться как для экрана, так и для печатных носителей, но возможно с разными значениями.

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

Обычно используются три метода для указания медиа-зависимостей для таблиц стилей:

Способ 1: Использование @media

Правило @media используется для определения разных стилевых правил для разных типов медиа в одной таблице стилей. За ним обычно следует разделенный запятыми список типов медиа и блок CSS-объявлений, содержащий правила стилей для целевого медиа.

Объявленные стили в приведенном ниже примере говорит браузеру отображать содержимое <body> шрифтом Arial 14px на экране, но в случае печати оно будет иметь шрифт Times 12pt. Однако значение свойства line-height установлено 1.2 в обоих случаях:

@media screen {
    body {
        color: #32cd32;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }
}
@media print {
    body {
        color: #ff6347;
        font-family: Times, serif;
        font-size: 12pt;
    }
}
@media screen, print {
    body {
        line-height: 1.2;
    }
}

Правила стиля вне правил @media применяются ко всем типам мультимедиа, к которым применяется таблица стилей. Правила @media недействительны в CSS2.1.

Способ 2: Использование @import

Правило @import — это еще один способ задания информации о стиле для определенного целевого носителя. Просто укажите разделенные запятыми типы носителей после URL-адреса импортированных таблиц стилей.

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
    background: #f5f5f5;
    line-height: 1.2;
}

Тип печатного носителя print в операторе @import указывает браузеру загружать внешнюю таблицу стилей (print.css) и использовать ее стили только для печатного носителя.

Все операторы @import должны появляться в начале таблицы стилей, перед любыми объявлениями. Любое правило, указанное в самой таблице стилей, переопределяет конфликтующие правила в импортированных таблицах.

Атрибут media в элементе <link> используется для указания целевого носителя для внешней таблицы стилей в HTML-документе.

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">

В этом примере атрибут media указывает браузеру загрузить внешнюю таблицу стилей screen.css и использовать ее стили только для экрана, а print.css — для печати.

Вы также можете указать несколько типов медиа (каждый из которых разделен запятой, например media="screen, print"), а также медиа-запросы для элемента <link>.

Различные типы медиа

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

Media Type Описание
all Используется для всех медиа-устройств.
aural Используется для синтезаторов речи и звука.
braille Используется для устройств тактильной обратной связи Брайля.
embossed Используется для печати страниц со шрифтом Брайля.
handheld Используется для небольших или портативных устройств — обычно это небольшие устройства экрана, такие как мобильные телефоны или КПК.
print Используется для принтеров.
projection Используется для проецируемых презентаций, например, проекторов.
screen Используется в основном для цветных компьютерных экранов.
tty Используется для мультимедиа, использующего сетку символов с фиксированным шагом — например, телетайпы, терминалы или портативные устройства с ограниченными возможностями отображения.
tv Используется для устройств телевизионного типа — цветные экраны с низким разрешением, цветной экран с ограниченной прокруткой, звук доступен.

Есть несколько типов мультимедиа на выбор, но большинство браузеров поддерживают только два типа: экранные (screen) и печатные (print).

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.