Справочники

HTML Элементы HTML Атрибуты Глобальные Атрибуты HTML События HTML MIME-типы HTML Коды языков HTMLТаблица цветов HTML ASCII HTML ISO-8859-1 HTML Windows-1251 HTML UTF-8 кирилица HTML URL для UTF-8 HTML URL для ISO-8859


 


HTML Атрибут media

Атрибут media (от англ. "media" ‒ «средства массовой информации») задает устройства выаода, для которых оптимизирован данный документ. Атрибут может принимать несколько значений и используется, чтобы указать стиль для речевых или печатных устройств, для определенных моделей смартфонов и так далее.

Синтаксис

<[элемент] media="значение">...</[элемент]>

Значения

Допускается комбинирование медиа-запросов с использованием логических операторов:

Логические операторы

Значение Описание
and Оператор and ("И") используется для объединения нескольких медиа-запросов в один.
not Оператор not ("Логическое НЕ") обращает результат - если медиа-запрос был истинным без "not", то он станет ложным, и наоборот.
"," Оператор "," позволяет объединить несколько медиа-запросов через запятую. Если хотя бы один запрос возвращает "true" (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR ("ИЛИ" ).
onlyОператор only ("Только") может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиа-запрос (игнорируют), содержащий в себе этот логический оператор.

Можно использовать медиа-запросы для конкретных типов устройств:

Устройства

ЗначениеОписание
allПодходит для всех типов устройств. Это значение по умолчанию.
auralПредназначено для речевых синтезаторов. Значение считается устаревшим.
brailleУстройства для чтения шрифта Брайля (рельефно-точечный тактильный шрифт, предназначенный для письма и чтения незрячими и плохо видящими людьми). Значение считается устаревшим.
embossedУстройства, предназначенные для печати шрифта Брайля. Значение считается устаревшим.
handheldПредназначено для портативных устройств (маленький экран и ограниченная полоса пропускания - bandwidth). Значение считается устаревшим.
printПредназначен для печатных страниц и для режима предварительного просмотра печати.
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>

Поддержка браузерами

Элемент
<a> Да Да Да Да Да Да
<area> Да Да Да Да Да Да
<link> 3+ 1+ 4+ 1+ 1+ 1+
<source>
<style> 4+ 1+ 6+ 1+ 1+ 1+

Учебник HTML

HTML уроки: HTML Атрибуты