| Элемент | ||||||
| <a> | Да | Да | Да | Да | Да | Да |
| <area> | Да | Да | Да | Да | Да | Да |
| <link> | 3+ | 1+ | 4+ | 1+ | 1+ | 1+ |
| <source> | ||||||
| <style> | 4+ | 1+ | 6+ | 1+ | 1+ | 1+ |
HTML Атрибут media
Атрибут media (от англ. "media" ‒ «средства массовой информации») задает устройства выаода, для которых оптимизирован данный документ. Атрибут может принимать несколько значений и используется, чтобы указать стиль для речевых или печатных устройств, для определенных моделей смартфонов и так далее.
Синтаксис
<[элемент] media="значение">...</[элемент]>
Значения
Допускается комбинирование медиа-запросов с использованием логических операторов:
| Значение | Описание |
|---|---|
| and | Оператор and ("И") используется для объединения нескольких медиа-запросов в один. |
| not | Оператор not ("Логическое НЕ") обращает результат - если медиа-запрос был истинным без "not", то он станет ложным, и наоборот. |
| "," | Оператор "," позволяет объединить несколько медиа-запросов через запятую. Если хотя бы один запрос возвращает "true" (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR ("ИЛИ" ). |
| only | Оператор only ("Только") может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиа-запрос (игнорируют), содержащий в себе этот логический оператор. |
Можно использовать медиа-запросы для конкретных типов устройств:
| Значение | Описание |
|---|---|
| all | Подходит для всех типов устройств. Это значение по умолчанию. |
| aural | Предназначено для речевых синтезаторов. Значение считается устаревшим. |
| braille | Устройства для чтения шрифта Брайля (рельефно-точечный тактильный шрифт, предназначенный для письма и чтения незрячими и плохо видящими людьми). Значение считается устаревшим. |
| embossed | Устройства, предназначенные для печати шрифта Брайля. Значение считается устаревшим. |
| handheld | Предназначено для портативных устройств (маленький экран и ограниченная полоса пропускания - bandwidth). Значение считается устаревшим. |
| Предназначен для печатных страниц и для режима предварительного просмотра печати. | |
| projection | Устройства проекционного типа (проекторы). Значение считается устаревшим. |
| screen | Экраны компьютера. |
| speech | Речевые синтезаторы, устройства для чтения с экрана (для чтения страниц вслух). |
| tty | Устройства, которые используют набор символов фиксированной ширины, например, телетайпы или терминалы. Значение считается устаревшим. |
| tv | Устройства телевизионного типа (низкое разрешение, ограниченные возможности прокрутки, возможность передачи звука). Значение считается устаревшим. |
Можно устанавливать сразу несколько значений, перечисляя их через запятую.
| Значение | Описание |
|---|---|
| aspect-ratio | Соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: aspect-ratio: 5/4 (соотношение пять к четырем). |
| color | Определяет количество бит на цветовую компоненту устройства вывода. Если устройство не является цветным устройством, то это значение равно нулю. Допускаются только положительные значения. Например, если дисплей использует по 4 бита на красный и синий, а 5 бит на зеленый, то считается, что устройство использует 4 бит на цветовой компонент. |
| color-index | Количество цветов, которое устройство может отображать. Отрицательные значения не допускаются. |
| device-aspect-ratio | Соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: device-aspect-ratio: 5/4 (соотношение пять к четырем). Значение считается устаревшим и удалено из "Media Queries Level 4". |
| device-height | Определяет высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4". |
| device-width | Определяет ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4". |
| grid | Определяет основано ли выходное устройство на сеточной системе (например, терминал "tty" или дисплей телефона с одним фиксированным шрифтом), в этом случае значение будет равно 1, если устройство растровое, то значение будет равно 0. |
| height | Задает высоту области просмотра (используются единицы измерения CSS). |
| max-aspect-ratio | Максимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. |
| max-color | Определяет максимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения. |
| max-color-index | Максимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются. |
| max-device-aspect-ratio | Масимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим и удалено из "Media Queries Level 4". |
| max-device-height | Определяет максимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4". |
| max-device-width | Определяет максимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4". |
| max-height | Задает максимальную высоту области просмотра (используются единицы измерения CSS). |
| max-monochrome | Указывает максимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа. |
| max-resolution | Указывает максимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi), так и в точках на сантиметр (dpcm). |
| max-width | Задает максимальную ширину области просмотра (используются единицы измерения CSS). |
| min-aspect-ratio | Минимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. |
| min-color | Определяет минимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения. |
| min-color-index | Минимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются. |
| min-device-aspect-ratio | Минимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим и удалено из "Media Queries Level 4". |
| min-device-height | Определяет минимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4". |
| min-device-width | Определяет минимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4". |
| min-height | Задает минимальную высоту области просмотра (используются единицы измерения CSS). |
| min-monochrome | Указывает минимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа. |
| min-resolution | Указывает минимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi), так и в точках на сантиметр (dpcm). |
| min-width | Задает минимальную ширину области просмотра (используются единицы измерения CSS). |
| monochrome | Указывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа. |
| orientation | Определяет, находится ли область просмотра в режиме альбомной ориентации - экран шире, чем высота, или в портретной ориентации - высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: orientation: landscape, а для портретной и orientation: portrait. |
| resolution | Указывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi), так и в точках на сантиметр (dpcm). |
| scan | Указывает метод сканирования устройства вывода. Применяется для устройств телевизионного типа (tv). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: череcстрочная развертка - (interlace), прогрессивная развертка (progressive). |
| width | Задает ширину области просмотра (используются единицы измерения CSS). |
Применяется к тегам
| Элемент | Атрибут |
|---|---|
| <a> | media |
| <area> | media |
| <link> | media |
| <source> | media |
| <style> | media |
Различия между HTML 4.01 и HTML5
Нет.
Примеры использования:
Атрибут media (Элемент <a>)
Пример HTML:
Попробуй сам<a href="att_media.html?output=print"
media="print and (resolution:300dpi)">Открыть страницу на печать.</a>
Атрибут media (Элемент <area>)
Пример HTML:
Попробуй сам<img src="images/foto_elem.jpg" alt="Карта изображений" style="width:450px;height:292px;" usemap="#mykarta">
<map name="mykarta">
<area shape="poly" coords="133,62,278,59,284,24,407,22,410,130,285,134,278,96,133,95"
title="Ключ от авто" href="images/auto500.jpg" target=_blank media="screen and (min-color-index:256)">
</map>
Атрибут media (Элемент <link>)
Пример HTML:
Попробуй сам<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
Атрибут media (Элемент <source>)
Пример HTML:
Попробуй сам<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)">
Атрибут media (Элемент <style>)
Пример HTML:
Попробуй сам<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
Поддержка браузерами
Учебник HTML
HTML уроки: HTML Атрибуты
