html атрибут media

Атрибут media визначає, які медіа-пристрої найбільш оптимізовані для цільового ресурсу.

Цей атрибут використовується в основному для CSS стилів для визначення різних стилів для різних пристроїв.

Цей атрибут може приймати кілька значень.

Можливі оператори

And - Вказує на оператор AND
Not - Вказує на оператор NOT
, - Вказує на оператор OR

Синтаксис

<link media="value">

Атрибут media може отримувати 22 значення :

all: Без задання. Підходить для всіх пристроїв.
aural: Синтезатори мови.
braille: Пристрої зворотного зв’язку Брайля.
handheld: Кишенькові пристрої (маленький екран, обмежена пропускна здатність).
projection: Проектори.
print: Для друку.
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:500px)".
orientation: Визначає орієнтацію цільового відображення/паперу. Можливі значення: "portrait" або "landscape" Приклад: media="all and (orientation: landscape)".
aspect-ratio: Визначає співвідношення ширина/висота цільової області дисплея. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="screen and (aspect-ratio:16/9)".
device-aspect-ratio: Задає співвідношення ширини_пристрою/висоти_пристрою цільового дисплея/паперу. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="screen and (aspect-ratio:16/9)".
color: Визначає кількість біт на колір цільового дисплея. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="screen and (color:3)".
color-index: Визначає кількість кольорів цільового дисплея який він може обробляти. «Min-» і «Max-» префікси можуть бути використані. Приклад: "screen and (min-color-index:256)".
monochrome: Задає кількусть бітів на піксель в буфері кадру монохромних зображень. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="screen and (monochrome:2)".
resolution: Визначає щільність пікселів (точок на дюйм або точок на сантиметр) цільового відображення/паперу. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="print and (resolution:300dpi)".
scan: Визначає метод сканування на екрані телевізора. Можливі значення: "progressive" і "interlace". Приклад: media="tv and (scan:interlace)".
grid: Вказує, якщо пристрій виведення це сітка або растрове зображення. Можливі значення: "1" для сітки, і "0" в іншому випадку. Приклад: media="handheld and (grid:1)".

Переглядач
	Так	Так	Так	Так	Так

Мобільних переглядачів ще не додано.

Приклади

Приклад 1

Найпростіший приклад використання HTML атрибута media теґа <link>

<head>


<link rel="stylesheet" type="text/css" href="theme.css">


<link rel="stylesheet" type="text/css" href="print.css" media="print">


</head>

Різниця між HTML 4.01 та HTML5

Атрибут media став мати більше значень.

Різниця між XHTML та HTML

Немає жодної різниці.

HTML довідник

HTML Теґи