Атрибут media тега <link> — умова підключення стилів
Атрибут media визначає, які медіа-пристрої найбільш оптимізовані для цільового ресурсу.
Цей атрибут використовується в основному для CSS стилів для визначення різних стилів для різних пристроїв.
Цей атрибут може приймати кілька значень.
Можливі оператори
- And - Вказує на оператор AND
- Not - Вказує на оператор NOT
- , - Вказує на оператор OR
Загальний опис
автор: NagarD
Синтаксис
<link 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-» префікси можуть бути використані. Приклад: media="screen and (min-width:500px)".
автор: NagarD -
height -
Визначає висоту цільової області дисплея. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="screen and (max-height:700px)".
автор: NagarD -
device-width -
Визначає ширину цільового відображення/паперу. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="screen and (device-width:500px)".
автор: NagarD -
device-height -
Вказує висоту цільового відображення / паперу. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="screen and (device-height:500px)".
автор: NagarD -
orientation -
Визначає орієнтацію цільового відображення/паперу. Можливі значення: "portrait" або "landscape" Приклад: media="all and (orientation: landscape)".
автор: NagarD -
aspect-ratio -
Визначає співвідношення ширина/висота цільової області дисплея. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="screen and (aspect-ratio:16/9)".
автор: NagarD -
device-aspect-ratio -
Задає співвідношення ширини_пристрою/висоти_пристрою цільового дисплея/паперу. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="screen and (aspect-ratio:16/9)".
автор: NagarD -
color -
Визначає кількість біт на колір цільового дисплея. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="screen and (color:3)".
автор: NagarD -
color-index -
Визначає кількість кольорів цільового дисплея який він може обробляти. «Min-» і «Max-» префікси можуть бути використані. Приклад: "screen and (min-color-index:256)".
автор: NagarD -
monochrome -
Задає кількусть бітів на піксель в буфері кадру монохромних зображень. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="screen and (monochrome:2)".
автор: NagarD -
resolution -
Визначає щільність пікселів (точок на дюйм або точок на сантиметр) цільового відображення/паперу. «Min-» і «Max-» префікси можуть бути використані. Приклад: media="print and (resolution:300dpi)".
автор: NagarD -
scan -
Визначає метод сканування на екрані телевізора. Можливі значення: "progressive" і "interlace". Приклад: media="tv and (scan:interlace)".
автор: NagarD -
grid -
Вказує, якщо пристрій виведення це сітка або растрове зображення. Можливі значення: "1" для сітки, і "0" в іншому випадку. Приклад: media="handheld and (grid:1)".
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | ≤12.1 | 12 | ≤6 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Перший стиль діє всюди — абзац синій; другий підключається лише в друці: відкрий попередній перегляд друку, і абзац стане чорним курсивом.
<link rel="stylesheet" href="data:text/css,p%7Bcolor:%230172ad%7D">
<link rel="stylesheet" href="data:text/css,p%7Bcolor:black;font-style:italic%7D" media="print">
<p>На екрані я синій, у друці — чорний курсив.</p>Чотири справжні теґи <link rel="stylesheet"> з різними значеннями media — самі стилі лежать у data:-адресах, щоб приклад лишався без зовнішніх файлів. Кольоровими стають лише ті абзаци, чия умова збіглася: змініть ширину вікна й подивіться, як два останні міняються місцями, а «друкарський» не вмикається ніколи — доки не відкриєте попередній перегляд друку.
HTML
<link rel="stylesheet" href="data:text/css,%23a%7Bbackground:%23e8f5ea;border-color:%233a9a4f%7D">
<link rel="stylesheet" media="print" href="data:text/css,%23b%7Bbackground:%23fdecea;border-color:%23d64545%7D">
<link rel="stylesheet" media="(min-width: 480px)" href="data:text/css,%23c%7Bbackground:%23e7effb;border-color:%232f6fd0%7D">
<link rel="stylesheet" media="(max-width: 479px)" href="data:text/css,%23d%7Bbackground:%23fff4e0;border-color:%23f2b134%7D">
<p id="a" class="box">без media — діє завжди</p>
<p id="b" class="box">media="print" — на екрані не діє, але файл усе одно
завантажено</p>
<p id="c" class="box">media="(min-width: 480px)" — діє на широкому вікні</p>
<p id="d" class="box">media="(max-width: 479px)" — діє на вузькому вікні</p>
<p class="note">Сірими лишилися абзаци, чия умова не збіглася. Файли для них
переглядач завантажив однаково — саме тому media не економить трафік.</p>CSS
.box {
max-width: 520px;
margin: 0 0 10px;
padding: 8px 12px;
border-left: 8px solid #c9ced6;
background: #f2f4f7;
color: #4a5361;
font-family: ui-monospace, monospace;
font-size: .95em;
}
.note {
max-width: 520px;
margin-top: 16px;
color: #5a6472;
font-size: .9em;
}Різниця між HTML 4.01 та HTML5
Атрибут media став мати більше значень.
Коментарі
Коментарів ще немає — будьте першим!