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?