monochrome
CSS
media feature
can be used to test the number of bits per pixel in the monochrome frame buffer of the output device.
monochrome
feature is specified as an
<integer>
representing the number of bits per pixel in the monochrome frame buffer. If the device is not a monochrome device, the value is zero. It is a range feature, meaning that you can also use the prefixed
min-monochrome
and
max-monochrome
variants to query minimum and maximum values, respectively.
<p class="mono">Your device supports monochrome pixels!</p> <p class="no-mono">Your device doesn't support monochrome pixels.</p>
p {
display: none;
}
/* Any monochrome device */
@media (monochrome) {
p.mono {
display: block;
color: #333;
}
}
/* Any non-monochrome device */
@media (monochrome: 0) {
p.no-mono {
display: block;
color: #ee3636;
}
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
Media Queries Level 4
The definition of 'monochrome' in that specification. |
候选推荐 | The value can now be negative, in which case it computes to false. |
|
Media Queries
The definition of 'monochrome' in that specification. |
推荐 | Initial definition. The value must be nonnegative. |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
monochrome
media feature
|
Chrome 完整支持 1 | Edge 完整支持 79 | Firefox 完整支持 2 | IE 不支持 No | 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 |
完整支持
不支持