Атрибут media HTML тега <link>

HTML тег <link>

Значение и применение

Атрибут media (HTML тега <link>) указывает, что файл адаптирован (оптимизирован) под определённые виды устройств. Атрибут может принимать несколько значений и используется, чтобы указать стиль для речевых или печатных устройств, для определенных моделей смартфонов и так далее.

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

АтрибутChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
mediaДаДаДаДаДаДа

Синтаксис:

<link media = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

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

Вы можете комбинировать медиа-запросы с использованием логических операторов:

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

Устройства

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

ЗначениеОписание
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).

Мультимедийные функции (Media Queries Level 4)

В "Media Queries Level 4" добавлены следующие новые функции, которые, возможно, будут реализованы в браузерах:

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

Рассмотрим пример в котором установим определенные стили, которые браузер будет использовать при просмотре страниц, а другие при печати страниц (в нашем случае для экономии ресурса принтера - цвет всех элементов черный, а цвет заднего фона белый).

Для просмотра страниц пользователями мы установим следующие CSS стили (файл tag_link.css), которые свяжем с документом, используя элемент <link>:

h2 {color: brown;} /* устанавливаем цвет элемента - коричневый */
p {color: red;} /* устанавливаем цвет элемента - красный */
body {background-color: khaki;} /* устанавливаем цвет заднего фона - хаки */

Следующие CSS стили мы будем использовать при печати и предварительном просмотре страницы, вынесем их тоже в отдельный файл CSS (файл tag_link_print.css) и свяжем с документом, используя элемент <link>, а именно:

h2, p {color: #000;} /* групповой селектор устанавливает цвет элементов - черный */
body {background-color: #FFF; } /* устанавливаем цвет заднего фона - белый */

Теперь полный пример:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута media HTML тега <style></title>
<link rel = "stylesheet" href = "../tag_link.css">
<link media = "print" rel = "stylesheet" href = "../tag_link_print.css">
</head>
<body>
	<h2>Утконос</h2>
	<p><b>Утконос (лат. Ornithorhynchus anatinus)</b> — водоплавающее млекопитающее отряда однопроходных, обитающее в Австралии. Это единственный современный представитель семейства утконосовых (Ornithorhynchidae); вместе с ехиднами образует отряд однопроходных (Monotremata) — млекопитающих, по ряду признаков близких к рептилиям. Это уникальное животное является одним из символов Австралии; оно изображено на реверсе австралийской монеты в 20 центов.</p>
</body>
</html>

Ниже показано как этот пример отображается в браузере, а на изображении как пример отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати):

Пример использования атрибута media HTML тега link (таблицы стилей для конкретных типов устройств).
Пример использования атрибута media HTML тега link (таблицы стилей для конкретных типов устройств).
HTML тег <link>