The scan CSS media feature is used to apply CSS styles based on the scanning process of the output device.


The scan feature is specified as one of the following keyword values:


The output device uses "interlaced" rendering, where video frames alternate between specifying only the "even" lines on the screen and only the "odd" lines.


The output device renders content to the screen with no special treatment.


Most modern screens (and all computer screens) use progressive rendering, displaying each screen fully with no special treatment.

Interlacing was used by CRT monitors and some plasma TVs to enable the appearance of faster frames per second (FPS) while reducing bandwidth. With interlacing, video frames alternate between rendering the even lines and the odd lines on the screen, downloading and rendering only half the screen for each frame, exploiting the human image-smoothing ability so the brain simulates a higher FPS broadcast at half the bandwidth cost.

When targeting interlaced screens, avoid very fast movement across the screen and ensure animated details are wider than 1px to reduce flickering.



<p>This is a test.</p>


p {
  padding: 10px;
  border: solid;

@media screen and (scan: interlace) {
  p {
    background: #f4ae8a;
@media screen and (scan: progressive) {
  p {
    text-decoration: underline;
@media not screen and (scan: progressive) {
  p {
    border-style: dashed;
@media not screen and (scan: interlaced) {
  p {
    color: purple;



No specification found

No specification data found for
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

BCD tables only load in the browser

See also

  • The @media at-rule, which is used to specify the scan expression.
  • Using media queries to understand when and how to use a media query.