Атрибут media

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

Синтаксис

<style media="all | print | screen | speech">
 ...
</style>

Значения

all
Все устройства.
print
Печатающее устройство вроде принтера.
screen
Экран монитора.
speech
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.

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

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

screen

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>STYLE, атрибут media</title>
  <style media="screen">
    .window {
     background: #333;
     border: 1px solid red;
     font-size: 0.9em;
     color: #fc0;
     padding: 10px;
    }
  </style>
  <style media="print">
    .window {
     border: 1px solid black;
     font-family: Arial;
     font-size: 0.9em;
     color: black;
     padding: 10px
    }
  </style>
 </head>
 <body>
   <div class="window">
   Ветеринарное свидетельство входит экскурсионный эфемероид, 
   но особой популярностью пользуются заведения подобного рода, 
   сосредоточенные в районе Центральной площади и железнодорожного вокзала. 
   </div>
 </body>
</html>

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

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

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

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

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

Браузеры ?

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 08.11.2016
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid