Media queries are more than responsive design

When we think of media queries we automatically think of this:

@media screen and (max-width: 640px) {
  /* CSS for mobile */
}

Media queries are generally used to build responsive applications but did you know that there is more to them than that? In this post I will be covering some of them with the purpose of giving more visibility to simple tools that can help the web be more accessible and also enhance user experience.

Responsive design

Using the @media rule leaves a space for us to change styling depending on different screen sizes and therefore provides a dynamic tool for building responsive designs.

But, when it comes to building a responsive layout, we can also use CSS grid. The minmax() CSS grid function is very simple to use and it helps us structure responsive layouts in one single line of code.

Think of the following layout:

With minmax() we are able to compose our layout and keep it responsive just using grid and we can use the @media rules for specific components and other edge cases.

Note: Although minmax() is supported in most browsers, it is not supported in Internet Explorer, so we need to keep that in mind when using it.

Accessibility

We all know that media queries are great to build responsive applications but what about using them to create accessible applications too?

Media queries prefers-reduced-motion and prefers-color-scheme allows us to do so. Others like, prefers-contrast and inverted-colors are not supported yet by many browsers so I won't be covering them much today.

Reduced Motion

Animations are very fun to build and they are a huge part of the web. While they can enhance our user's experience, animations can also cause some problems. Some users can get easily distracted or even get dizzy with certain effects.

With prefers-reduced-motion removing animations can be quite simple:

@media screen and (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

reduce indicates that the user has indicated inside the computer settings that they prefer interfaces without animations.

The no-preference usecase indicates that the user has not made any preference in the system.

I truly recommend reading this article by Eric Bailey where he speaks about the impact and usage of animations and also provides this code, as a solution to turn off animations.

@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

The prefers-reduced-motion query is broadly supported so there is no excuse to not use it, simply do!

Contrast

Dark mode is the new feature that many companies are recently focusing on. This is useful for users sensitive to light or with low vision.

prefers-color-scheme also checks for the user's theme preferences in the system. If we already have a dark mode build for our website, we can automatically provide this option for our users based on their preferences.

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

light indicates that the user prefers a light theme or has not selected a preference and dark indicates a dark display.

Conclusion

Media queries have more to them than just achieving responsive designs, they can easily make our application more accessible for our users just by simply adding a couple lines of code.

If we can check for user's preferences from their browser or system settings we can automatically render the user's preferred options and save ourselves from building toggle functionalities.

We are still waiting on browser support for other queries like prefers-contrast and inverted-colors. Microsoft introduced -ms-high-contrast for Microsoft Edge v18 or earlier but it is a non-standard feature so it is not recommended to use in production sites and inverted-colors is only supported in Safari.

But, good news is that there seems to be a working draft for new media queries and there are more accessibility tools being introduced.

That's it for me today! Thanks for reading!