The grid
CSS media feature can be used to test whether the output device uses a grid-based screen.
Most modern computers and smartphones have bitmap-based screens. Examples of grid-based devices include text-only terminals and basic phones with only one fixed font.
Syntax
The grid
feature is specified as a <mq-boolean>
value (0
or 1
) representing whether or not the output device is grid-based.
HTML
<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device! Neato!</p>
CSS
:not(.unknown) {
color: lightgray;
}
@media (grid: 0) {
.unknown {
color: lightgray;
}
.bitmap {
color: red;
text-transform: uppercase;
}
}
@media (grid: 1) {
.unknown {
color: lightgray;
}
.grid {
color: black;
text-transform: uppercase;
}
}
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
grid |
1 |
12 |
2 |
10 |
10 |
3 |
≤37 |
18 |
4 |
10.1 |
1 |
1.0 |