CSS 媒体功能 - forced-colors

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

可能的值

none − 这表示未启用强制颜色模式。
active - 这表示已启用强制颜色模式。浏览器提供 CSS 系统颜色关键字，并通过考虑 Canvas 系统颜色的亮度来设置 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 attribute	SVG 元素的填充颜色。
SVG stroke attribute	SVG 元素的描边颜色。

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

属性	强制值
box-shadow	none
text-shadow	none
background-image	none (对于非 URL 值)
color-scheme	light dark
scrollbar-color	auto

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

CSS forced-colors - 无

以下示例演示了 forced-colors： none 媒体功能的使用，该功能将在所有设备上使正文元素变为黑色，背景为白色。但是，在未启用强制颜色模式的设备上，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 - 活动值

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

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


<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>

打印本页