САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

На сайте нет рекламы

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 Да Да Да Да Да