CSS-свойство `forced-color-adjust`

Свойство forced-color-adjust CSS позволяет авторам исключать определённые элементы из режима принудительных цветов. В результате управление этими значениями возвращается CSS.

Синтаксис

forced-color-adjust: auto;
forced-color-adjust: none;
forced-color-adjust: preserve-parent-color;

/* Global values */
forced-color-adjust: inherit;
forced-color-adjust: initial;
forced-color-adjust: revert;
forced-color-adjust: revert-layer;
forced-color-adjust: unset;

Значения

Для этого свойства указывается одно из следующих ключевых слов:

auto

Цвета элемента изменяются пользовательским агентом в режиме принудительных цветов. Это значение по умолчанию.

none

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

preserve-parent-color

В режиме принудительных цветов, если свойство color наследуется от родителя (то есть отсутствует каскадное значение или каскадное значение — currentColor, inherit либо другое ключевое слово, наследующее значение от родителя), то для него вычисляется используемое значение цвета свойства color родительского элемента. Во всех остальных случаях это значение ведёт себя так же, как none.

Примечания по использованию

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

Формальное определение

Формальный синтаксис

forced-color-adjust = 
  auto |
  none |
  preserve-parent-color

Примеры

Сохранение цветов

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

Используя медиафункцию forced-colors, можно добавить другие оптимизации для режима принудительных цветов наряду со свойством forced-color-adjust.

CSS

.box {
  border: 5px solid grey;
  background-color: #cccccc;
  width: 300px;
  margin: 20px;
  padding: 10px;
}

@media (forced-colors: active) {
  .forced {
    forced-color-adjust: none;
  }
}

HTML

<div class="box">
  <p>This is a box which should use your color preferences.</p>
</div>

<div class="box forced">
  <p>This is a box which should stay the colors set by the site.</p>
</div>

Результат

На следующем снимке экрана показано изображение выше в режиме высокой контрастности Windows:

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

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

См. также

• Оформление для режима высокой контрастности Windows с использованием стандартов для принудительных цветов.
• print-color-adjust