HTML - атрибут мультимедиа
Определение и использование
Атрибут mediaуказывает, для какого носителя/устройства оптимизирован связанный документ.
Этот атрибут используется для указания того, что целевой URL предназначен для специальных устройств (таких как iPhone), речи или печатных носителей.
Этот атрибут может принимать несколько значений.
Относится к
Атрибут mediaможно использовать для следующих элементов:
Примеры
Пример
Ссылка с атрибутом media:
<a href="att_a_media.asp?output=print"
media="print and (resolution:300dpi)">
Open media attribute page for print.</a>
Пример области
Карта изображения с кликабельной областью:
<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>
Пример ссылки
Две разные таблицы стилей для двух разных типов носителей (экран и печать):
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
Пример источника
Использование медиа-атрибута:
<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)">
Пример стиля
Укажите стиль для печати:
<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
Поддержка браузера
Атрибут mediaимеет следующую поддержку браузера для каждого элемента:
| Element | |||||
|---|---|---|---|---|---|
| a | Yes | Yes | Yes | Yes | Yes |
| area | Yes | Yes | Yes | Yes | Yes |
| link | Yes | Yes | Yes | Yes | Yes |
| source | Not supported | Not supported | Not supported | Not supported | Not supported |
| style | Yes | Yes | Yes | Yes | Yes |