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

Описание

Атрибут media для тега <link> определяет тип устройства или условия отображения, для которых предназначен связанный ресурс. Позволяет загружать разные CSS-файлы или другие ресурсы в зависимости от характеристик устройства (ширина экрана, ориентация и др.).

Пример использования:
<!-- Разные стили для разных устройств --> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)"> <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px)"> <!-- Стили для печати --> <link rel="stylesheet" href="print.css" media="print"> <!-- Предзагрузка с учетом медиа-условий --> <link rel="preload" as="image" href="large.jpg" media="(min-width: 1024px)">

Типичные медиа-запросы:

Тип запроса Пример Описание
Тип устройства media="screen" Только для экранов
Ширина экрана media="(max-width: 600px)" Для устройств шириной до 600px
Ориентация media="(orientation: portrait)" Только портретная ориентация
Плотность пикселей media="(min-resolution: 2dppx)" Для экранов высокой плотности

Особенности работы:

  • Браузер загружает все ресурсы, но применяет только соответствующие текущим условиям
  • Может использоваться с различными rel (stylesheet, preload, prerender)
  • Синтаксис соответствует CSS @media-правилам
  • Для сложных условий можно комбинировать через запятую (логическое ИЛИ)

Пример комбинированных условий:

<link rel="stylesheet" href="special.css" media="screen and (min-width: 768px) and (orientation: landscape), projection">

Рекомендации по использованию:

  • Используйте для адаптивного дизайна вместо условных комментариев
  • Оптимизируйте количество медиа-запросов (объединяйте похожие)
  • Для критического CSS используйте media="all"
  • Проверяйте работу в разных браузерах и устройствах
  • Сочетайте с атрибутом onload для неблокирующей загрузки

Оптимизация производительности:

<!-- Неблокирующая загрузка некритических стилей --> <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

Ошибки и проверка:

<!-- Неправильно: синтаксическая ошибка --> <link rel="stylesheet" href="styles.css" media="screen and max-width: 600px"> <!-- Неправильно: несуществующий тип устройства --> <link rel="stylesheet" href="styles.css" media="handheld"> <!-- Правильно: валидный медиа-запрос --> <link rel="stylesheet" href="styles.css" media="screen and (max-width: 600px)">

Примечание: Атрибут media является мощным инструментом для создания адаптивных веб-приложений. Для современных проектов рассмотрите использование CSS-методологий (например, Mobile First) в сочетании с этим атрибутом для оптимальной загрузки ресурсов.