selbekk

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; }
}

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;
  }
}

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;
  }
}

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;
  }
}

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