forced-color-adjust

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

Синтаксис

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

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

Значение свойства forced-color-adjust должно быть одним из следующих ключевых слов.

Значения

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

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

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

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

Начальное значение	`auto`
Применяется к	всем элементам и тексту
Наследуется	да
Вычисленное значение	как указано
Тип анимации	Не анимируемо

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

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

Примеры

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

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

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

CSS

.box {
  border: 5px solid grey;
  background-color: #ccc;
  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:

The example above in high contrast mode shows the first box with a black background the second with the grey background of the CSS.

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

Спецификация
CSS Color Adjustment Module Level 1 # forced-color-adjust-prop

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`forced-color-adjust`	89	7912	113	75	Нет	89	113	63	Нет	15.0	89
`auto`	89	79	113	75	Нет	89	113	63	Нет	15.0	89
`none`	89	79	113	75	Нет	89	113	63	Нет	15.0	89
`preserve-parent-color`	106	106	Нет	92	Нет	106	Нет	72	Нет	20.0	106

См. также

© 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/forced-color-adjust