Атрибут media определяет устройство вывода, для которого данная таблица стилей оптимизирована. Таким образом, для каждого устройства можно создать свою таблицу стилей, учитывающую особенности конкретного устройства вывода и оптимизирующую веб-страницу именно для него.
Атрибут media может принимать несколько значений.
Синтаксис атрибута
<style media="значение">
Значения атрибута
Операторы
| Значение | Описание |
|---|---|
| and | Определяет оператор И |
| not | Определяет оператор НЕ |
| , | Определяет оператор ИЛИ |
Устройства
| Значение | Описание |
|---|---|
| all | Значение по умолчанию. Все устройства вывода. |
| aural | Речевые синтезаторы |
| braille | Устройства вывода на основе шрифта Брайля |
| handheld | Ручные устройства вывода (наладонники, смартфоны, устройства с небольшим экраном вывода) |
| projection | Проекторы |
| Печатающие устройства (например, принтеры) | |
| screen | Компьютерные мониторы |
| tty | Телетайпы, терминалы и другие устройства с ограниченными возможностями экрана (для них нельзя использовать пикселы в качестве единиц измерения) |
| tv | Телевизоры (для них характерно низкое разрешение и ограниченные возможности прокрутки) |
Значения
| Значение | Описание |
|---|---|
| width | Определяет ширину целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (min-width:500px)" |
| height | Определяет высоту целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (max-height:700px)" |
| device-width | Определяет всю доступную ширину экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (device-width:500px)" |
| device-height | Определяет всю доступную высоту экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (device-height:700px)" |
| orientation | Определяет ориентацию целевого дисплея/бумаги. Возможные значения - "portrait" или "landscape". Например, media="screen and (orientation: landscape)" |
| aspect-ratio | Определяет соотношение ширины и высоты (width/height) целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Определяет соотношение device-width/device-height экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (devic-aspect-ratio:16/9)" |
| color | Определяет число бит на цветовой канал дисплея. Можно использовать префиксы "min-" и "max-". Например, media="screen and (color:3)" |
| color-index | Определяет количество цветов, поддерживаемых устройством. Можно использовать префиксы "min-" и "max-". Например, media="screen and (min-color-index:256)" |
| monochrome | Определяет число бит на пиксель в монохромном фреймовом буфере. Можно использовать префиксы "min-" и "max-". Например, media="screen and (monochrome:2)" |
| resolution | Определяет разрешение устройства (dpi или dpcm). Можно использовать префиксы "min-" и "max-". Например, media="screen and (resolution:300dp)" |
| scan | Определяет тип развертки телевизионного экрана. Возможные значения - "progressive" или "interlace". Например, media="screen and (scan: interlace)" |
| grid | Определяет, является ли устройство с фиксированным размером символов или нет. Возможные значения: "1" — устройство с фиксированным размером символов, "0" — нет. Например, media="handheld and (grid:1)" |
Пример использования атрибута
Таблица стилей для устройств печати (например, принтеров):
<style media="print">
h1 { color:#000000; }
p { color:#000000; }
body { background-color:#FFFFFF; }
</style>
