Digging Deep into Media Queries with Alex Trost of Frontend.horse

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 […]

The post Digging Deep into Media Queries with Alex Trost of Frontend.horse first appeared on 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.


Print Share Comment Cite Upload Translate
APA
Kilian Valkhof | Sciencx (2024-03-29T12:00:20+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/.
MLA
" » Digging Deep into Media Queries with Alex Trost of Frontend.horse." Kilian Valkhof | Sciencx - Friday March 4, 2022, https://www.scien.cx/2022/03/04/digging-deep-into-media-queries-with-alex-trost-of-frontend-horse/
HARVARD
Kilian Valkhof | Sciencx Friday March 4, 2022 » Digging Deep into Media Queries with Alex Trost of Frontend.horse., viewed 2024-03-29T12:00:20+00:00,<https://www.scien.cx/2022/03/04/digging-deep-into-media-queries-with-alex-trost-of-frontend-horse/>
VANCOUVER
Kilian Valkhof | Sciencx - » Digging Deep into Media Queries with Alex Trost of Frontend.horse. [Internet]. [Accessed 2024-03-29T12:00:20+00:00]. Available from: https://www.scien.cx/2022/03/04/digging-deep-into-media-queries-with-alex-trost-of-frontend-horse/
CHICAGO
" » Digging Deep into Media Queries with Alex Trost of Frontend.horse." Kilian Valkhof | Sciencx - Accessed 2024-03-29T12:00:20+00:00. https://www.scien.cx/2022/03/04/digging-deep-into-media-queries-with-alex-trost-of-frontend-horse/
IEEE
" » Digging Deep into Media Queries with Alex Trost of Frontend.horse." Kilian Valkhof | Sciencx [Online]. Available: https://www.scien.cx/2022/03/04/digging-deep-into-media-queries-with-alex-trost-of-frontend-horse/. [Accessed: 2024-03-29T12:00:20+00:00]
rf:citation
» Digging Deep into Media Queries with Alex Trost of Frontend.horse | Kilian Valkhof | Sciencx | https://www.scien.cx/2022/03/04/digging-deep-into-media-queries-with-alex-trost-of-frontend-horse/ | 2024-03-29T12:00:20+00:00
https://github.com/addpipe/simple-recorderjs-demo