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

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

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.

prefers-contrast

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.

prefers-color-scheme

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.

prefers-reduced-data

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

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.

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.