CSS Container Queries

I thaught I knew what container queries were but I never investigated on them. I wish it had been in the CSS To The Rescue course as I'm only scratching the surface in this article.

What is a container

When talking about a container, what do we actually mean by this? What defines a container? As a developer you mostly refer to a container as an element that has smaller elements insde of it. But what if I told you there is a CSS property which makes a container a container. It's as easy as it sounds, introducing the contain: propery.

What are container queries

Container queries allow containers to have unique styling depending on the screen size of a user. Only the elements inside a container change within it instead of all the elements in the viewport.

Steffanie Eckles, author at smashing magazine word it like this:

Container queries move us beyond considering only the viewport, and allow any component or element to respond to a defined container’s width. So while you may still use a responsive grid for overall page layout, a component within that grid can 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.

This is how Ahmed Shadeed looks at it the difference between media queries and container queries, I will use more of his examples later.

Container queries are actually a quite recent addition to CSS. It isn't even fully supported in most browsers yet. Bcause if this you can look at it as a progressive enhancement. You can add queries on top of existing styles to furhter improve the experience for users who have supported browsers.

Miriam Suzanne had a big influence on the implementation of container queries. She is a well known author of many articles about container styling. She also works for mozilla and is a web developer herself.

How do container queries work

As the word queries suggests, it is basicly the same as media queries but instead working for the whole viewport it works only for a container. The syntax for container queries is also quite similar to media queries. You can see an example of the syntax below.

.parent {
   contain: layout inline-size
}

.child {
   padding: 0.5em
   font-size: 1em
}

@container (min-width: 312px) {
  .child {
    padding: 1em
    font-size: 1.5em
  }
}

The parent has to be given the contain property. This creates a container context and let's the parent know the child can change sizes. The value inline-size will make child repsond to the parent’s width only. Now that we have that defined you can start with the query part. Obiously it has to start "mobile first" which is also common practice with media queries. The smallest size is coded first and as the container grows bigger the stlyes start to change.

Container queries use cases

Ahmed Shadid wrote a great article about container queries (linked below) and did some experiments with it. He made some concepts in Chrome Canary where container queries are already supported. I will go over some examples he greated.

In his first example he has a the following layout. First it's three columns, then two and eventually one as the screen becomes wider. But as you can see the items get too wide. This is because the property grid-template-columns: autofit is used. The elements inside the card doesn't change. That's where container queries come in.

So if the containers knew their width which they now can, elements within them can change style. Instead of the text going underneath the image it now goes to the right side of the image, utilizing the space. Or in case of the biggest item. The text can even go over the image.

This pignation example is also great. Because pignation can have drasticly different appearences on different screen sizes container queries work great. Allthough I think this is still possible with media queries but this is just a smarter way of doing it.

In this last case two different styling is used on the same page twice but in diffirent sizes. This is actually really effcient use of code. This wouldn't be possible with media queries with the same amount of code.

In the sidebar you see the smaller version and in the main you see the larger version. I this case their both used on the same page but these styles would obiously still work if you switched to mobile. All the cards would turn into the same one as the left card.

Resizing

It can be tedious to test the resizing the containers you just styled. So Ahmed suggests to use the CSS property resize: horizontal or resize: vertical to make this testing process easier. That way you don't have to resize your viewport all the time

Wrapping up

I think container queries will become the new media queries when it will be fully supported in the future. It also makes much more sense to me to query containers instead of the viewport. The containers themselves become more intellegent in a way because they react to their own size changes. Not that media queries won't be used or anthing because they are still very usefull but container queries will give much more flexibilty when creating complex layouts with a lot of elements. Conatiner queries paired with CSS Grid will do wonders.

Sources

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/

https://ishadeed.com/article/say-hello-to-css-container-queries/

https://ethanmarcotte.com/wrote/on-container-queries/