Атрибут media

Обновлено: 13.01.2023

Атрибут media

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

Синтаксис

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

Значения

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

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

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

screen

Пример

<!DOCTYPE HTML>
<html>
  <head>
   <metacharset="utf-8">
   <title>STYLE, media attribute</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">
    The veterinary certificate includes an excursion ephemeroid,
    but establishments of this kind are especially popular,
    concentrated in the area of the Central Square and the railway station.
    </div>
  </body>
</html>

Браузеры

style:media

Посмотреть совместимость на Can I use?

style:media