Spoiler alert: There is no support for it yet. But it is defined in the Media Queries Level 5 spec that includes other recent, but more familiar user preference features, like prefers-color-scheme and prefers-reduced-motion.
The Polypane blog goes into incredible depth on prefers-reduced-data, especially for something that we have yet to see in the wild. That’s actually what makes the Polypane team an ideal voice on the subject. It’s product is a browser that is able to emulate the feature behind a Chromium flag.
At the same time, it’s worth noting that the spec calls out two significant potential issues with this feature in its current state:
- It may be an undesired source of fingerprinting, with a bias towards low income with limited data.
- This feature is an early draft, and the CSS-WG does not consider it ready for shipping in production.
But that’s not to say we can’t start getting acquainted with it. Here’s how it works:
@media (prefers-reduced-data: reduce) {
/* Stuff for reduced data preferences */
}
@media (prefers-reduced-data: no-preference) {
/* Stuff for no data preferences */
}What I appreciate from this post is the wealth of possible use cases it lists. Allow me to summarize:
- Conditionally load fonts. As in, make a
@font-facedeclaration then call the font on the body, once for users withno-preferenceto get the custom font, and again for users withreducedto get a lighter stack. - Background images. Have you ever used a giant splash image as the background for some full-width hero component? Maybe that can be served just to folks who have
no-preferencewhile those withreducedget either a smaller variation or no image at all. - Smaller images in HTML. This is clever because remember that we have the
mediaattribute on the<source>element. So, we can instruct browsers to use certain images when working with<picture>, a la:<source srcset="small.jpg" media="(prefers-reduced-data: reduce)" />. - Conditionally preload and autoplay videos. Just as we can work with this feature in HTML, we can use it in JavaScript, too, by using
window.matchMedia('(prefers-reduced-data: no-preference)').matchesto setautoplayandpreloadattributes on a video based on data preferences. - Ditch infinite scrolling. I’d generally ditch this pattern in the first place, but we can certainly disable it so users who prefer reduced data aren’t force-fed more content (and thus, more data) just by reaching the end of a page.
That’s not a definitive list of ideas, of course! We talk all the time about serving the right assets to the right people at the right time and this media feature is a great tool to help us do that in certain contexts. Think also of:
- Providing low-res versions of downloaded assets (e.g. PDFs)
- Linking to certain sites or pages that have heavy experiences
- Conditionally loading entire scripts, stylesheets, or libraries based on preference
- Probably a gazillion other and more clever things…
And this advice is golden:
Like
prefers-reduced-motion, it’s good to think of theprefers-reduced-data: reduceoption as the default option: people get the lean, fast experience, and only when they indicateno-preference, we send them more data. That way,olderbrowser that don’t support the media query get the lean experience by default.
Yep. The same sort of idea as “mobile-first” responsive design: start by designing for reduced data and then enhance as we scale up.
