`not all and (prefers-reduced-data), (prefers-reduced-data)`
const resolvedMediaQuery = window.matchMedia(query).media;
const isSupported = query === resolvedMediaQuery;
The window.matchMedia API also returns a “media” property, which is the normalized and resolved string representation of the query you tested. If matchMedia encounters something it doesn’t understand, that changes to not all, and if it does support the query it will return the query, regardless of if it matches (you can use the matches property for that).So by comparing your input to the media, you either get:No support:'(prefers-reduced-data)’ === ‘not all’ which is false.Support:'(prefers-reduced-data)’ === ‘(prefers-reduced-data)’ which is true.Which one to use?What I like about the first option, with the complex media query, is that all the logic happens inside CSS. I also like how you get a boolean, and don’t have to do string comparison.The second can be a little bit easier to understand at a glance, but you need to make sure that your query input is the same as the browser normalizes it.For example, if you test (prefers-reduced-data ) (notice the space), that would resolve “matches” to true in supported browsers because the white space is not important, but comparing the normalized media query would return false, since that normalization has removed that extra space. So string comparison can be tricky depending on your input.Edit: Thomas Steiner pointed out you can check for resolvedMediaQuery !== ‘not all’ instead to avoid the issue of normalization. Clever!When to use this?We’re set to get a whole lot of new media features in the coming years, like prefers-reduced-data, prefers-contrast, screen-spanning and more.While transitioning to all browsers supporting this, you’ll often want to turn on extra features for browsers that support it without causing issues in older browsers since the new default might not always be the best experience in older browsers.With this media query you can split the behavior in older browsers without support and newer browsers with support. Hi, I’m Kilian. I make Polypane, the
browser for responsive web development and design. If you’re reading this site, that’s probably
interesting to you. Try it out!