Finally: CSS Container Queries are Here!

The web development world has been buzzing with anticipation for a certain CSS feature that we’ve all been waiting for - container queries! Now the wait is finally over. The prototype of container queries was available behind a flag in Chrome Canary for you to play around and experiment with, but now it is widely supported by major browsers.

So, what's the big deal with CSS Container Queries?

Before we get into the  gritty details of container queries, let's explore why they're so important. In the past, web design has been limited by the constraints of screen size. For instance, if a container is 600px wide, perhaps it has a row-like design, but any narrower than that, it transitions into a column-like design. The limitations have been around transitioning between layouts based on the screen size, rather than the size of an element or its container.

Developers often used a system of breakpoints in CSS media queries to adjust styles based on the size of the viewport, not the container.  This could create a pseudo-container-query effect if the container spans the whole viewport width. But this approach falls short when you want components to be responsive based on their own size, not the viewport's.

The emergence of design systems and component libraries has increased the desire to build once, and deploy anywhere. A component developed in isolation is intended to work in any number of contexts to make building complex interfaces more efficient and consistent. But with only media queries at our disposal, there is often an extra layer involved to orchestrate  mutations of components across viewport changes. This is where container queries come to our rescue.

There's a number of workarounds I personally used besides media queries. I'm not going deep into them, but some of these tricks are CSS-only, like using CSS grid and flexbox, or calc() and vw/vh units. Some others involve JavaScript, like the Resize Observer API, adding a window resize event, or the getBoundingClientRect() function. 

Container queries allow any component or element to respond to a defined container’s width, not just the viewport. This enables a component within a grid to define its own changes in behavior by querying its container. Then, it can adjust its styles depending on whether it’s displayed in a narrow or wide container.

How to Write a CSS Container Query?

You may be wondering, how do I get started with these container queries? The first thing to know is that "containers" are the elements being queried, but rules within container queries only affect the container descendants. For example, you could define main, article, or even list items as containers. Then, container queries will allow you to define rules for how elements within those change across container sizes. Here's an example of what the code can look like:

See the Pen Container Queries by Adrián Steinsleger (@Adri-n-Steinsleger) on CodePen.

In the above snippet, you first need to tell the parent component that a child needs to change size (that’s the container-type: inline-size part). Next, you can use a new kind of query called @container which will detect when the parent of an element changes width.

New Units Unveiled

With container queries, there's also the introduction of new units that will redefine how we work with CSS. The new units are relative to the query container’s dimensions:

• cqw: 1% of a query container’s width
• cqh: 1% of a query container’s height
• cqi: 1% of a query container’s inline size
• cqb: 1% of a query container’s block size
• cqmin: The smaller value of cqi or cqb
• cqmax: The larger value of cqi or cqb
  

These new units can save us effort and time when dealing with things like font-size, padding, and margin within a component. For example, instead of manually increasing the padding, we can use query units instead.

Conclusion

As we reach the end of our exploration into CSS container queries and the new container-relative units, it's clear that we're standing at the edge of a significant shift in responsive design. The ability to style components based on their container's dimensions, as opposed to the viewport's, opens up a new world of precision and flexibility.

The introduction of CSS container queries and container-relative units is an exciting development. It marks another step forward in our ongoing journey to create more responsive, adaptable, and user-friendly web experiences. This is not just a new tool in our toolbox – it’s a game changer.

Remember, the best way to understand and master these new concepts is by experimenting. So, get out there and start playing around with container queries and the new units. Let's embrace these changes and see where this journey takes us.

Until next time, keep coding, keep exploring, and most importantly, keep having fun with it. It's an exciting time to be in web development!