The grid
CSS @media
media feature can be used to apply styles based on whether the output device uses a grid-based or bitmap-based screen.
Syntax
The grid
feature is specified as a <mq-boolean>
value (0
or 1
) representing whether or not the ouput device is grid-based.
Example
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; } } @media (grid: 1) { .unknown { color: lightgray; } .grid { color: red; } }
Result
Specifications
Specification | Status | Comment |
---|---|---|
Media Queries Level 4 The definition of 'grid' in that specification. |
Working Draft | No change. |
Media Queries The definition of 'grid' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | ? | (Yes) | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |