New CSS Units! Container Query Units explained

Video Description

While media queries that look at the viewport size can be useful, today’s web is very component-based, and having to rely on the viewport size is pretty limiting. Luckily, container queries are now a thing! 🔗 Links ✅ Browser support for container queries: https://caniuse.com/?search=container%20query ✅ New media query syntax support (look for range syntax in the chart): https://developer.mozilla.org/en-US/docs/Web/CSS/@media#browser_compatibility ⌚ Timestamps 00:00 - Introduction 00:43 - The very basics 05:53 - A more real-world example 10:08 - The range syntax 11:13 - Named containers 14:37 - Container-type: size 17:46 - Container queries with flexbox and grid #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome 💖 Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Code - https://code.visualstudio.com/ --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!