inverted-colors
CSS
media feature
can be used to test whether the
用户代理
or underlying OS is inverting colors.
inverted-colors
feature is specified as a keyword value chosen from the list below.
none
Colors are displayed normally.
inverted
All pixels within the displayed area have been inverted.
<p>If you're using inverted colors, this text should be blue on white (the inverse of yellow on black). If you're not, it should be red on light gray.</p> <p>If the text is gray, your browser doesn't support the `inverted-colors` media feature.</p>
p {
color: gray;
}
@media (inverted-colors: inverted) {
p {
background: black;
color: yellow;
}
}
@media (inverted-colors: none) {
p {
background: #eee;
color: red;
}
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
Media Queries Level 5
The definition of 'inverted-colors' in that specification. |
编者草案 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
inverted-colors
media feature
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 完整支持 9.1 | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 完整支持 10 | Samsung Internet Android 不支持 No |
完整支持
不支持