Modern CSS - Container Queries are almost here!

Css May 3, 2021

I am giving a talk at the INNOQ Technology Night (in German) about modern CSS and container queries. The talk is audio-only, but I wanted to provide this page as a reference for those who want to follow along during my talk or for those who want to look up the links after the fact.

The CSS isn’t easy comic by Julia Evans really encapsulates my feeling about CSS:

CSS may seem easy, but layout is a really difficult problem. Modern CSS has evolved to the point where it can very eloquently solve this problem – and it’s getting better all the time.

For those who want a deeper look at the intricacies which are involved in website layout, I recommend this in-depth look at how page layout is implemented in browsers from the Web Browser Engineering book.

When web development began, CSS didn’t provide any mechanisms for implementing layout. This is why web developers ended up misusing tables and floats to do layout. Over the years, we’ve gotten Flexbox and CSS Grid – changes that were always backwards compatible and drastically improved what we as developers can do.

CSS Containment

The CSS Containment spec has also been added to modern browsers. With CSS containment, we can give the browser more contextual information about our webpage:

  • contain: layout - tells the browser that everything inside the element does not affect anything else on the page
  • contain: size - tells the browser that the size of the children cannot affect the size of the element itself
  • contain: paint - tells the browser that all of the visible content will be printed inside of the element’s box – anything outside of the box will be clipped

Container Queries

Because of the progress made with CSS containment, we now have the tools to implement container queries in a way that doesn’t totally kill performance. Here is the Container Queries spec proposed by Miriam Suzanne. An implementation of this spec is now available behind a flag in the Canary Release of the Chome browser.

These excellent tutorials give a good overview of what we can currently do with container queries, as well as providing some rationale for why we need them and examples of how to use them:

TL;DR

We will be able to activate CSS containment for a specific area in our markup:

main {
  contain: layout inline-size;
}

And then we can declaratively write CSS which will only activate when our component has enough space.

.component { /* Base CSS for component */ }

@container (min-width: 25rem) {
  .component {
    /* Styles when the component has more space */
  }
}

An important key to this puzzle is progressive enhancement. We can create a minimal viable experience for all modern browsers, and then add container queries as an optional feature – older browsers will ignore them because they don’t understand them yet, but if our minimal viable experience is good enough, users won’t even realize that they don’t have the optimal experience

If you are interested in this topic, consider checking out my other resources: