Demystifying CSS Container Queries

Описание: CSS Container Queries promise even more powerful styling approaches, but… what the heck are they? How do they actually work? Miriam will teach us.


Demo https://codepen.io/jlengstorf/pen/MWZ...




Upcoming episodes:
https://lwj.dev/schedule


Links & Resources:


https://www.oddbird.net/
https://www.w3.org/TR/css-contain-3/
https://drafts.csswg.org/css-contain-3/
https://web.dev/viewport-units/
https://web.dev/web-platform-08-2023/
https://github.com/w3c/csswg-drafts/i... GitHub
https://www.oddbird.net/blog/
https://www.learnwithjason.dev/schedule/


Watch future episodes live at   / jlengstorf  


This episode was sponsored by:
Netlify (https://lwj.dev/netlify)
Vets Who Code (https://lwj.dev/vetswhocode)


Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/)




00:00:00 - Welcome
00:00:45 - Who is Miriam Suzanne?
00:03:29 - High level overview of container queries
00:22:48 - Reading the spec
00:25:12 - Where do I start to build with Container Queries?
00:31:41 - What does minmax do?
00:41:18 - Jason’s favorite thing he learned about Container Queries
00:47:22 - How do I use Container Queries inside a component system?
00:54:12 - Working with “turtle” components
01:09:41 - How you can do responsive typography with container queries
01:24:37 - Where can people learn more?