New and Upcoming CSS: @media (prefers-reduced-data)

• July 27 2022
• 1 min. read

The prefers-reduced-data media query detects if the user has requested the web content that consumes less internet traffic via the browser or operating system's data-saver option.

Until the introduction of the prefers-reduced-data media query, there was no way to honor the data-saver settings.

In a music shop app or in any other application where we have a lot of images representing products, we can ask the browser to remove the images if the user has requested to save data using something like this:

@media (prefers-reduced-data: reduce) {
  .album-cover {
    display: none;
  }
}

This will reduce the number of requests and will improve the loading speed and overall performance of your site.

Notes and links #

• prefers-reduced-data mediaquery spec
• prefers-reduced-data — MDN
• SaveData And prefers-reduced-data — Smashing Magazine
• Example: Media Scroller component

Edit on Github