Атрибут media тега <a> — для яких пристроїв посилання
Атрибут media визначає, які медіа-пристрої оптимізовані для документу.
Цей атрибут використовується для вказівки того, що цільовий URL призначений для спеціальних пристроїв (наприклад, iPhone), мови або друкуючих пристроїв.
Атрибут media може приймати кілька значень.
Використовується тільки з атрибутом href.
Можливі оператори:
And- Вказує на оператор ANDNot- Вказує на оператор NOT,- Вказує на оператор OR
Загальний опис
автор: NagarD
- Нотатка
-
Цей атрибут є чисто консультативним.
автор: NagarD
Синтаксис
<a media="value">Атрибут media може отримувати 22 значень:
-
all -
Без задання. Підходить для всіх пристроїв.
автор: NagarD -
aural -
Синтезатори мови.
автор: NagarD -
braille -
Пристрої зворотного зв’язку Брайля.
автор: NagarD -
handheld -
Кишенькові пристрої (маленький екран, обмежена пропускна здатність).
автор: NagarD -
projection -
Проектори.
автор: NagarD -
print -
Для друку.
автор: NagarD -
screen -
Для екранів комп’ютерів.
автор: NagarD -
tty -
Телетайпи та аналогічні методи ЗМІ з використанням сітки символів із фіксированим кроком.
автор: NagarD -
tv -
Для пристроїв ТВ-телебачення.
автор: NagarD -
width -
Визначає ширину цільової області відображення. Можуть бути використан префікси «min-» та «max-». Приклад:
автор: NagarDmedia="screen and (min-width:500px)". -
height -
Визначає висоту цільової області дисплея. Можуть бути використан префікси «min-» та «max-». Приклад:
автор: NagarDmedia="screen and (max-height:700px)". -
device-width -
Визначає ширину цільового відображення/паперу. Можуть бути використан префікси «min-» та «max-». Приклад:
автор: NagarDmedia="screen and (device-width:500px)". -
device-height -
Вказує висоту цільового відображення / паперу. Можуть бути використан префікси «min-» та «max-». Приклад:
автор: NagarDmedia="screen and (device-height:500px)". -
orientation -
Визначає орієнтацію цільового відображення/паперу. Можливі значення: "portrait" або "landscape" Приклад:
автор: NagarDmedia="all and (orientation: landscape)". -
aspect-ratio -
Визначає співвідношення ширина/висота цільової області дисплея. Можуть бути використан префікси «min-» та «max-». Приклад:
автор: NagarDmedia="screen and (aspect-ratio:16/9)". -
device-aspect-ratio -
Задає співвідношення ширини_пристрою/висоти_пристрою цільового дисплея/паперу. Можуть бути використан префікси «min-» та «max-». Приклад:
автор: NagarDmedia="screen and (aspect-ratio:16/9)". -
color -
Визначає кількість біт на колір цільового дисплея. Можуть бути використан префікси «min-» та «max-». Приклад:
автор: NagarDmedia="screen and (color:3)". -
color-index -
Визначає кількість кольорів цільового дисплея який він може обробляти. Можуть бути використан префікси «min-» та «max-». Приклад:
автор: NagarD"screen and (min-color-index:256)". -
monochrome -
Задає кількусть бітів на піксель в буфері кадру монохромних зображень. Можуть бути використан префікси «min-» та «max-». Приклад:
автор: NagarDmedia="screen and (monochrome:2)". -
resolution -
Визначає щільність пікселів (точок на дюйм або точок на сантиметр) цільового відображення/паперу. Можуть бути використан префікси «min-» та «max-». Приклад:
автор: NagarDmedia="print and (resolution:300dpi)". -
scan -
Визначає метод сканування на екрані телевізора. Можливі значення: "progressive" і "interlace". Приклад:
автор: NagarDmedia="tv and (scan:interlace)". -
grid -
Вказує, якщо пристрій виведення це сітка або растрове зображення. Можливі значення: "1" для сітки, і "0" в іншому випадку. Приклад:
автор: NagarDmedia="handheld and (grid:1)".
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Так | Так | Так | Так | Так |
Мобільних переглядачів ще не додано.
Приклади
+ запропонувати свій приклад у пісочниці
Три посилання, одне з media="print": браузер на нього не зважає ніяк — усі три однакові. Прочитати атрибут може лише CSS через селектор за атрибутом, а справжній вибір за умовами роблять <style media> і медіа-запит: зелений напис застосувався, помаранчевий і сірий — ні.
HTML
<style media="screen">.only-screen { color: #2f6fd0; font-weight: 700; }</style>
<style media="print">.only-print { color: #c0392b; font-weight: 700; }</style>
<p class="head">Атрибут media на посиланні</p>
<p>
<a href="#a">звичайне посилання</a> ·
<a href="#b" media="print">те саме з media="print"</a> ·
<a href="#c" media="screen and (max-width: 600px)">і з медіа-запитом</a>
</p>
<p class="note">Усі три виглядають і поводяться однаково — браузер атрибут не читає.
Прочитати його вміст може тільки CSS через селектор за атрибутом: саме тому
друге й третє посилання отримали пунктир нижче.</p>
<p class="head">А ось де media справді працює</p>
<p class="only-screen">Цей рядок пофарбував блок style із media="screen" — правило застосувалося.</p>
<p class="only-print">Цей рядок мав пофарбувати блок style із media="print" — на екрані він лишився чорним.</p>
<p class="wide">Цей рядок пофарбовано з @media (min-width: 1px) — звичайний медіа-запит, і він працює.</p>CSS
p {
margin: 10px 0;
max-width: 560px;
}
.head {
margin: 22px 0 6px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
a[media] {
border-bottom: 3px dotted #d64545;
}
.note {
color: #5a6472;
font-size: .9em;
}
@media (min-width: 1px) {
.wide {
color: #3a9a4f;
font-weight: 700;
}
}media на посиланні — підказка, для якого носія призначено документ за адресою (тут друк у 300dpi). Браузери поведінку не змінюють: посилання відкривається як звичайне, атрибут читають хіба інструменти.
<a href="/css/properties" media="print and (resolution:300dpi)">Версія довідника для друку</a>Різниця між HTML 4.01 та HTML5
Атрибут media для теґу <a> з’явився тільки у HTML5.
Коментарі
Коментарів ще немає — будьте першим!