This content originally appeared on Go Make Things and was authored by Go Make Things
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!
Detecting media queries with JavaScript
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);
The matchMedia() method doesn’t automatically react to changes
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 Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-04-15T14:30:00+00:00) Detecting media query changes with JavaScript. Retrieved from https://www.scien.cx/2025/04/15/detecting-media-query-changes-with-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.