Атрибут media

Оновлено: 25.10.2022

Атрибут 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>

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

Рис. 1. Сторінка зі стилем для перегляду на моніторі

Рис. 2. Сторінка зі стилем для виведення на друк

Браузери

style:media

Переглянути сумісність з Can I use?

style:media