prefers-reduced-transparency

Одно из значений директивы @media для проверки пользовательских настроек. Отслеживает отключение или уменьшение прозрачности в операционной системе.

        
          
          article span {  background: #18191C;  opacity: 0.9;}@media (prefers-reduced-transparency: reduce) {  article span {    opacity: 1;  }}
          article span {
  background: #18191C;
  opacity: 0.9;
}

@media (prefers-reduced-transparency: reduce) {
  article span {
    opacity: 1;
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Задайте после @media в скобках условие prefers-reduced-transparency с одним из значений:

• no-preference — прозрачность в системе по умолчанию.
• reduce — прозрачность уменьшена или полностью выключена.

С помощью prefers-reduced-transparency можно отменять прозрачность, заданную фону через opacity, перемещать текст под блок с фоновыми картинками, паттернами и так далее.

На сайтах часто встречаются карточки с фоновыми картинками и текстом. В примере для первой карточки используем стили без prefers-reduced-transparency, для второй устанавливаем специальные CSS-правила на случай отключения прозрачности. Они переносят текст под картинку.

        
          
          <div class="with-mediaquery">  <code>reduce</code>  <article>    <img src="./images/walking.png" alt="">    <span>      <h3>Прогулки</h3>      <p>Выгуляем животных вместо вас.</p>    </span>  </article></div>
          <div class="with-mediaquery">
  <code>reduce</code>
  <article>
    <img src="./images/walking.png" alt="">
    <span>
      <h3>Прогулки</h3>
      <p>Выгуляем животных вместо вас.</p>
    </span>
  </article>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          @media (prefers-reduced-transparency: reduce) {  .with-mediaquery span {    padding: 0;    background: unset;  }  .with-mediaquery article > * {    grid-area: unset;  }}
          @media (prefers-reduced-transparency: reduce) {
  .with-mediaquery span {
    padding: 0;
    background: unset;
  }

  .with-mediaquery article > * {
    grid-area: unset;
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если любите глассморфизм, то prefers-reduced-transparency тоже спешит на помощь. На этот раз покажем эффект матового стекла только тогда, когда не изменена настройка прозрачности.

        
          
          article {  color: #FFFFFF;  background-color: #18191C;}@media (prefers-reduced-transparency: no-preference) {  article {    color: #000000;    backdrop-filter: blur(15px);    background: hsl(none none 100% / 20%);  }}
          article {
  color: #FFFFFF;
  background-color: #18191C;
}

@media (prefers-reduced-transparency: no-preference) {
  article {
    color: #000000;
    backdrop-filter: blur(15px);
    background: hsl(none none 100% / 20%);
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Условие prefers-reduced-transparency можно тестировать в браузере или отключив прозрачность в системе.

В Chrome эмуляция prefers-reduced-transparency находится в дополнительной вкладке «Отрисовка» (Rendering) в инструменте разработчика. Чтобы добраться до неё, откройте список с дополнительными настройками (кнопка с тремя точками рядом с кнопкой закрытия), а потом разверните список «Другие инструменты» (More tools).

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

Windows 10

Настройки > Персонализация > Цвета > Эффекты прозрачности

Windows 11

Настройки > Универсальный доступ > Визуальные эффекты > Эффекты прозрачности

macOS

Системные настройки > Универсальный доступ > Дисплей > Уменьшить прозрачность

iOS

Настройки > Основные > Универсальный доступ > Экран и размер текста > Уменьшить прозрачность

Android

Настройки > Специальные возможности > Улучшение видимости > Уменьшить прозрачность и размытие

Прозрачный фон увеличивает когнитивную нагрузку на пользователей и уменьшает уровень читаемости текста. Этой настройкой пользуются:

• Люди с особенностями зрения. Например, с астигматизмом или сниженным зрением.
• Пользователи с когнитивными особенностями. К примеру, люди с дислекси́ей или синдром дефицита внимания.
• Люди с мигренями и головными болями.