This content originally appeared on Kilian Valkhof and was authored by Kilian Valkhof
On the Frontend horse Livestream (Which I highly recommend you subscribe to!) I joined Alex Trost to take a look at the Frontend.horse 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.
The post Digging Deep into Media Queries with Alex Trost of Frontend.horse first appeared on Kilian Valkhof.
This content originally appeared on Kilian Valkhof and was authored by Kilian Valkhof
Kilian Valkhof | Sciencx (2022-03-04T17:13:54+00:00) Digging Deep into Media Queries with Alex Trost of Frontend.horse. Retrieved from https://www.scien.cx/2022/03/04/digging-deep-into-media-queries-with-alex-trost-of-frontend-horse/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.