prefers-reduced-data media query
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Note: This feature is not supported by any user agent and its specifics are subject to change.
The prefers-reduced-data CSS media feature is used to detect if the user has requested the web content that consumes less internet traffic.
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.