The scan
CSS @media
media feature can be used to apply styles based on the scanning process (if any) utilized by the output device. The word scanning used in this context does not refer to an image scanner, such as one used to digitize a photograph. Rather, it means the process by which an image is painted onto a television screen (or other device).
Syntax
The scan
feature is specified as a single keyword value chosen from the list below.
interlace
- The device draws odd lines and even lines alternately. Some televisions use interlaced scanning.
progressive
- The device draws all lines in sequence. All computer screens use progressive scanning.
Example
HTML
<p>If your screen uses interlaced rendering, this text should be in a sans-serif font. If your screen uses progressive scanning, you should see a serif font.</p>
CSS
p { font-family: cursive; } @media (scan: interlace) { p { font-family: sans-serif; } } @media (scan: progressive) { p { font-family: serif; } }
Result
Specifications
Specification | Status | Comment |
---|---|---|
Media Queries Level 4 The definition of 'scan' in that specification. |
Working Draft | No change. |
Media Queries The definition of 'scan' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | ? | No support | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | No support | ? | ? | ? |