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