prefers-reduced-data media query
The prefers-reduced-data CSS media query detects whether the user has a preference for using less network traffic. For example, you can use this media query to avoid loading large font files and use a system font instead.
Overview
The prefers-reduced-data CSS media query detects whether the user has a preference for using less network traffic. For example, you can use this media query to avoid loading large font files and use a system font instead.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.at-rules.media.prefers-reduced-data Experimental | 85 | 85 | | | 85 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Experimental
- Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
- Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
- Requires an experimental browser flag to be enabled
Syntax
CSS
@media (prefers-reduced-data: reduce) {
.hero {
background-image: url('hero-low.jpg');
}
body {
font-family: system-ui;
}
}Live demo
Use cases
Adaptive styling
Use prefers-reduced-data media query to tailor layout or presentation to device features and user settings.
Progressive enhancement
Keep the default experience solid, then layer in device-specific or preference-aware improvements.
Cautions
- Do not rely on a media condition as the only path to essential functionality.
- Document the breakpoint or environment strategy so conditions stay consistent across the codebase.
Accessibility
- Media-query adaptations should preserve keyboard access, reading order, and touch usability.
- Preference-aware styling should enhance accessibility rather than replace baseline accessible defaults.
Related links
Powered by web-features