Media queries are more than responsive design
Tags: a11y, css, mediaqueries
Published: 2021-04-12 23:13:05

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

```css
@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()`](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax%28%29) 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:

{% codepen https://codepen.io/lauracarballo/pen/ExZQQja default-tab=css,result %}

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:

```css
@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](https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/) 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.

```css
@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.

```css
@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](https://www.w3.org/TR/mediaqueries-5/) and there are more accessibility tools being introduced.

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