Атрибут media тега <style> — стилі для пристроїв
автор: NagarD
Загальний опис
автор: NagarD
- Нотатка
-
Цей атрибут є чисто консультативним.
автор: Wsewlad
Синтаксис
<style 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 -
Визначає співвідношення width/height цільового дисплея. Допускається використовувати префікси «min-» та «max-». Приклад: media="screen and (aspect-ratio:16/9)"
автор: NagarD -
device-aspect-ratio -
Задає співвідношення device-width/device-height цільового дисплея. Допускається використовувати префікси «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-».
автор: NagarD -
scan -
Визначає метод сканування дисплею. Можливі значення: "progressive" та "interlace". Приклад: media="tv and (scan:interlace)"
автор: NagarD -
grid -
Вказує, якщо пристрій виведення це сітка або растрове зображення. Можливі значення: "1" для сітки, і "0" в іншому випадку. Приклад: media="handheld and (grid:1)"
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Стиль із media="print" на екрані не діє: абзац виглядає звичайно. Відкрий попередній перегляд друку — там він стане курсивом із рамкою.
<style media="print">
p {
font-style: italic;
border: 1px solid black;
}
</style>
<p>Цей абзац змінюється лише в друкованій версії.</p>П'ять блоків <style> із різними значеннями media і п'ять абзаців під ними. Сині — ті, чиї правила браузер застосував; чорні лишилися без стилів, і жодного попередження в консолі при цьому немає. Найцікавіші третій (мертвий тип пристрою) і п'ятий: там @media print записано всередині блока з media="screen", і разом вони не збігаються ніколи. Четвертий реагує на ширину — звузьте вікно.
HTML
<style media="print">.a { color: #2f6fd0; border-left-color: #2f6fd0; }</style>
<style media="">.b { color: #2f6fd0; border-left-color: #2f6fd0; }</style>
<style media="handheld">.c { color: #2f6fd0; border-left-color: #2f6fd0; }</style>
<style media="screen and (max-width: 500px)">.d { color: #2f6fd0; border-left-color: #2f6fd0; }</style>
<style media="screen">@media print { .e { color: #2f6fd0; border-left-color: #2f6fd0; } }</style>
<p class="a">media="print" — на екрані мовчить (відкрийте перегляд друку)</p>
<p class="b">media="" — порожнє значення означає «завжди», правила діють</p>
<p class="c">media="handheld" — мертвий тип пристрою, не діє ніде й ніколи</p>
<p class="d">media="screen and (max-width: 500px)" — звузьте вікно, і абзац посиніє</p>
<p class="e">media="screen" з @media print усередині — умови складаються через «І»</p>CSS
p {
max-width: 560px;
margin: 10px 0;
padding: 6px 10px;
border-left: 6px solid #c9ced6;
font-weight: 600;
font-family: ui-monospace, monospace;
font-size: .95em;
}Коментарі
Коментарів ще немає — будьте першим!