forced-color-adjust

**forced-color-adjust** CSS 属性允许作者选择某些元素退出强制颜色模式。这样就可以将这些值的控制权恢复到 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

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

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 颜色调整模块级别 1
# forced-color-adjust-prop

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