Day 56: container queries

posted on 12.12.2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

You can use media queries to style elements based on features of the browser viewport, for example, min-width, max-height, or orientation. With container queries, you can now do the same but with any parent element. Instead of the viewport, you can now listen to properties and features of a containing element.

You can query all kinds of things, not just the width, height, or orientation, but for example custom properties, as well. There’s an important difference between size container features (width, height, inline-size, block-size, aspect-ratio, orientation) and style container features (computed values). If you want to query size container features, you have to define a size container explicitly. That’s because they require special size containment in order to function.

Miriam Suzanne explains it in Use the Right Container Query Syntax like that:

Normally, the size of an element would be based on the size of its contents – but if we query that size, and change the contents based on the query, we have an infinite loop. Size containment breaks that loop by ensuring the size of a container is not based on the size of its contents.

You can create a size container using the container-type property. There are two options: inline-size (establishes size containment on the inline axis) and size (establishes size containment on the inline and block axis). There’s no dedicated block-size option and we should be careful using size, according to Miriam Suzanne. I don’t really understand why yet, but I’ll dig into that in a separate post.

<section>
  <h2>Latest news</h2>

  <div class="card">
    <h2>Hey, I'm a card!</h2>
  </div>
</section>

/* That's our size container. */
section {
  width: 50%;
  container-type: inline-size;
}

/* Default styles for the card. */
.card {
  background-color: yellow;
  border: 5px solid;
}

We can query the container using @container.

/* The background-color of the .card 
changes to hotpink once the section
has a min-width of 500px */
@container (min-width: 500px) {
  .card {
    background-color: hotpink;
  }
}

/* For comparison: The border-style
of the .card  changes to dotted once
the viewport has a min-width of 500px */
@media (min-width: 500px) {
  .card {
    border-style: dotted;
  }
}

You can grab and resize the <section> by clicking and dragging it in the bottom right corner. The background color of the .card changes as soon as the width of the parent section hits 500px.

Hey, I'm a card!

See on CodePen

Day 56: container queries

Hey, I'm a card!

Further reading