User prefered CSS means that the website or app can adapt to a setting that a user set on operating system level. Parts of this are around for a little while and so these media features aren't entirely new. Some people know this from the “Dark Mode feature” for websites, introduced by Apple in 2018 when presenting macOS Mojave. But that's just the tip of the iceberg.
prefers-color-scheme
This media feature allows to detect if a user requested a light or dark color scheme. Usually through their operating system (OS) or app/ browser. Accepted values are light and dark.
The CSS could look something like this:
body { // default declaration - works if unset or unsupported or in this case if the preference is set to light
background-color: #fefefe;
color: #222;
@media (prefers-color-scheme: dark) { // declarations if the user set their preferences to dark
background-color: #222;
color: #fefefe;
}
}If the setting in your OS is set to light but in your app/ browser to dark then the dark color scheme would apply.
Browser support for prefers-color-scheme is pretty good since all major browser added support for this.
prefers-reduced-motion
This media feature is used to detect if a user prefers to reduce non-essential motion - this is usually an option in the OS of a user's device. Accepted values are either no-preference or reduce.
html {
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
}Reduced motion does not mean no motion at all.
Again, we have good browser support for prefers-reduced-motion since all major browsers support this.
prefers-contrast
Prefers-contrast is used to determine if a user wants more or less contrast. Accepted values are no-preference, more and less.
.foo {
background: #fefefe;
border: solid 1px #555;
@media (prefers-contrast: more){
.foo {
border: solid 2px #000;
}
}
}Browser support for prefers-contrast isn’t perfect yet. Chromium and Webkit-Browsers support this while Firefox has this behind a flag (layout.css.prefers-contrast.enabled) so it needs to be enabled using about:config. The average user most likely won't do that.
prefers-reduced-data
The last one in this list isn’t here just yet (by the time of writing this article - it’s still a draft). But hopefully we will see this implemented soon. The idea of this is that you could determine if a user stated that they’d want do consume less data on their device. Because they’re on a data plan or something like that.
From what we know now the accepted values would be either no-preference or reduce.
As an example we would preload a font file only if the option is no-preference (that would most likely equal to „unset“ or not existing, too) in HTML and then write our CSS accordingly (both simplified).
<head>
<link rel="preload" href="fonts/inter-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin>
</head>@media (prefers-reduced-data: no-preference) {
@font-face {
font-family: Inter;
font-weight: 400;
font-display: swap;
src: local('Inter Regular'), local('Inter-Regular'), url('fonts/inter-regular.woff2') format('woff2');
}
}
body {
font-family: Inter, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}As I said above, this is not yet supported, but keep an eye at the browser support for prefers-reduced-data on Can I Use.
Once all of this was fully implemented we will see this on more and more websites and ultimately give users control about how websites might look and work based on their settings in their OS - no need for extra settings on the website or app.
That is all I have for you today. If you have been: Thank you for reading.