CSS scan Media Feature

What You’ll Learn

The scan media feature detects whether a display draws frames progressively or in interlaced lines. Learn the correct syntax and when this niche TV-focused query still matters.

Introduction

Every screen must draw video frames somehow. Progressive scanning paints the entire frame in one pass — this is what phones, laptops, and modern TVs use. Interlaced scanning paints odd-numbered lines first, then even-numbered lines. That technique saved bandwidth on older CRT televisions but can make thin text and fast animations look shaky.

The CSS scan media feature lets you detect which method the output device uses and adjust styles accordingly — for example, toning down animations on interlaced displays.

Definition and Usage

Write @media (scan: progressive) for full-frame displays or @media (scan: interlace) for interlaced output. Pair with the tv media type when you specifically target television browsers: @media tv and (scan: interlace).

📝 Syntax

Use (scan: progressive) or (scan: interlace) inside @media:

/* Progressive scanning (most modern screens) */
@media (scan: progressive) {
  /* Full-frame display styles */
}

/* Interlaced scanning (older TVs) */
@media (scan: interlace) {
  /* Interlace-friendly styles */
}

/* TV output with interlaced scanning */
@media tv and (scan: interlace) {
  /* TV-specific interlace styles */
}

Accepted Values

scan vs resolution

scan vs grid

Basic Example

body {
  background-color: #f1f5f9;
}

@media (scan: progressive) {
  body {
    background-color: #dbeafe;
  }
}

@media (scan: interlace) {
  body {
    background-color: #fef3c7;
  }
}

Default Value

There is no CSS default for scan queries. If no query matches, your base styles apply. In practice, nearly all modern browsers and devices behave as progressive.

Syntax Rules

• Use parentheses: (scan: progressive) — not @media scan { }.
• Do not use function syntax: scan(progressive) is invalid.
• Only two values exist: progressive and interlace.
• Combine with tv: @media tv and (scan: interlace) for television output.
• Always provide base styles that work without any scan query.

Related Topics

• resolution — pixel density queries
• print — printed output media type
• grid — CSS Grid layout capability

When to Use scan

Reach for scan when the display’s frame-drawing method affects readability:

• TV web apps — Simplify layouts on interlaced TV output.
• Reduce flicker — Disable or slow CSS animations on interlaced screens.
• Increase contrast — Use bolder colors and thicker borders on interlaced displays.
• Legacy hardware — Support set-top boxes or embedded browsers that report interlace.
• Educational demos — Teach how media features describe device capabilities beyond width and height.

Examples Gallery

Practice scan with progressive backgrounds, interlace colors, TV pairing, and animation reduction.

body {
  background-color: #f1f5f9;
}

@media (scan: progressive) {
  body {
    background-color: #dbeafe;
  }
}

body {
  background-color: #fff;
  color: #1e293b;
}

@media (scan: interlace) {
  body {
    background-color: #fef3c7;
    color: #78350f;
  }
}

.banner {
  padding: 1rem;
  background: #334155;
  color: #f8fafc;
}

@media tv and (scan: interlace) {
  .banner {
    background: #7c2d12;
    border: 2px solid #fbbf24;
  }
}

.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

@media (scan: interlace) {
  .pulse {
    animation: none;
    background: #16a34a;
  }
}

🛠 Usage Tips

• Defaults first — Write styles that work without any scan query; most users never hit interlace.
• Pair with tv — Use @media tv and (scan: interlace) when building TV-specific experiences.
• Reduce motion — Disable animations and parallax on interlaced output.
• Boost contrast — Thicker borders and larger text help on interlaced displays.
• Test on real TVs — Desktop browsers rarely expose interlace mode; TV browsers are the real testbed.

⚠️ Common Pitfalls

• Invalid syntax — @media scan { } and scan(progressive) are wrong; use (scan: progressive).
• Calling it a property — scan is a media feature inside @media, not a CSS property.
• Expecting desktop differences — Laptops and phones are progressive; you may never see interlace styles locally.
• Critical layout dependency — Do not hide essential content behind scan queries alone.
• Ignoring prefers-reduced-motion — Also respect user motion preferences alongside scan-based animation rules.

♿ Accessibility

• Reduce flicker — Disable flashing or pulsing animations on interlaced displays.
• Maintain contrast — Interlaced screens benefit from stronger color contrast, not weaker.
• Readable text size — Avoid ultra-thin font weights that break apart on interlaced lines.
• Combine with user prefs — Use prefers-reduced-motion for motion-sensitive users on all displays.
• Do not rely on color alone — Scan-based color changes should not be the only way to convey information.

💡 Best Practices

Related Topics