Using the CSS @media prefers queries

DanielMay 25, 2021

I was listening to an episode of the CSS podcast and found out there are some cool things we have access be using @media prefers queries. Let's see them one by one:

• prefers-color-scheme may be the best known of all of them. It allows us to set a coll dark mode for our app or site:

@media (prefers-color-scheme: dark) {
    background-color: black;
    color: white; 
}

@media (prefers-color-scheme: light) {
    background-color: white;
    color: black; 
}

As a side note, Lea Verou has a coll article about how you can easily add a dark mode by using CSS custom properties and hsl.

• prefers-reduced-data this is a coll one I was not aware of. It's great because we can use it to load less costly assets (fonts, images etc) if the user has set this option to reduce.

@media (prefers-reduced-data: reduce) {
    .hero {
        background-img: url(smaller-size-img.jpeg);
    }
}

• prefers-contrast, prefers-reduced-motion, and prefers-reduced-transparency - the names are pretty explanatory. They can be great tools for improving accessibility and tailoring the user experience.