DEV Community

Cover image for Two media queries you should care about
selbekk
selbekk

Posted on • Edited on • Originally published at selbekk.io

Two media queries you should care about

CSS is a powerful language. The "media query" feature gives you access to the user's circumstances, device capabilities and preferences.

That last feature - their display preferences - is an incredibly powerful one. You can react to how people would like their content served!

This short article will introduce you to two new media queries, which will help make your web sites even better.

prefers-reduced-motion

Some users are either sensitive to long and bouncy animations, while other users just don't like them. Either way, there's a very quick way to cater to their wants and needs.

Simply add the following code to your CSS file:

@media (prefers-reduced-motion: reduce) {
  .my-animated-thing { animation: none; }
}
Enter fullscreen mode Exit fullscreen mode

Whenever a user with a preference for reduced motion UIs enters your page, you can turn off particularly intrusive or insistent animations just for them.

If you want to add a blanket rule to your website, you can address all elements this way:

@media (prefers-reduced-motion: reduce) {
  * { 
    animation: none;
    transition: none;
  }
}
Enter fullscreen mode Exit fullscreen mode

You might not want to do this, however - killing all transitions might not be what you want after all. If you have the time and budget, go through all of your motion-adding classes and consider adding a motion-reducing media query to them.

prefers-color-scheme

Android, iOS, OSX and Windows now have support for selecting dark mode - a darker version of their general user interface. Wouldn't it be cool if you app could respond to this as well?

CSS comes to the rescue yet again, with the prefers-color-scheme media query:

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}
Enter fullscreen mode Exit fullscreen mode

If you're using CSS dynamic properties (also known as CSS variables), you can really add super-powers to your web-site by just changing your entire color scheme in a single swoop:

@media (prefers-color-scheme: dark) {
  :root {
    --primary-background-color: #111;
    --primary-text-color: #eee;
    --contrast-background-color: #eee;
    --contrast-text-color: #111;
  }
}
Enter fullscreen mode Exit fullscreen mode

There are much more media queries you can dip into if you want. You can check them all out here.

What's your favorite media query tip?

Top comments (15)

Collapse
 
256hz profile image
Abe Dolinger

I did some googling and didn't find a a great answer for this - how do I, as a user, express this preference? The MDN spec says: "The method by which the user expresses their preference can vary. It might be a system-wide setting exposed by the Operating System, or a setting controlled by the User Agent."

Collapse
 
selbekk profile image
selbekk

It depends on the setting and your OS of choice I guess. Light / dark mode preference is in the general section of osx system preferences, and the prefer-reduced-motion setting can be set in your phone’s accessibility settings (as least on ios).

Collapse
 
256hz profile image
Abe Dolinger

That makes sense! Looks like Windows 10 has this as well. Very cool.

Collapse
 
httpjunkie profile image
Eric Bishard • Edited

I'm wondering how I can query prefers-color-scheme: dark, so that I can use that boolean true/false for other reasons. For instance:

themeMode: preferredThemeMode() || 'light',

Where preferredThemeMode() uses JS to understand if they prefer 'light' or 'dark' and returns 'light' or 'dark' as a string.

I think they start to explore this idea in the following article:
freecodecamp.org/news/how-to-detec...

Collapse
 
httpjunkie profile image
Eric Bishard

Yep that works perfectly! I will write a simple article on it.

Collapse
 
httpjunkie profile image
Eric Bishard • Edited

I'm assuming something like this would work in React using the react-media-hook library:

const themeToUse = useMediaPredicate("(prefers-color-scheme: dark)") ? "dark" : "light";

Collapse
 
httpjunkie profile image
Eric Bishard

Created an article based on how to do this in a React application with a simple Hook! Hope you all like it. Thanks for this article, it inspired mine...

dev.to/httpjunkie/preferred-color-...

Collapse
 
selbekk profile image
selbekk

Very cool!

Collapse
 
porgeet profile image
porgeet

Amazing! I had no idea these even existed!

Cheers

Collapse
 
seanmclem profile image
Seanmclem

Can you set prefers-color-scheme with js? Or is it exclusively an OS-level thing?

Collapse
 
selbekk profile image
selbekk

It's an OS level setting - you wouldn't want a website to be able to change how your entire computer looks, right?

You could still use this setting as a part of your theme logic, however. You can access it via the window.matchMedia('(prefers-color-scheme: dark)') method (see the MDN docs), and use it to change your theme settings as appropriate.

Note that this OS wide setting might change automatically, depending on the current light environment or time of day as well - so make sure to respond to changes in this value as well!

Collapse
 
rohanfaiyazkhan profile image
Rohan Faiyaz Khan

Thanks for the wonderful writeup. I really love the CSS variable solution! It really makes it so much easier to do things.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀
Collapse
 
zvakh profile image
Zoryana Vakh

It's better to give the user a choice what color theme to implement
Anyway it's very informative! Thanks a lot!)

Collapse
 
selbekk profile image
selbekk

Truth is, they might already have given their preference with the OS level light or dark mode preference - so I think using that as the default makes sense.

In addition, once you’ve added support for this, creating a theme switcher is trivial. 🙌