Атрибут media HTML тега area

Атрибут media определяет устройство вывода, для которого оптимизирован документ, на который ведет ссылка области карты-изображения. Таким образом, данный атрибут используется для определения того, что целевая ссылка указывает на документ, предназначенный для устройства вывода с особыми свойствами.

Атрибут media может принимать несколько значений.

Атрибут media может использоваться только, когда определен атрибут href.

Атрибут media имеет чисто рекомендательный характер.

Атрибут media для тега <area> был добавлен в HTML5.

Синтаксис атрибута

<area media="значение">

Значения атрибута

Операторы

Значение Описание
and Определяет оператор И
not Определяет оператор НЕ
, Определяет оператор ИЛИ

Устройства

Значение Описание
all Значение по умолчанию. Все устройства вывода.
aural Речевые синтезаторы
braille Устройства вывода на основе шрифта Брайля
handheld Ручные устройства вывода (наладонники, смартфоны, устройства с небольшим экраном вывода)
projection Проекторы
print Печатающие устройства (например, принтеры)
screen Компьютерные мониторы
tty Телетайпы, терминалы и другие устройства с ограниченными возможностями экрана (для них нельзя использовать пикселы в качестве единиц измерения)
tv Телевизоры (для них характерно низкое разрешение и ограниченные возможности прокрутки)

Значения

Значение Описание
width Определяет ширину целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (min-width:500px)"
height Определяет высоту целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (max-height:700px)"
device-width Определяет всю доступную ширину экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (device-width:500px)"
device-height Определяет всю доступную высоту экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (device-height:700px)"
orientation Определяет ориентацию целевого дисплея/бумаги. Возможные значения - "portrait" или "landscape". Например, media="screen and (orientation: landscape)"
aspect-ratio Определяет соотношение ширины и высоты (width/height) целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (aspect-ratio:16/9)"
device-aspect-ratio Определяет соотношение device-width/device-height экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (devic-aspect-ratio:16/9)"
color Определяет число бит на цветовой канал дисплея. Можно использовать префиксы "min-" и "max-". Например, media="screen and (color:3)"
color-index Определяет количество цветов, поддерживаемых устройством. Можно использовать префиксы "min-" и "max-". Например, media="screen and (min-color-index:256)"
monochrome Определяет число бит на пиксель в монохромном фреймовом буфере. Можно использовать префиксы "min-" и "max-". Например, media="screen and (monochrome:2)"
resolution Определяет разрешение устройства (dpi или dpcm). Можно использовать префиксы "min-" и "max-". Например, media="screen and (resolution:300dp)"
scan Определяет тип развертки телевизионного экрана. Возможные значения - "progressive" или "interlace". Например, media="screen and (scan: interlace)"
grid Определяет, является ли устройство с фиксированным размером символов или нет. Возможные значения: "1" — устройство с фиксированным размером символов, "0" — нет. Например, media="handheld and (grid:1)"

Пример использования атрибута

Карта-изображение с участками-ссылками:


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

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