Атрибут mediaэлемента <area> HTML
HTML-тег <area>Примеры
Карта изображения с кликабельными областями:
<img src="planets.gif.html" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm.html" media="screen and (min-color-index:256)">
</map>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm.html" media="screen and (min-color-index:256)">
</map>
Попробуйте сами »
Поддержка браузеров
Все основные браузеры поддерживают атрибут media
Определение и использование
Атрибут media указывает, на каком устройстве будет отображаться целевой URL.
Этот атрибут используется для отображения указанного URL на заданном устройстве (например, iPhone), аудио- или печатных носителях.
Этот атрибут может принимать несколько значений.
Атрибут media требуется только в том случае, если используется атрибут href.
Различия между HTML 4.01 и HTML5
Атрибут media является новым в HTML5.
Синтаксис
<area media="value">
Возможные операторы
| Значение | Описание |
|---|---|
| и | Задает оператор AND |
| not | Задает оператор NOT |
| , | Задает оператор OR |
Устройства
| Значение | Описание |
|---|---|
| all | По умолчанию. Подходит для всех устройств. |
| aural | Синтезаторы речи |
| braille | Устройства обратной связи Брайля |
| handheld | Карманные устройства (маленький экран, ограниченная пропускная способность) |
| projection | Projection |
| Режим предварительного просмотра печати / печатные страницы | |
| экран | Экран компьютера |
| 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:500px)" |
| Ориентация | Задает ориентацию целевого дисплея/бумаги. Возможные значения: "portrait" или "landscape" Пример: media="all and (orientation: landscape)" |
| aspect-ratio | Соотношение ширины/высоты указанной целевой области отображения. Обычно использует префиксы "min-" и "max-". Пример: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Соотношение device-width/device-height указанной целевой области отображения. Обычно использует префиксы "min-" и "max-". Пример: media="screen and (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)" |
| разрешение | Задаёт плотность пикселей целевого дисплея/бумаги (DPI или DPCM). Обычно использует префиксы "min-" и "max-". Пример: media="print and (resolution:300dpi)" |
| scan | Задаёт метод развёртки телевизионного дисплея. Возможные значения — "progressive" и "interlace". Пример: media="tv and (scan:interlace)" |
| grid | Указывает, является ли устройство вывода сеточным или растровым Значение сетки равно "1", остальные — "0" Пример: media="handheld and (grid:1)" |
Другие расширения