Web design is all about building user interfaces (UI). It’s a massive part of what we do. We create something that we think users will like.
We often use established design patterns. Navigation is placed at the top or along the side of a page. Headings and white space create content separation. You get the idea.
This process works well. But CSS allows us to go the extra mile for users. We can now cater to their preferences as well.
By detecting a user’s system preferences, we can serve styles to match. It’s all possible through CSS media features.
Here’s a look at the various user preferences we can detect. We’ll also explore how they can help us improve usability and accessibility.
What’s Being Detected? Where Does It Come From?
The term “user preference” can have multiple meanings. In web design, it has traditionally referred to saving preferences locally. A user selects from various options on your website. From there, preferences are stored and retrieved via a cookie.
But CSS enables a different approach. A media query can detect user preferences at the device level. That allows us to retrieve a user’s configuration. We can then adjust the website’s styles accordingly.
This isn’t a way to spy on users. The data doesn’t look at personally identifiable information. The user isn’t required to have an account on your website. And the data won’t allow you to track someone.
Users can set preferences in their browser or operating system. Color schemes (dark or light), color contrast, and reduced motion are primary examples. It’s up to individual websites to detect and/or respect those settings.
This method increases privacy and efficiency. Users don’t have to divulge personal information. And web designers won’t have to build custom settings.
Examples of Detecting User Preferences with CSS
Now it’s time to explore a few examples. We’ll use three media features included with CSS.
Color Scheme
The prefers-color-scheme media feature detects a user’s device color setting. The choices are “light” or “dark” modes. Both mobile and desktop operating systems offer this feature.
If a user prefers a dark color scheme, you can use CSS to implement relevant styles. Below is an example of prefers-color-scheme in action.
See the Pen Using CSS prefers-color-scheme by Eric Karkovack
So, what if a user doesn’t want a dark website? You can use a toggle to let them switch between modes. Providing this flexibility makes your website even more user-friendly.
Color Contrast
A high-contrasting color scheme is easier to read. Operating systems tend to include the option in their accessibility settings.
It’s possible to detect this preference via CSS prefers-contrast. This setting allows for a bit more ambiguity than prefers-color-scheme. Options for “more” and “less” are the most common.
However, the “custom” option requires a specific set of colors. In that case, we can use forced-colors to adapt the page.
The following example uses a gray background by default. If the prefers-contrast preference is set to “more,” we’ll change it to white.
See the Pen Using CSS prefers-contrast by Eric Karkovack
Reduced Motion
Web animation can be a great thing. It adds interactivity and context to an element. But certain types of animation can be harmful.
Users with vestibular motion disorders can become ill – or worse. That’s why it’s best to avoid intense flashing animations.
Some devices have a setting that requests that websites use minimal motion. The prefers-reduced-motion media feature will detect the setting.
The following example includes a rotating square. Note that we’ve been careful to use a slower form of movement. But if the prefers-reduced-motion setting is “reduce,” we’ll stop the animation.
See the Pen Using CSS prefers-reduced-motion by Eric Karkovack
Want to try the setting? MDN has a handy guide for locating it on your device.
Instantly Improve the User Experience
CSS provides some great ways to detect user preferences. They’re easy to use. And they take the guesswork out of building clean, accessible UIs.
Granted, we don’t have to follow a user’s device preferences. And our clients may be wary of different color schemes.
But even slight tweaks to reduce motion and increase contrast are helpful. They amount to little things we can do to improve the user experience (UX). That will benefit everyone.
How to Detect User Preferences with CSS Medianic.
