One of my favorite things about CSS is how it just automatically does stuff that you need to manually do in JavaScript.
A good example of that is detecting changes to media queries. Let's dig in!
An example: prefers-reduced-motion
The Reduced Motion media query provides a way for people who experience motion sickness and vertigo to specify that they'd like to reduce the motion of an interface.
It's an operating system setting (in macOS, it's under Accessibility in System Preferences), and you can detect it using a CSS media query.
For example, let's say you animate scrolling to anchor links using the CSS scroll-behavior: smooth property.
html { scroll-behavior: smooth; }
You can disable the animation when a user has toggled by checking if prefers-reduced-motion is set to reduce with a media query.
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
If the user changes their OS settings at any point, the CSS media query automatically detects the switch and changes the behavior.
It's awesome!
In JavaScript, the window.matchMedia() method accepts a media query string, and returns an object with a few properties.
One of those is the .matches property, which has a value of true if the query string matches, and false if it doesn't.
// If matches is true, the user preferences reduced motion let prefersReducedMotion = window.matchMedia('(prefers-reduced-motion)'); let doesPreferReducedMotion = prefersReducedMotion.matches;
A JavaScript example
Let's say you have a marquee of items that automatically change every few seconds.
<div id="marquee"> <div>👋</div> <div hidden>🎉</div> <div hidden>🧠</div> <div hidden>🙈</div> </div>
The feature uses setInterval() to update the currently active item every few seconds.
If the user prefers reduced motion, we'll animate every 12 seconds. Otherwise, we'll move a bit more quickly every five seconds.
let marquee = document.querySelector('#marquee'); let prefersReducedMotion = window.matchMedia('(prefers-reduced-motion)'); let speed = prefersReducedMotion.matches ? 12000 : 5000; setInterval(function () { // Get the current and next elements let current = marquee.querySelector('& > *:not(hidden)'); let next = current.nextElementSibling ?? marquee.children[0]; // Swap visibility current.setAttribute('hidden', ''); next.removeAttribute('hidden'); }, speed);
Let's say after visiting your page, the user switches their preferences to reduce motion.
Your script has already loaded, so it's switching marquees every five seconds, and will continue to do so despite the user's updated settings. Where CSS would automatically update an animation, JavaScript does not.
In JavaScript, you can listen for change events on your matchMedia() method. It will fire whenever the matched media changes.
let prefersReducedMotion = window.matchMedia('(prefers-reduced-motion)'); prefersReducedMotion.addEventListener('change', function (event) { // The new value of the matched media console.log(event.matches); });
In our marquee script, we can watch for changes, and update our scrolling speed accordingly, like this.
let marquee = document.querySelector('#marquee'); let prefersReducedMotion = window.matchMedia('(prefers-reduced-motion)'); let speed = prefersReducedMotion.matches ? 12000 : 5000; let timer; function start () { timer = setInterval(function () { // Get the current and next elements let current = marquee.querySelector('& > *:not(hidden)'); let next = current.nextElementSibling ?? marquee.children[0]; // Swap visibility current.setAttribute('hidden', ''); next.removeAttribute('hidden'); }, speed); } prefersReducedMotion.addEventListener('change', function (event) { clearInterval(timer); speed = event.matches ? 12000 : 5000; start(); });
Now, whenever the user updates their preferences, the animation automatically updates to match.
Like this? A Go Make Things membership is the best way to support my work and help me create more free content.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] Detecting media query changes with JavaScript"