Imagine being able to craft a web application to your user needs and preferences. To have colors, contrast, motion, themes adjusted to precisely what the user wants. And imagine doing it with CSS only.

Doesn't it sound great?

And this is the future. What's even better, you can already do some of these things, even though the browser support is limited.

Media Queries Level 5

You're interested in CSS, so you're probably familiar with media queries. They allow applying different styles for different device types or specific characteristics and parameters. So if you want to target with your CSS only mobile devices, you could use media queries for that.

Media Queries Level 5 is a proposal (formally a Working Draft of W3C) of new media queries which will extend the media queries you're using right now. Among the most exciting propositions are User Preference Media Features, which allow applying different styles depending on user preferences.

For example, if the user wants to have a dark theme as default or prefers reduced animations, we would be able to address that in our code and apply styles based on user settings. This means creating a unique experience for the user, crafted to fit their needs best.

User Preference Media Features

I created a pen to showcase the power of the new media queries. Keep in mind that the support for the new media features is different between browsers and even operating systems, so to see all of the effects in action, you'll need to switch browsers.

The pen is based on a beautiful beating heart animation by Albert Walicki

Here are the media features you'll be able to use when Media Queries Level 5 becomes implemented by the browsers.

Reduced motion

Do you like flashy animations in web applications? I don't. Too much movement makes everything feel chaotic. The prefers-reduced-motion media feature allows detecting if the user wants to minimize the amount of animation and motion. It can take values of no-preference or reduce. The latter means the user wants to reduce the amount of movement.

In pen, you can see that the animation of the beating heart is slowed down and made more discrete for the reduced motion.

To test reduced motion, you need to adjust the setting in your operating system or browser. You can check how to do it here.

Reduced motion is already supported in most browsers, Internet Explorer being the only popular exception.

Default theme

I'm a dark theme guy. I love that I can set the default theme of my operating system to dark. Using prefers-color-scheme media feature, you can leverage the user theme settings and pick a default theme based on it. The feature takes values of light and dark.

In pen, you can see that the app's and heart background colors are changed for the users who use the dark theme.

To test how this works, change the default theme of your operating system. Here are the links to tutorials about theme changing for macOS and Windows.

The default theme is already supported in most browsers, Internet Explorer being the only popular exception.

Default contrast

Good contrast is one of those things you don't notice until you do. Some users need to have higher or lower contrast to see the content of the app clearly. To address that need, you can use prefers-contrastmedia feature. It takes several values (no-preference, less, more, custom) that allow setting specific styles for people with different preferences.

In pen, you can see that for the users who prefer more contrast, the color of h1 is set to red, while for users who prefer less contrast, it's set to lightgray.

Unfortunately, right now, the only browser that supports this feature by default is Safari. To test it, change the contrast on your macOS.

Forced colors

The forced-colorsmedia feature is one of the strictest. It allows users to limit the color palette of the whole application. The feature can take one of two values: none or active. If forced colors are active, the application uses only the browser-specified colors and removes some other styles (like box-shadow and text-shadow).

Forced colors are a complex media feature; if you need more information about the mode, colors you can use, and how to enable it to check out the MDN page.

In pen, in forced colors mode, the text-shadow under "Link to this pen" anchor disappears, but instead, it gets underline of the ButtonText color.

Forced colors are currently supported in Chrome, Firefox and Edge browsers.

Reduced transparency

Some users don't like translucent layer effects in their interfaces. Using the prefers-reduced-transparencymedia feature, you can target that setting with appropriate styles. It may take values of no-preference or reduce. The latter means the user wants to minimize the transparency effects.

In pen, you can see that the users who prefer less transparency see the heart with a higher opacity value than default.

Right now, the browsers don't support this feature, but hopefully, it will change shortly.

Liked the article? Share it!