prefers-reduced-transparency
Ограниченная доступность
Эта функция не относится к базовому уровню, так как она не работает во всех самых популярных браузерах.
Экспериментальная функция: Это экспериментальная технология
Перед использованием в производственной среде внимательно проверьте таблицу совместимости с браузерами.
Средство prefers-reduced-transparency CSS средство проверки медиа используется для определения того, включил ли пользователь на своём устройстве настройку для уменьшения прозрачности или полупрозрачности слоёв, используемых на устройстве. Включение такой настройки может помочь улучшить контрастность и читаемость для некоторых пользователей.
Синтаксис
no-preference-
Указывает, что пользователь не выбрал никаких предпочтений относительно прозрачности на своём устройстве. Это ключевое значение в контексте булевых значений считается ложным.
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;
}
}
Спецификации
Совместимость с браузерами
| Десктоп | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari в iOS | Samsung Internet | WebView Android | |
prefers-reduced-transparency |
118 | 118 | 113 | 104 | Нет | 118 | Нет | 79 | Нет | 25.0 | 118 |
См. также
- Медиа запрос CSS prefers-reduced-motion
- Использование медиа запросов
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency
