html атрибут media

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

Браузери можуть використовувати цей атрибут, щоб визначити, чи може він відтворити файл чи ні. Якщо браузер не може відтворити файл, він може не завантажувати його.

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

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

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

Цей атрибут є чисто консультативним.

Синтакс

<source 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)".

Переглядачі

Переглядач

8+

15+

4+

10.5+

9+

12+

Переглядач

2+

1+

15+

4+

Приклади


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

See the Pen source_media_css_in_ua by css.in.ua (@css_in_ua) on CodePen.

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

See the Pen source_media_1css_in_ua by css.in.ua (@css_in_ua) on CodePen.

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


Атрибут media тега <source> з'явився тільки в HTML5.

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


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