The scan media feature styles pages based on the device’s scanning process: progressive (full frame) or interlace (odd/even lines alternate).
Use it inside @media. Most modern screens are progressive. Interlace mattered more on CRT and some older TV signals—on those displays, slow motion and thicken fine details to reduce flicker.
Browsers may parse scan yet match neither progressive nor interlace on typical desktops. Keep solid defaults; do not rely on scan for critical layout.
When targeting interlaced output, avoid very fast movement and keep animated details wider than 1px to reduce flickering.
@media (scan: progressive | interlace) { … }Always wrap the feature in parentheses. Invalid forms like @media scan(progressive) do not work.
scanWrite defaults first, then enhance for a specific scan mode.
@media (scan: interlace) only when you need interlaced tweaks.@media screen and (scan: progressive).| Piece | Required? | Role |
|---|---|---|
@media | Yes | Wraps the media feature |
scan keyword | Yes | progressive or interlace |
| Default styles | Yes | Work even when neither value matches |
Media type (screen) | Optional | Narrow the query further |
You cannot switch scan mode in DevTools like a color scheme. This preview reports what matchMedia returns on this device and applies real @media (scan: …) styles when they match.
Snippets stay focused on scan. View Output shows the intended look; on many desktops the real query may not match—use Try It Yourself to experiment.
Enhance the page when progressive scanning is reported.
p {
background: #e2e8f0;
}
@media (scan: progressive) {
p {
background: #dbeafe;
}
}@media (scan: progressive) wraps the enhancement.Slow animation and thicken a line when interlaced output is reported.
.box {
border-bottom: 1px solid #334155;
animation: slide 0.4s linear infinite;
}
@media (scan: interlace) {
.box {
border-bottom-width: 3px;
animation-duration: 1.2s;
}
}3px borders flicker less than 1px hairlines.Combine a media type with the scan feature.
p {
color: #334155;
}
@media screen and (scan: progressive) {
p {
color: #1d4ed8;
}
}screen. Limits the rule to screen media (not print).and (scan: progressive) requires both conditions.Teach the syntax, then plan for “no match.”
On many desktops, both queries fail. Defaults must already look correct.
Use @media (scan: progressive). Forms like @media scan(progressive) are invalid.
On interlaced output, keep details thicker than 1px and avoid rapid movement.
scan describes frame drawing, not viewport size. Pair width/height separately when needed.
User preference for less motion still matters. Combine carefully with prefers-reduced-motion when you animate.
scan is a browser media feature. Node.js, Deno, and Bun do not evaluate it.
Modern browsers parse the feature (Chrome/Edge 104+, Firefox 63+, Safari 16.4+). Matching a concrete value is uncommon on typical desktops—verify with matchMedia.
Bottom line: Safe to include as progressive enhancement. Never gate essential content on scan matching.
progressive and interlace inside @media (…).One line: scan is a niche media feature—teach the syntax, enhance carefully, never depend on a match.
Learn the CSS screen media type for display-targeted styles.
8 people found this page helpful