color
CSS
media feature
can be used to test the number of bits per color component (red, green, blue) of the output device.
color
feature is specified as an
<integer>
value that represents the number of bits per color component (red, green, blue) of the output device. If the device is not a color device, the value is zero. It is a range feature, meaning that you can also use the prefixed
min-color
and
max-color
variants to query minimum and maximum values, respectively.
注意： If the various color components are represented by different numbers of bits, the smallest number is used. For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. If the device uses indexed colors, the minimum number of bits per color component in the color table is used.
见 Applying color to HTML elements using CSS to learn more about using CSS to apply color to HTML.
<p>This text should be black on non-color devices, red on devices with a low number of colors, and greenish on devices with a high number of colors.</p>
p {
color: black;
}
/* Any color device */
@media (color) {
p {
color: red;
}
}
/* Any color device with at least 8 bits per color component */
@media (min-color: 8) {
p {
color: #24ba13;
}
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
Media Queries Level 4
The definition of 'color' in that specification. |
候选推荐 | The value can now be negative, in which case it computes to false. |
|
Media Queries
The definition of 'color' in that specification. |
推荐 | Initial definition. The value must be nonnegative. |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
color
media feature
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 2 | IE 完整支持 9 | Opera 完整支持 10 | Safari 完整支持 3 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持
color
property
<color>
data unit