CSS предпочитает пониженную прозрачность

Оптимизируйте и настройте для пользователей, которые предпочитают непрозрачный пользовательский интерфейс.

Adam Argyle

В 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 для создания полупрозрачного синего фона. Вложенный медиа-запрос проверяет предпочтения пользователя по уменьшению прозрачности и, если он равен true, изменяет переменную opacity на 95% — почти непрозрачное значение непрозрачности.

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

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

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

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

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

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

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

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

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

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

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

.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%;
  }
}

Заголовок героя

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

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

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

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

.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%)
    );
  }
}

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

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

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

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

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

Инструменты разработчика

Инструменты разработчика Chrome могут эмулировать эту настройку для уменьшения прозрачности (и многого другого) на вкладке «Визуализация» . В следующем видео показано, как переключать медиа-запросы «предпочитает цветовую схему» и «предпочитает пониженную прозрачность», чтобы продемонстрировать светлые, темные, прозрачные и пониженные варианты прозрачности карты из матового стекла.