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 ouput device is grid-based.
Examples
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; } }
Result
Specifications
Specification | Status | Comment |
---|---|---|
Media Queries Level 4 The definition of 'grid' in that specification. |
Candidate Recommendation | No change. |
Media Queries The definition of 'grid' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
grid media feature | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 2 | IE Full support 10 | Opera Full support 10 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support