CSS 媒体特性 - forced-colors

CSS forced-colors 媒体特性用于检查用户是否在其设备上启用了强制颜色模式。强制颜色模式是某些操作系统和设备上的设置，允许用户为其界面选择有限的颜色调色板。

可能的值

none − 这表示未启用强制颜色模式。
active − 这表示已启用强制颜色模式。浏览器通过考虑 Canvas 系统颜色的亮度来提供 CSS 系统颜色关键字并设置 prefers-color-scheme 媒体查询值，以便 Web 开发人员可以相应地调整其页面。

语法

forced-colors: none|active;

下表列出了受强制颜色模式影响的属性

属性	描述
color	文本的颜色。
background-color	背景的颜色。
text-decoration-color	文本装饰的颜色，例如下划线或上划线。
text-emphasis-color	文本强调的颜色，例如字母下方的点。
border-color	边框的颜色。
outline-color	轮廓的颜色。
column-rule-color	列规则的颜色，它是分隔多列布局中列的线。
-webkit-tap-highlight-color	点击高亮的颜色，即用户点击元素时出现的视觉提示。
SVG fill 属性	SVG 元素填充的颜色。
SVG stroke 属性	SVG 元素描边的颜色。

以下属性在强制颜色模式下具有独特的行为

属性	强制值
box-shadow	none
text-shadow	none
background-image	none（对于非 url 值）
color-scheme	light dark
scrollbar-color	auto

用户代理（如 Web 浏览器）根据元素的固有特性来确定元素的颜色，而不是根据 ARIA 角色之类的附加标签。例如，如果您向 div 元素添加 role="button"，它不会自动更改通常用于按钮的颜色。

CSS 强制颜色 - 无

以下示例演示了使用forced-colors: none 媒体特性将在所有设备上使 body 元素变为黑色，背景为白色。但是，在未启用强制颜色模式的设备上，body 元素将为蓝色，背景为粉红色 -

按照此链接上的步骤模拟强制颜色模式并测试此示例。

<html>
<head>
<style>
   body {
      color: black;
      background-color: white;
   }
   @media (forced-colors: none) {
      body {
         color: blue;
         background-color: pink;
      }
   }
</style>
</head>
<body>
   <h1>CSS Media Feature forced-colors: none</h1>
   <p>This text will be displayed in black on devices with forced colors mode disabled and in blue on devices with forced colors mode enabled.</p>
</body>
</html>

CSS forced-color - active 值

以下示例演示了使用forced-colors媒体特性在启用了强制颜色模式的设备上更改 body 元素及其内部文本的颜色 -

按照此链接上的步骤模拟强制颜色模式并测试此示例。

<html>
<head>
<style>
   body {
      color: blue;
      background-color: pink;
   }
   @media (forced-colors: active) {
      body {
      color: black;
      background-color: white;
      }
   }
</style>
</head>
<body>
   <h1>CSS Media Feature forced-colors: active</h1>
   <p>This text will be displayed in black on devices with forced colors mode disabled and in blue on devices with forced colors mode enabled.</p>
</body>
</html>

打印页面