1 Thing A Week 1 Thing
A Week

How to use the prefers media query in CSS A look at the various options available for tailoring the user experience based on system-level settings

Week 184.0 — 3rd May '21

As CSS has evolved over the years, we've slowly been given the options we need to automatically improve the user experience for our visitors. We no longer have to rely on JavaScript or user interactions to make the default choices preferred, we can let the operating system inform us and then apply the appropriate choices.

In truth, I've only ever made changes based on the type of light/dark theme but there are a few options which we can use for free in our CSS.

(Browser support varies wildly, so some of the demos might work on device and not on another. Some are not yet implemented, so will not work at all but one day they will!)

prefers-reduced-motion

prefers-reduced-motion: no-preference | reduce

Users can decide to inform of us of their preference for reduced motion and then you make the appropriate call. If you have no preference, the yellow box below will shake from left to right, however if you do have your preference set to 'reduce', then it will be still.

Hello 👋

prefers-contrast

prefers-contrast: no-preference | high | low | forced

With this setting you can increase the contrast applied. Depending on your setting, you'll see a bigger difference between the background and foreground colours. The higher the setting, the more contrast you'll see.

How's the contrast?

prefers-color-scheme

prefers-color-scheme: light | dark

If you toggle the preferred theme in your OS, this blog will appear in light or dark mode accordingly. I've used it to also toggle a piece of text in the example below which will reveal which mode you have enabled.

You have lightdark mode enabled.

prefers-reduced-data

prefers-reduced-data: no-preference | reduce

In your HTML you can already specify different image sources depending on the screen size and now in CSS you can specify images depending on the amount of data the visitor wants to use. Below you should see a high-res image, but by enabling reduced data mode you'll see a more pixelated version that's been scaled up to fit.

prefers-reduced-transparency

prefers-reduced-transparency: no-preference | reduce

This option actually is actually isn't available in any browsers at the moment but with this option, you will be able to decide if you should reduce the amount of transparency applied to elements. Below is a box that has a busy background image and text on top. It's tough to read right now, but as soon as it's supported, with the preference enabled, you will find it much easier.

Can you read this?

This last one would be really useful to have. I've seen glass effects quite a lot recently and this would help to make readability better for some users. It would also give you the freedom to make more questionable choices with contrast, knowing that anyone with the setting enabled would be given a more appropriate view of the page.

Support may not be universal for all of these options right now, but it is really good to see that all of these options are (or will be) available natively to CSS.

More from 1 Thing A Week
« Understanding N-match notation in CSS Using CSS to make responsive tables with headers that are readable Is selvedge denim worth it? Mixing N-match notations in CSS »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 184.2 – Tuesday
    1. Get out of your geographic music bubble pudding.cool
  2. 184.3 – Wednesday
    1. The Instagram ads Facebook won't show you signal.org
  3. 184.7 – Sunday
    1. STEVE over Copper Harbor MaryBeth Kiczenski on apod.nasa.gov

Jump to notable items for Week #183, Week #185 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit