Описание media
Атрибут media
указывает, для какого носителя/устройства оптимизирован связанный документ.
Атрибут media
используется для указания того, что целевой URL предназначен для специальных устройств (например, iPhone), речевых или печатных носителей.
Атрибут media
может принимать несколько значений.
Применение media
Атрибут media
можно использовать для следующих элементов:
Элемент | Атрибут |
---|---|
<a> | media |
<area> | media |
<link> | media |
<source> | media |
<style> | media |
Примеры media
Ссылка с атрибутом media:
<a href="att_a_media.php"
media="print and (resolution:300dpi)">
Открыть страницу атрибутов носителя для печати.</a>
Попробуйте сами »
Карта-изображение с кликабельной областью:
<img src="planets.gif" width="145" height="126" alt="Планеты" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Солнце"
href="sun.html" 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>
Попробуйте сами »
Использование атрибута media:
<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
Атрибут media
имеет следующую поддержку браузера для каждого элемента:
Элемент | |||||
---|---|---|---|---|---|
a | Да | Да | Да | Да | Да |
area | Да | Да | Да | Да | Да |
link | Да | Да | Да | Да | Да |
source | Не поддерживает | Не поддерживает | Не поддерживает | Не поддерживает | Не поддерживает |
style | Да | Да | Да | Да | Да |