Мультимедийные возможности¶

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

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

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

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

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

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

Самыми популярными медиазапросами в Интернете являются запросы, связанные с шириной области просмотра. Но даже здесь у вас есть выбор. Можно использовать медиафункцию 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 не зависит от конкретного устройства. Полноэкранное окно браузера на обычном ноутбуке будет иметь значение orientation landscape.

Дисплеи¶

Различные дисплеи имеют разную плотность пикселей, измеряемую в 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, low и fast.

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

Значение update, равное low, означает, что дисплей не может обновляться быстро. Одним из примеров экрана с медленной частотой обновления является e-ink дисплей.

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

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

Не все аспекты отображения связаны с аппаратными возможностями. В модуле по тематизации вы видели, как определять свойства в файле web app manifest. Одно из этих свойств называется 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. Более подробная информация приведена в модуле по взаимодействию.

Предпочтения¶

Существует ряд медиазапросов, позволяющих реагировать на предпочтения пользователя: prefers-color-scheme, prefers-contrast и prefers-reduced-motion. Более подробную информацию см. в модулях theming и accessibility.

В одном медиазапросе можно комбинировать медиафункции. Можно настроить стили анимации таким образом, чтобы они применялись только в том случае, если устройство имеет высокую частоту обновления и пользователь не выразил предпочтение уменьшенному движению.

@media (update: fast) and (prefers-reduced-motion: no-preference) {
    a {
        transition-duration: 0.4s;
        transition-property: transform;
    }
    a:hover {
        transform: scale(150%);
    }
}

Предпочтения контраста¶

Кому-то удобнее читать с высоким или низким контрастом, и система может подменять тему сайта. Задача автора — чтобы сайт оставался рабочим и с этими настройками.

В модуле каскада локальные пользовательские стили с !important перекрывают стили страницы. Так человек оставляет оформление, которое ему подходит.

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

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

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

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

Высокий контраст¶

Запрос prefers-contrast: more отвечает на просьбу системы увеличить контраст.

Принудительные цвета заменяют палитру страницы, но сами по себе не означают запрос высокого контраста. Когда они включены, prefers-contrast будет more для высококонтрастных тем, less для низкоконтрастных и custom, если система не может определить уровень. Чтобы попасть к тем, кто просит высокий контраст, но не включает принудительные цвета, используйте @media (prefers-contrast: more) and (forced-colors: none).

Уменьшенное движение¶

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

Скрипты¶

Если JavaScript выключен, медиафункция scripting помогает оставить содержимое доступным.

@media (scripting: none) {
    /* стили, когда JavaScript выключен */
}

@media (scripting: initial-only) {
    /* стили, когда JavaScript доступен только при первой отрисовке, например при печати или на сервере */
}

@media (scripting: enabled) {
    /* стили, когда JavaScript включён */
}

Другие медиафункции¶

inverted-colors сообщает, инвертирована ли палитра устройства.

prefers-reduced-data позволяет указать дозированное соединение и отдавать меньше ресурсов. Поддержка пока не повсеместная.

В следующем модуле — конфигурации экрана.