語法
css
forced-color-adjust: auto;
forced-color-adjust: none;
forced-color-adjust: preserve-parent-color;
/* 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-
在強制顏色模式下，元素的顏色不會由使用者代理自動調整。
preserve-parent-color-
在強制顏色模式下，如果
color屬性從其父級繼承（即沒有層疊值，或者層疊值為currentColor、inherit> 或其他從父級繼承的關鍵詞），則它計算為其父級color屬性的已用顏色。在所有其他情況下，其行為與none相同。
用法說明
此屬性只應用於支援使用者顏色和對比度要求的更改。例如，如果您意識到使用者代理進行的顏色最佳化在高對比度或深色模式下會導致糟糕的使用者體驗。使用此屬性可以調整該模式下的結果，以提供更好的體驗。不應使用它來阻止尊重使用者的選擇。
正式定義
正式語法
forced-color-adjust =
auto |
none |
preserve-parent-color
示例
保留顏色
在下面的示例中，第一個框將使用使用者設定的配色方案。例如，在 Windows 高對比度模式黑色方案中，它將具有黑色背景和白色文字。第二個框將保留在 .box 類上設定的網站顏色。
透過使用 forced-colors 媒體特性，您可以與 forced-color-adjust 屬性一起新增任何其他強制顏色模式的最佳化。
CSS
css
.box {
border: 5px solid grey;
background-color: #cccccc;
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 高對比度模式下的上圖
規範
| 規範 |
|---|
| CSS 顏色調整模組級別 1 # forced-color-adjust-prop |
瀏覽器相容性
載入中…