inverted-colors
inverted-colors CSS 媒體特性 用於測試使用者代理或底層作業系統是否已反轉所有顏色。
顏色反轉可能會產生不愉快副作用，例如陰影變成高光，這會降低內容的可讀性。使用此媒體特性，你可以檢測是否正在發生反轉，並相應地設定內容樣式，同時尊重使用者偏好。
語法
css
/* Keyword value */
@media (inverted-colors: inverted) {
/* styles to apply if inversion of colors is detected */
}
inverted-colors 特性以下列關鍵詞值之一指定
示例
如果檢測到顏色反轉，則應用樣式
此示例演示了 inverted-colors 媒體特性關鍵詞值以及當 inverted-colors 媒體特性不受支援時的效果。
HTML
html
<p>
If color inversion is detected, this text will appear blue on white (the
inverse of yellow on black) along with a line over the text. If no color
inversion is happening, the text will appear red on light gray without the
line over the text.
</p>
<p>
If the text is gray and no overline is present, it means your browser doesn't
support the
<code>inverted-colors</code> media feature.
</p>
CSS
css
p {
color: gray;
}
@media (inverted-colors: inverted) {
p {
background: black;
color: yellow;
text-decoration: overline;
}
}
@media (inverted-colors: none) {
p {
background: #eeeeee;
color: red;
}
}
結果
規範
| 規範 |
|---|
| 媒體查詢 Level 5 # inverted |
瀏覽器相容性
載入中…