Атрибут media определяет устройство вывода, для которого оптимизирован документ, на который ведет ссылка области карты-изображения. Таким образом, данный атрибут используется для определения того, что целевая ссылка указывает на документ, предназначенный для устройства вывода с особыми свойствами.
Атрибут media может принимать несколько значений.
Атрибут media может использоваться только, когда определен атрибут href.
Атрибут media имеет чисто рекомендательный характер.
Атрибут media для тега <area> был добавлен в HTML5.
Синтаксис атрибута
<area media="значение">
Значения атрибута
Операторы
| Значение | Описание |
|---|---|
| and | Определяет оператор И |
| not | Определяет оператор НЕ |
| , | Определяет оператор ИЛИ |
Устройства
| Значение | Описание |
|---|---|
| all | Значение по умолчанию. Все устройства вывода. |
| aural | Речевые синтезаторы |
| braille | Устройства вывода на основе шрифта Брайля |
| handheld | Ручные устройства вывода (наладонники, смартфоны, устройства с небольшим экраном вывода) |
| projection | Проекторы |
| Печатающие устройства (например, принтеры) | |
| 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>
