CSS медиа запрос prefers-reduced-transparency

В Chrome 118 появилась новая возможность медиа-запроса prefers-reduced-transparency из CSS Media Queries 5. Непрозрачные интерфейсы могут вызывать головную боль или мешать зрительному восприятию при различных нарушениях зрения. Именно поэтому в Windows, macOS и iOS существуют системные настройки, позволяющие уменьшить или убрать прозрачность пользовательского интерфейса.

С помощью этого нового медиа-запроса в браузере, CSS может адаптировать интерфейс для пользователей, указывающих на необходимость уменьшения прозрачности:

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

В приведённом примере переменная CSS содержит значение непрозрачности 50%, используемое в HSL для создания полупрозрачного синего фона. Вложенный медиа-запрос проверяет, не желает ли пользователь уменьшить прозрачность, и, если значение истинно, изменяет переменную opacity до 95% — почти непрозрачного значения непрозрачности.

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

Варианты использования снижения прозрачности

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

Полупрозрачные надписи на изображениях

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

See the Pen

Прозрачные модальные окна, уведомления и всплывающие подсказки

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

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

See the Pen

Адаптивное матовое стекло

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

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

See the Pen

Заголовок "hero"

Распространённым элементом домашней страницы является жирная надпись, наложенная на зацикленное видео или анимированное изображение. В приведённом ниже примере используется красочное полупрозрачное градиентное наложение и бесконечно анимированное фоновое изображение. Хотя это может привлечь внимание многих, у многих возникнут проблемы из-за низкого контраста с прозрачностью и не контролируемого движения.

See the Pen

Это можно исправить с помощью двух медиа-запросов CSS: prefers-reduced-motion и prefers-reduced-transparency. В медиа-запросе "уменьшенное движение" можно применить бесконечную анимацию только в том случае, если пользователь указал no-preference для уменьшенного движения, сигнализируя коду, что движение для этого пользователя является нормальным.

Кроме того, с помощью медиа-запроса "уменьшения прозрачности" можно уменьшить непрозрачность, чтобы цвет наложения составлял почти 100%. Теперь сообщение читается легко, без отвлекающих движений и проблем с контрастностью.

See the Pen

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

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

See the Pen

Аддитивный и субтрактивный взгляды на пользовательские предпочтения

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

@media (prefers-reduced-transparency: no-preference) {
  …
}

Разработчики и дизайнеры часто "отступают" от пользовательского опыта, основываясь на этих предпочтениях, руководствуясь субтрактивным менталитетом. Это проявляется в медиа-запросах в виде проверки на "уменьшение", при котором что-то из пользовательского интерфейса удаляется. В примере показан аддитивный подход, когда движение и прозрачность добавляются, если пользователь не против.

Такой подход помогает продумать здоровый базовый опыт, который будет удобен сам по себе. Затем, если пользователь не против, можно дополнить этот опыт.

Важно! Аддитивная стратегия лучше всего работает при хорошей браузерной поддержке.

Devtools

В инструментах Chrome DevTools на вкладке "Rendering" можно эмулировать это предпочтение уменьшенной прозрачности (и не только). В следующем видеоролике показано, как переключить медиа-запросы prefers-color-scheme и prefers-reduced-transparency, чтобы продемонстрировать светлый, тёмный, прозрачный и уменьшенный варианты прозрачности карты из матового стекла.

https://codepen.io/web-dot-dev/pen/dyaojxr