HTML5 and Mobile Game Development - Learn HTML5 by Creating Fun Games - page 364

devices and, for obvious reasons, only for a single pixel, as opposed to the lowest
color component.
@media all and (monochrome: 1) {
h1 {
color: black;
border: 1px solid black;
padding: 20;
}
}
If the device is not monochrome, this attribute will match a value of zero. Also, we
can use the min and max modifier keyword to target ranges. Alternatively, a single
Boolean expression can be used to determine whether the device is monochrome or
not.
@media not all and (monochrome) {
h1 {
color: red;
border: 1px solid purple;
padding: 20;
}
}
// This query produces the exact same result as
the previous one
@media all and (color) {
h1 {
color: red;
border: 1px solid purple;
padding: 20;
}
}