html тег <area> атрибут media


<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
	<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm" media="screen and (min-color-index:256)">
</map>

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

ЗНАЧЕННЯ ОПИС
and Вказує на оператор AND
not Вказує на оператор NOT
, Вказує на оператор OR

Пристрої

ЗНАЧЕННЯ ОПИС
all Без задання. Підходить для всіх пристроїв.
aural Синтезатори мови.
braille Пристрої зворотного зв’язку Брайля.
handheld Кишенькові пристрої (маленький екран, обмежена пропускна здатність).
projection Проектори.
print Для друку.
screen Для екранів комп'ютерів.
tty Телетайпи та аналогічні методи ЗМІ з використанням сітки символів із фіксированим кроком.
tv Для пристроїв ТВ-телебачення.
автор: NagarD

Синтаксис

<area media="value">

Атрибут media може отримувати 13 значень:

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

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft Internet Explorer
1 1 1 1 1

Мобільних переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

media на області карти позначав, для якого носія призначено ціль посилання. Із HTML5 атрибут для area вилучено — браузери його ігнорують, область працює як звичайне посилання (клацни Сонце).

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Crect width='300' height='120' fill='%23001b33'/%3E%3Ccircle cx='40' cy='60' r='55' fill='gold'/%3E%3Ccircle cx='180' cy='60' r='14' fill='%23b3b3b3'/%3E%3Ccircle cx='255' cy='60' r='22' fill='%23e0a96d'/%3E%3C/svg%3E" width="300" height="120" alt="Сонячна система" usemap="#planetmap">

<map name="planetmap">
    <area shape="rect" coords="0,0,100,120" alt="Сонце"
          href="#sun" media="screen and (min-color-index:256)">
</map>
автор: NagarD

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


Атрибут media для тегу <area> не з‘явився тільки у HTML5.


Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід