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

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

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

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

1

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

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

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

Самыми популярными медиазапросами в Интернете являются запросы, связанные с шириной области просмотра. Но даже здесь у вас есть выбор. Можно использовать медиафункцию max-width для применения стилей ниже определенной ширины, а можно использовать медиафункцию min-width для применения стилей выше определенной ширины.

1
2
3
4
5
6
7
8
9

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

1
2
3
4
5
6

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

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

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

1
2
3
4
5

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

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

1
2
3
4
5
6
7
8

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

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

1
2
3
4
5
6
7
8
9

@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.

1
2
3
4
5
6

@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 бывает трех видов: минимальное, максимальное и точное.

1
2
3
4
5
6
7
8
9

@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, означает, что экран обновляется достаточно быстро для обработки анимации и переходов.

1
2
3
4
5
6
7
8
9

@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. Если кто-то добавит ваш сайт на домашний экран, то он запустится без какого-либо интерфейса браузера. Возможно, вы решите отобразить для таких пользователей кнопку "Назад".

1
2
3
4
5
6
7
8

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

Цвет¶

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

1
2
3
4
5
6

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

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

1
2
3
4
5
6

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

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

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

1
2
3
4
5
6
7
8

.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.

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

1
2
3
4
5
6
7
8
9

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

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

В ближайшее время появятся новые медиа-функции.

Функции forced-colors и inverted-colors будут сообщать, используется ли на устройстве ограниченная или инвертированная цветовая палитра.

Медиафункция scripting позволяет корректировать CSS в зависимости от наличия JavaScript.

Медиафункция prefers-reduced-data позволит пользователям указывать, что они находятся на дозированном соединении, и отправлять меньший объем ресурсов.

Другие предложения пока находятся в стадии разработки. В следующем, заключительном модуле вы узнаете о предложении по созданию функции мультимедиа для работы с различными конфигурациями экранов.

Комментарии