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

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

Некоторые 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).

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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