Атрибут media

23.09.2010

Влад Мержевич

Internet Explorer Chrome Opera Safari Firefox Android iOS

4.0+ 1.0+ 6.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает устройство вывода, для которого предназначена таблица стилей. Для каждого устройства — от карманного компьютера до принтера можно определить свой собственный стиль, который бы учитывал специфику устройства и подгонял под него вид веб-страницы.

Синтаксис

<style media="all|braille|handheld|print|screen|speech|projection|tty|tv">
 ...
</style>

Значения

all: Все устройства.
braille: Устройства, основанные на системе Брайля, предназначены для слепых людей.
handheld: Наладонники, смартфоны, устройства с малой шириной экрана.
print: Печатающее устройство вроде принтера.
screen: Экран монитора.
speech: Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
projection: Проектор.
tty: Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пикселы в качестве единиц измерения.
tv: Телевизор.

Можно устанавливать сразу несколько значений, перечисляя их через запятую.

Значение по умолчанию

screen

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
 <meta charset="utf-8">
 <title>Тег STYLE, атрибут media</title>
 <style media="screen">
 .window {
 background: #333;
 border: 1px solid red;
 font-size: 90%;
 color: #fc0;
 padding: 10px;
 }
 </style>
 <style media="print">
 .window {
 border: 1px solid black;
 font-family: Arial;
 font-size: 90%;
 font-weight: bold;
 color: black;
 padding: 10px
 }
 </style>
 </head>
 <body>
 <div class="window">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
 nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 </div>
 </body>
</html>

Результат данного примера продемонстрирован на рис. 1, где применяется стиль с атрибутом media="screen". На рис. 2 показана та же страница, но при этом уже действует стиль для печати, заданный атрибутом media="print". Результат эмулирован, поскольку стиль будет действовать только при отправке веб-страницы на печать.

Рис. 1

Рис. 1. Страница со стилем для просмотра на мониторе

Рис. 2

Рис. 2. Страница со стилем для вывода на печать