The more people talk about CSS features, the more likely it is that developers will hear about them. I learned about oklch in a talk about CSS colours. I learned why rem and em are significant after conversations with friends and reading about the topics online.
I love the spectrum of resources available: from documentation like MDN that comprehensively describes web features, to blogs that talk about how web features can be applied.
With that in mind, I wanted to take a moment to talk about the prefers-reduced-motion CSS media query that I use on my website and how I use it.
prefers-reduced-motion lets you apply styles depending on whether the user has set a preference to prefer reduced motion. This setting indicates the user would prefer not to see motion-based animations on web pages. For example, you could use the query to disable scroll-based animations, or to make sure animated material like GIFs don’t auto-play.
I use the feature on my blog search engine to determine whether or not to enable search-as-you-type. Search-as-you-type is a feature that presents search results as you type letters. Every time you type a letter, a new request is made to my search server to find relevant documents. This pattern allows readers instant feedback, and may speed up information retrieval time. For example, someone may see the document they are looking for before they have written the full query they had in mind.
With that said, search-as-you-type involves slights shifts on the page. As results are populated on the page, the words in the visible results will change since new documents may be available. While useful to some users, this feature may be jarring to people who do not want to see interactive changes as one enters more characters into a search query box.
You can detect whether the preference is set in CSS style rules using a media query, or in JavaScript using the same media query.
I use the following JavaScript code to detect whether a preference for reduced motion is set:
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
...
}
If you are designing interactive experiences, or experiences with animations, consider the prefers-reduced-motion selector.
The web.dev website has an article that explores the topic of prefers-reduced-motion in depth. It covers types of animated experiences on the web, how animations can be inaccessible, and more.
If you have used this selector, tell people about how you used it!
