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>

列印頁面