html тег <source> атрибут media
Атрибут media визначає, які медіа-пристрої оптимізовані медіа ресурсу.
Браузери можуть використовувати цей атрибут, щоб визначити, чи може він відтворити файл чи ні. Якщо браузер не може відтворити файл, він може не завантажувати його.
Цей атрибут може приймати кілька значень.
Можливі оператори
- And - Вказує на оператор AND
- Not - Вказує на оператор NOT
- , - Вказує на оператор OR
- Нотатка
-
Цей атрибут є чисто консультативним.
автор: с3с
Синтаксис
<source media="value">
Атрибут media може отримувати 22 значень:
-
all -
Без задання. Підходить для всіх пристроїв.
автор: с3с -
aural -
Синтезатори мови.
автор: с3с -
braille -
Пристрої зворотного зв’язку Брайля.
автор: с3с -
handheld -
Кишенькові пристрої (маленький екран, обмежена пропускна здатність).
автор: с3с -
projection -
Проектори.
автор: с3с -
print -
Для друку.
автор: с3с -
screen -
Для екранів комп’ютерів.
автор: с3с -
tty -
Телетайпи та аналогічні методи ЗМІ з використанням сітки символів із фіксованим кроком.
автор: с3с -
tv -
Для пристроїв телебачення.
автор: с3с -
width -
Визначає ширину цільової області відображення. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (min-width:500px)".
автор: с3с -
height -
Визначає висоту цільової області дисплея. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (max-height:700px)".
автор: с3с -
device-width -
Визначає ширину цільового відображення/паперу. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (device-width:500px)".
автор: с3с -
device-height -
Вказує висоту цільового відображення / паперу. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (device-height:500px)".
автор: с3с -
orientation -
Визначає орієнтацію цільового відображення/паперу. Можливі значення: "portrait" або "landscape" Приклад: media="all and (orientation: landscape)".
автор: с3с -
aspect-ratio -
Визначає співвідношення ширина/висота цільової області дисплея. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (aspect-ratio:16/9)".
автор: с3с -
device-aspect-ratio -
Задає співвідношення ширини_пристрою/висоти_пристрою цільового дисплея/паперу. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (aspect-ratio:16/9)".
автор: с3с -
color -
Визначає кількість біт на колір цільового дисплея. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (color:3)".
автор: с3с -
color-index -
Визначає кількість кольорів цільового дисплея який він може обробляти. Можуть бути використані префікси «min-» та «max-». Приклад: "screen and (min-color-index:256)".
автор: с3с -
monochrome -
Задає кількусть бітів на піксель в буфері кадру монохромних зображень. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (monochrome:2)"
автор: с3с -
resolution -
Визначає щільність пікселів (точок на дюйм або точок на сантиметр) цільового відображення/паперу. Можуть бути використані префікси «min-» та «max-». Приклад: media="print and (resolution:300dpi)"
автор: с3с -
scan -
Визначає метод сканування на екрані телевізора. Можливі значення: "progressive" і "interlace". Приклад: media="tv and (scan:interlace)".
автор: с3с -
grid -
Вказує, якщо пристрій виведення це сітка або растрове зображення. Можливі значення: "1" для сітки, і "0" в іншому випадку. Приклад: media="handheld and (grid:1)".
автор: с3с
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| 8+ | 15+ | 4+ | 10.5+ | 12+ | 9+ |
| Переглядач | ||||
|---|---|---|---|---|
| 2+ | 1+ | 15+ | 4+ |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута media теґа <source>
See the Pen source_media_css_in_ua by css.in.ua (@css_in_ua) on CodePen.
автор: с3сНайпростіший приклад використання HTML атрибута media теґа <source>
See the Pen source_media_1css_in_ua by css.in.ua (@css_in_ua) on CodePen.
автор: с3сРізниця між HTML 4.01 та HTML5
Атрибут media тега <source> з'явився тільки в HTML5.
Різниця між XHTML та HTML
Коментарі
Коментарів ще немає — будьте першим!