Атрибут media HTML тега <link>

Значение и применение

Атрибут media задаёт медиазапрос, при котором применяются стили, например print или (width <= 40rem). Это условие применения, а не автоматическая адаптация CSS под устройство.

Поддержка браузерами

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

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.link.media

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
media	✓1	✓12	✓1	✓≤12.1	✓≤4	✓18	✓4	✓≤12.1	✓≤3.2	✓1.0	✓4.4	✓≤3.2

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

Синтаксис:

<link media = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

Логические операторы

Вы можете комбинировать медиа-запросы с использованием логических операторов:

Устройства

Вы можете использовать медиа-запросы для конкретных типов устройств:

Мультимедийные функции

Мультимедийные функции (Media Queries Level 4)

В "Media Queries Level 4" добавлены следующие новые функции, с разной поддержкой браузерами; многие уже применяются на практике:

• scripting (определяет используются ли языки сценариев, такие как JavaScript в текущем документе).
  Значения:
  • enabled (скрипты доступны в текущем документе).
  • none (скрипты полностью недоступны в текущем документе).
  
  
• pointer (используется для запроса о наличии и правильности указывающего устройства, такого как мышь. Если устройство имеет несколько механизмов ввода, то функция указателя должна отражать характеристики "первичного" механизма входного сигнала, который определяется браузером пользователя).
  Значения:
  • none (основной механизм ввода устройства не включает в себя указательное устройство).
  • coarse (основным механизмом ввода устройства входит указательное устройство ограниченной точности, например, сенсорные экраны и системы обнаружения движения по типу Kinect - периферийные устройства для Xbox).
  • fine (основной механизм ввода устройства включает в себя точное указывающее устройство, например, мыши, тачпады и устройства для рисования стилусом).
• any-pointer (аналогичен pointer, но используется для запроса возможности любого доступного механизма ввода).
  Значения: none | coarse | fine


• hover (используется для запроса на способность пользователя навести курсор на элемент на странице. Если устройство имеет несколько механизмов ввода, то функция должна отражать характеристики "первичного" механизма входного сигнала, который определяется браузером пользователя).
  Значения:
  • none (указывает, что основное указательное устроство не может навести курсор на элемент на странице, например, сенсорные экраны и экраны, которые используют для рисования стилусом).
  • hover (указывает, что основное указательное устроство может навести курсор на элемент на странице, например, мыши и устройства с физической точкой на экране, как контроллер Nintendo для Wii.).
• any-hover (аналогичен hover, но используется для запроса возможности любого доступного механизма наведения).
  Значения: none | hover


• color-gamut (описывает примерный диапазон цветов, которые поддерживаются UA и выходными устройствами).
  Значения:
  • srgb (выходное устройство может поддерживать примерно диапазон sRGB или более).
  • p3 (выходное устройство может поддерживать примерно диапазон, указанный DCIP3 цветового пространства или более).
  • rec2020 (выходное устройство может поддерживать примерно диапазон, указанный в ITU-R рекомендации BT.2020 цветового пространства или более).
  
  
• update (функция средства обновления используется для запроса на способность устройства вывода изменить внешний вид содержимого после его рендеринга).
  Значения:
  • none (макет не может быть обновлен, например, для документов, напечатанных на бумаге).
  • slow (макет может динамически меняться в соответствии с обычными правилами CSS, но выходное устройство не в состоянии достаточно быстро отобразить изменения, чтобы восприниматься как плавная анимация, например: e-ink экраны).
  • fast (макет может динамически изменяться в соответствии с обычными правилами CSS и выходное устройство не ограничено в скорости, поэтому такие эффекты как CSS анимация могут быть использованы, например: экраны компьютера.).
  
  
• overflow-block (определяет как выходные устройства обрабатывают содержимое, которое не помещается в область просмотра по оси блока)
  Значения:
  • none (любое переполнение контента просто не отображается, например, рекламные щиты).
  • scroll (позоляет пользователю прокрутить содержание, например, экраны компьютеров).
  • paged (содержимое разделено на отдельные страницы, содержимое, выходящее за пределы одной страницы в оси блока отображается на следующей странице, например, принтеры или устройства для чтения).
  
  
• overflow-inline (описывает поведение устройства, когда содержимое превышает начальный содержащий блок по inline оси.)
  Значения:
  • none (любое переполнение контента просто не отображается).
  • scroll (позоляет пользователю прокрутить содержание).

Отличия HTML 4.01 от HTML 5

Для новых стилей ориентируйтесь на область просмотра и возможности устройства, например (hover: hover), (pointer: coarse), (prefers-reduced-motion: reduce) и (prefers-color-scheme: dark). Современный синтаксис диапазонов и логических условий разобран в справочнике @media. Тип speech не означает, что обычная программа экранного доступа переключит браузер на отдельную таблицу стилей.

Примеры, попробуйте сами

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="print.css" media="print" />
    <title>Стили печати</title>
  </head>
  <body>
    <h1>Моя страница</h1>
    <p>Содержимое документа.</p>
  </body>
</html>