Repository navigation
prefers-reduced-data media query #314
Description
This GitHub issue is for collecting web developer signals for 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.
Browser support
- Chrome: not supported
- Chrome Android: not supported
- Edge: not supported
- Firefox: not supported
- Firefox for Android: not supported
- Safari: not supported
- Safari on iOS: not supported
Give us feedback
If you're pressed for time, but you want this feature to be available in all browsers, please give this issue a thumbs up 👍 reaction.
However, a much better guide for us is to know how you'd use this feature, and what you're having to do in the meantime. This helps us judge the priority versus other features.
Copy the template below in a comment, and add the details that matter to you.
## What I want to do with this feature
<!-- Add your specific use-cases, even if they seem obvious to you. -->
## What I'm having to do in the meantime
<!--
Are you having to use another feature instead, a polyfill, or is it blocking you completely?
Why are the alternatives worse than using this feature?
-->All comments are expected to adhere to the Code of Conduct.
Learn more
You can learn more about this feature here:
Activity
ryantownsend commentedon Jan 5, 2026
What I want to do with this feature
I serve video previews on thumbnail hover on desktop and I'm considering using CSS scroll-state queries to mirror this in some fashion on mobile, but I'd like to disable this feature when folks have save data turned on.
What I'm having to do in the meantime
At the moment, I do nothing: the video is loaded regardless of user preference. I could look to implement a workaround with JavaScript but CSS support would make this far easier.
jakearchibald commentedon Jan 5, 2026
@ryantownsend is it possible to trigger/prevent the loading of a video with CSS?
ryantownsend commentedon Jan 5, 2026
@jakearchibald that's actually a very good point... I forgot I am registering a custom element in lieu of support for
<img src=*.mp4>outside of WebKit and<video loading=lazy>existing at all (though it's being worked on by @scottjehl: whatwg/html#11980), so I could actually use Save Data... but that's only supported in Chromium too.I still feel this would be a useful primitive to expose to CSS, given JavaScript could read it using
matchMediatoo, so both worlds get access from one change.There's a bunch of small things that I can imagine implementing using the media query (such as toggles for loading high-resolution imagery), but my other more elementary use-case is conditional webfont loading. If we are going to load them, we want them to be loaded ASAP to avoid layout shifts, so we can't wait around for JavaScript, we need a media query for our preloads and CSS.