Медиа-функции

Адаптивный дизайн был бы невозможен без медиазапросов. До появления медиазапросов невозможно было определить, с каких устройств пользователи посещают ваш сайт. Дизайнерам приходилось делать предположения. Эти предположения были закодированы в дизайнах с фиксированной шириной или резиновых макетах.

Всё изменилось с появлением медиазапросов . Впервые дизайнеры смогли пойти навстречу людям. Дизайнеры смогли адаптировать макеты под устройства пользователей.

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

@media all
@media screen
@media print
@media speech

С другой стороны, медиа-функции значительно расширились. Теперь дизайнеры могут идти навстречу пользователям, адаптируя дизайн не только под размер экрана.

Размеры области просмотра

Безусловно, самые популярные медиазапросы в интернете связаны с шириной области просмотра. Но даже здесь у вас есть выбор. Вы можете использовать медиафункцию max-width для применения стилей к объектам с шириной ниже определённого значения или медиафункцию min-width для применения стилей к объектам с шириной выше определённого значения.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Лично мне нравится использовать min-width . Я применяю стили макета аддитивно. Я добавляю новые правила макета в каждой точке останова, а не отменяю предыдущие.

Этот аддитивный подход также работает и для высоты. Используя свойство min-height вы можете добавлять дополнительные правила по мере увеличения доступной высоты области просмотра. Например, у вас может быть элемент заголовка, который вы хотите прикрепить к верхней части окна браузера, если есть достаточно места по вертикали.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

Но при желании вы можете использовать функцию max-height медиа-контента. В этом случае заголовок по умолчанию закреплен, но эта фиксация отключается, если вертикального пространства недостаточно.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

Выбор префиксов min- и max- применим не только к width и height . Функция aspect-ratio медиа-элементов предлагает тот же выбор. Она также предлагает версию без префикса, если вы хотите применить стили с точным соотношением ширины и высоты.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

Предоставление разных стилей для разных соотношений сторон может быстро выйти из-под контроля. Если вам не нужен такой тонкий уровень контроля, функция изменения orientation медиа может подойти вам лучше. Она имеет два возможных значения: portrait и landscape .

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

Хотя термины «книжная» и «альбомная» чаще всего используются для обозначения ориентации мобильных устройств, функция orientation медиафайлов не привязана к конкретному устройству. Полноэкранное окно браузера на типичном ноутбуке будет иметь значение landscape orientation .

Дисплеи

Разные дисплеи имеют разную плотность пикселей, измеряемую в dpi (точках на дюйм). Вы можете настроить стили для разной плотности пикселей с помощью функции « resolution ». Как и aspect-ratio , resolution бывает трёх видов: минимальное, максимальное и точное.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

Возможно, вам никогда не придётся использовать медиазапросы, resolution . Плотность пикселей обычно важна только для изображений, а адаптивные изображения — это способ управления плотностью пикселей непосредственно в HTML.

С другой стороны, CSS — это место, где вы определяете анимацию и переходы. Вы можете настроить эти анимации и переходы в соответствии с различной частотой обновления, используя функцию update медиа. Эта функция возвращает одно из трёх значений: none , slow и fast .

update none означает, что частота обновления отсутствует. Например, распечатанную страницу невозможно обновить.

Значение update slow означает, что дисплей не может обновляться быстро. Примером экрана с низкой частотой обновления является дисплей на электронных чернилах.

Значение update fast означает, что дисплей обновляется достаточно быстро, чтобы обрабатывать анимацию и переходы.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Не все аспекты отображения связаны с аппаратными возможностями. В модуле, посвящённом темам , вы узнали, как определять свойства в файле манифеста веб-приложения . Одно из таких свойств называется display , и ему можно присвоить значения fullscreen , standalone , minimum-ui ) или browser . Соответствующая функция display-mode мультимедиа позволяет настраивать стили для этих различных вариантов.

Допустим, вы указали в манифесте своего веб-приложения значение display — standalone . Если кто-то добавит ваш сайт на свой главный экран, он запустится без браузерного интерфейса. Возможно, вы решите отобразить для таких пользователей кнопку «Назад».

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

Цвет

Существует множество медиа-функций для запроса цветовых возможностей устройства. Если вы хотите настроить стили для любого дисплея, выводящего только оттенки серого, вы можете использовать функцию monochrome медиа» без каких-либо значений.

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

Имеется соответствующая функция color носителя.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

Для цветных экранов можно создавать запросы с такими медиа-характеристиками, как color-gamut , color-index ) или dynamic-range . Все они предоставляют подробную информацию о цветовых возможностях экрана.

В этом примере значения цветов обновляются в соответствии с функцией dynamic-range , которая определяет сочетание максимальной яркости, глубины цвета и контрастности дисплея. Возможные значения: standard или high . Экрану высокой чёткости, который сообщает значение dynamic-range high присваивается другое цветовое пространство с помощью новой функции CSS color() .

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

