prefers-reduced-transparency

{{SeeCompatTable}}

Ознака медіа CSS prefers-reduced-transparency (віддає перевагу зниженій прозорості) використовується для з'ясування того, що користувач ввімкнув на своєму пристрої налаштування для зниження прозорих чи напівпрозорих шарових ефектів, що на цьому пристрої застосовуються. Ввімкнення такого налаштування може допомогти покращити контрастність та читабельність для деяких користувачів.

Синтаксис

no-preference

Позначає те, що користувач не вказав на пристрої своїх уподобань. Це значення – ключове слово у булевому контексті розцінюється як хибність.

reduce

Позначає те, що користувач увімкнув на своєму пристрої налаштування для мінімізації кількості прозорих чи напівпрозорих шарових ефектів.

Користувацькі налаштування

У Firefox запит reduce враховується, якщо існує відповідне системне налаштування, інакше – він увімкнений, якщо також ввімкнено зниження рухів:

  • У GTK/GNOME: Налаштування > Доступність > Бачення > Зниження анімації увімкнено.

    • У старіших версіях GNOME – GNOME Tweaks > Загальна вкладка (або Зовнішній вигляд, залежно від версії) > Анімації вимкнено.
    • Інший варіант – додати gtk-enable-animations = false до блоку [Settings] файлу конфігурації GTK 3.

  • У Plasma/KDE: Налаштування системи > Поведінка робочого простору -> Загальна поведінка > "Швидкість анімації" встановлена максимальною – "Миттєво".

  • У Windows 10: Налаштування > Персоналізація > Кольори > Ефекти прозорості.

  • У Windows 11: Налаштування > Персоналізація > Кольори > Ефекти прозорості.

  • У macOS: Налаштування системи > Доступність > Відображення > Зниження прозорості.

  • В iOS: Налаштування > Доступність > Рух.

  • В Android 9+: Налаштування > Доступність > Відключити анімацію.

Приклади

Цей приклад усталено містить напівпрозору рамку. Якщо на пристрої ввімкнено налаштування для зниження прозорості, рамка стає менш прозорою.

HTML

<div class="translucent">напівпрозора рамка</div>

CSS

.translucent {
  opacity: 0.4;
}

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

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

Якщо ви це бачите — значить, щось трапилося з цією сторінкою.

Сумісність із браузерами

Якщо ви це бачите — значить, щось трапилося з цією сторінкою.

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.