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 |