CSS container queries are lastly right here

I can’t include my pleasure whereas writing the primary few phrases for this text. Women and gents, CSS container queries are lastly right here! Sure, you learn that proper. They’re at the moment supported in Google Chrome (105) and shortly in Safari 16. This can be a large milestone for internet improvement. For me, I see it identical to once we began constructing responsive web sites by way of media queries, which is a sport changer. Container queries are equally vital (from my perspective, at the very least).

After I wrote the first article on container queries again in April 2021, the syntax modified a number of instances, and I see this as an opportunity to put in writing a contemporary article and maintain the earlier one for reference. On this article, I’ll clarify how container queries work, how we are able to use them, and what the syntax seems to be like, and share a couple of real-life examples and use instances.

Are you able to see the brand new game-changer CSS characteristic? Let’s dive in.

Introduction

When designing a part, we have a tendency so as to add completely different variations and alter them both primarily based on a CSS class, or the viewport measurement. This isn’t perfect in all instances and might pressure us to put in writing CSS primarily based on a variation class or a viewport measurement.

Think about the next instance.

We have now a card part that ought to change to a horizontal fashion when the viewport is giant sufficient. On the first look, which may sound okay. Nevertheless, it’s a bit complicated when you consider it extra deeply.

If we need to use the identical card in other places, like in a sidebar the place the house is tight, and in the primary part the place we’ve got more room, we’ll want to make use of class variations.

.c-article {
  
}

@media (min-width: 800px) {
  
  .c-article--horizontal {
    show: flex;
    align-items: middle;
  }
}

If we don’t apply the variation class to the cardboard part, we’d find yourself with one thing like the next.

Discover how the cardboard part in its stacked model is just too giant. For me, this doesn’t look good from a UI perspective.

With container queries, we are able to merely write CSS that responds to the dad or mum or container width. Think about the next determine:

Discover how in a media question, we question a part primarily based on the viewport or the display screen width. In container queries, the identical occurs, however on the dad or mum degree.

What are container queries?

A approach to question a part towards the closest dad or mum that has an outlined containment by way of the container-type property.

That’s it. It’s simply how we used to put in writing CSS in media queries, however for a part degree.

Container queries syntax

To question a part primarily based on its dad or mum width, we have to use the container-type property. Think about the next instance:

.wrapper {
  container-type: inline-size;
}

With that, we are able to begin to question a part. Within the following instance, if the container of the .card factor has a width equal to 400px or bigger, we have to add a particular fashion.

@container (min-width: 400px) {
  .card {
    show: flex;
    align-items: middle;
  }
}

Whereas the above works, it will probably turn into a bit overwhelming when having a number of containers. To keep away from that, It’s higher to identify a container.

.wrapper {
  container-type: inline-size;
  container-name: card;
}

Now, we are able to append the container identify subsequent to @container like the next:

@container card (min-width: 400px) {
  .card {
    show: flex;
    align-items: middle;
  }
}

Let’s revisit the preliminary instance and see how we are able to get profit from container queries to keep away from having a number of CSS lessons.

.wrapper {
  container-type: inline-size;
  container-name: card;
}

.c-article {
  
}

@container card (min-width: 400px) {
  
  .c-article {
    show: flex;
    align-items: middle;
  }
}

Browser help

Container queries are actually supported in Chrome 105, and shortly in Safari 16.

You’ll be able to test them from this hyperlink. Completely happy resizing!

Outro

This can be a huge day for CSS, and I can’t wait to see what you’ll create with CSS container queries.

I wrote an e-book

I’m excited to let you recognize that I wrote an e-book about Debugging CSS.

In the event you’re , head over to debuggingcss.com for a free preview.