Ahmad Shadeed received an early soar on container queries and has a rising assortment of examples based mostly on on a regular basis patterns.
And, in case you missed it, his newest submit on container queries does an exquisite job protecting how they work since touchdown in Chrome 105 this month (we’ll see them in Safari 16 quickly). Some selection highlights and takeaways:
- Containers are outlined with the
container-typeproperty. Earlier demos and proposals had been utilizingincludeas an alternative. - Container queries are very very like the media queries we’ve been writing all alongside to focus on the viewport measurement. So, quite than one thing like
@media (min-width: 600px) {}, we now have@container (min-width: 600px) {}. That ought to make changing a lot of these media queries to container queries pretty straightfoward, minus the work of determining the brand new breakpoint values. - We will title containers to assist distinguish them in our code (e.g.
container-name: blockquote).
Nice job, Ahmad! And thanks for sharing!
