Одна из наиболее важных функций таблиц стилей заключается в том, что вы можете указать отдельные таблицы стилей для разных типов медиа. Под медиа в данном случае подразумевается различение технических параметров устройств, например смартфонов/десктопов или портретной/альбомной ориентации.
Медиа-запросы — один из лучших способов создания веб-страниц, удобных для мобильной версии или для печати — просто назначайте разные таблицы стилей для разных версий.
Некоторые 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 должны появляться в начале таблицы стилей, перед любыми объявлениями. Любое правило, указанное в самой таблице стилей, переопределяет конфликтующие правила в импортированных таблицах.
Способ 3: Использование элемента <link>
Атрибут 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).
