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.
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
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.
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
In pen, you can see that the app's and heart background colors are changed for the users who use the dark theme.
The default theme is already supported in most browsers, Internet Explorer being the only popular exception.
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 (
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-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:
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
Forced colors are currently supported in Chrome, Firefox and Edge browsers.
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
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.