Взаимодействие

Медиа-функции также могут сообщать о типе механизма ввода, используемого для взаимодействия с вашим сайтом: hover , any-hover , pointer и any-pointer . Подробнее см. в модуле о взаимодействии .

Запросы пользовательских предпочтений

Используя CSS, вы можете сотрудничать с пользователями, чтобы обеспечить им удобный доступ к вашему контенту. В этом уроке вы узнали, как применять различные CSS в зависимости от размеров и характеристик устройства пользователя. Кроме того, вы можете применять различные CSS в зависимости от настроек пользователя.

Темный и светлый режим

Вы можете настроить светлую или тёмную тему оформления в соответствии с предпочтениями пользователя. Многие пользователи устанавливают это в качестве системной настройки.

Настройка цветовой схемы для элементов пользовательского интерфейсаx

Браузер предоставляет цвета по умолчанию для таких элементов, как полосы прокрутки и элементы форм. Вы можете указать, использовать ли светлую тему с помощью color-scheme: light или тёмную тему с помощью color-scheme: dark . Вы также можете указать, что страница поддерживает обе темы, с помощью color-scheme: light dark . Вы можете задать эту цветовую схему для всей страницы в элементе :root или html , или переопределить её для отдельных элементов.

Вы также можете задать meta color-scheme , чтобы задать цветовую схему страницы до загрузки стилей. Если вы установите color-scheme: normal для элемента на странице, будет использоваться значение color-scheme , заданное в этом метатеге.

<meta name="color-scheme" content="dark light">

медиа-функция prefers-color-scheme

Вы также можете определить пользовательские стили в ответ на предпочтительную цветовую тему пользователя с помощью медиа-запроса prefers-color-scheme .

light-dark

Если вы предоставляете пользователям возможность выбора между светлой и темной темой, вам может показаться слишком многословным задавать каждый цвет внутри медиа-запроса. light-dark() позволяет указать оба цвета в одном свойстве.

Для этого необходимо установить color-scheme: light dark для элемента или одного из его предков. Сначала задается цвет для светлого режима, а затем — для темного.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

Если в системных настройках пользователя задан запрос светлого режима, заголовок будет чёрным. Если выбран тёмный режим, заголовок будет белым.

Настройки контрастности

Пользователям может быть проще читать контент с высокой или низкой контрастностью, и они могут настроить свою систему так, чтобы она заменяла вашу тему, выбирая ту, которая им больше подходит. Ваша задача — обеспечить, чтобы ваш сайт по-прежнему соответствовал их предпочтениям.

Возможно, вы помните, что в модуле Cascade локальные пользовательские стили !important могут переопределять авторские стили, предоставляемые веб-страницей. Это позволяет пользователям использовать стили, которые им больше подходят.

Принудительные цвета

В Windows предусмотрены «Контрастные темы», которые пользователи могут выбрать, чтобы переопределить темы на веб-сайте. Часто это темы с высокой контрастностью, которые могут быть в светлом или тёмном режиме. В CSS это называется принудительным выбором цветов, и в большинстве случаев ваш сайт будет вести себя в этом режиме ожидаемым образом. Кнопки, ссылки, поля ввода и другой контент будут использовать цвета темы.

Иногда вам может потребоваться изменить стили, например, если вы используете элементы нестандартным образом. Вы можете использовать медиазапрос @media (forced-colors: active) , чтобы применить стили, когда пользователь включил принудительное использование цветов.

В некоторых случаях стили сайта играют ключевую роль в понимании самого контента, например, в случае с палитрой цветов или графиком с цветовым ключом. Вы можете установить для элемента forced-color-adjust: none; чтобы отключить режим принудительной настройки цветов. Убедитесь, что вы отключили только определённые элементы, и убедитесь, что контент по-прежнему доступен в режиме принудительной настройки цветов.

Высокая контрастность

Некоторые пользователи также могут настроить свою систему на запрос увеличения контрастности. Вы можете изменить стили в ответ на запрос с помощью медиазапроса prefers-contrast: more .

Уменьшение движения

Вы можете отреагировать на предпочтения пользователя, связанные с уменьшением количества движений, с помощью медиазапроса prefers-reduced-motion . Он часто используется для создания альтернативных анимаций, избегающих резких движений, которые могут вызывать раздражение у людей с эпилепсией, вестибулярными нарушениями или мигренью. Подробнее читайте в разделе «Соображения при работе с анимацией» .

Скриптинг

Ваши пользователи могут посещать ваш сайт с отключенным JavaScript, и вы можете настроить CSS так, чтобы они по-прежнему могли получать доступ к вашему контенту с помощью scripting медиа-запроса.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

Проверьте свое понимание

Проверьте свои знания о медиа-функциях