Kilian Valkhof

Building tools that make developers awesome.

Digging Deep into Media Queries with Alex Trost of

CSS & HTML, 4 March 2022, < 1

On the Frontend horse Livestream (Which I highly recommend you subscribe to!) I joined Alex Trost to take a look at the site to add support for the many different user preference media queries that exist now: prefers-color-scheme, prefers-reduced-motion, prefers-reduced-data, prefers-contrast and forced-colors.

We go into what each of the media queries does and what you should change for them, but we also go over why you make those changes. It was nice to be able to take the time exploring the impact of some changes and the effect that they have. Streams with Alex are always super fun, and this was no exception!

For a full overview of all media queries check out the Complete guide to CSS media queries that I always keep updated. It’ll take you 20+ minutes to read it front-to-back, but it’s also an excellent reference guide.

For reduced data, check out Creating websites with prefers-reduced-data, which looks at all the things you can do to reduce data.

Lastly, we used Polypane extensively because it makes it really easy to toggle different media queries. You can try it for free here: Try Polypane for free.

Polypane browser for responsive web development and design 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!