Limited support Useful when prefers-reduced-data media query helps adapt the interface to user preferences, display capability, or environment conditions.

prefers-reduced-data media query

The prefers-reduced-data CSS media feature is used to detect if the user has requested web content that consumes less internet traffic.

The browser typically achieves this by querying the underlying operating system's preferences for reduced data.

Media queries

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
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

Normal time (highimage)

CSS Normal time (highimage) demo.

PreviewFullscreen

de-tasection time

CSS de-tasection time demo.

PreviewFullscreen

no-preference

CSS No-preference demo.

PreviewFullscreen

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