Медиавозможность CSS `prefers-reduced-transparency`

Baseline Ограниченная доступность

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

Экспериментальная: Это экспериментальная технология
Перед использованием в рабочей среде внимательно ознакомьтесь с таблицей совместимости браузеров.

prefers-reduced-transparency — это CSS-медиавозможность, которая позволяет определить, включил ли пользователь на своём устройстве настройку уменьшения эффектов прозрачных или полупрозрачных слоёв. Включение такой настройки может помочь улучшить контрастность и читаемость для некоторых пользователей.

Синтаксис

no-preference: Указывает, что пользователь не установил никаких предпочтений на устройстве. В логическом контексте это ключевое слово имеет значение false.
reduce: Указывает, что пользователь включил на устройстве настройку уменьшения количества эффектов прозрачных или полупрозрачных слоёв.

Предпочтения пользователей

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

В Windows 10/11: Параметры > Персонализация > Цвета > Эффекты прозрачности.
В macOS: Системные настройки > Универсальный доступ > Дисплей > Уменьшить прозрачность.
В iOS: Настройки > Универсальный доступ > Дисплей и размер текста > Уменьшение прозрачности.

Примеры

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

HTML

<div class="translucent">translucent box</div>

CSS

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

Спецификации

Спецификация
Media Queries Level 5 # prefers-reduced-transparency

Совместимость браузеров

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari в iOS	Samsung Internet	WebView для Android	WebView в iOS
`prefers-reduced-transparency`	118	118	113	104	Нет	118	Нет	79	Нет	25.0	118	Нет

См. также

Медиазапрос CSS prefers-reduced-motion
Использование медиазапросов

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-transparency