Container Queries

April 7, 2022

Update: August 30, 2022

Container queries are now supported in Chrome 105. This is a momentous occasion. Developers have been wanting container queries for years and now they have finally been implemented in a browser. Safari will soon follow in Safari 16. Firefox is working on implementation but has not shared when they think it will be ready. I have updated this article in a couple of places with new links to recent articles on updated syntax.

Update: February 15, 2023

Container queries are not supported in all major browsers with the release of Firefox 110.

I wanted to write about container queries last year when there was a lot of buzz in the developer community about the topic. The buzz was generated by a new proposal by Miriam Suzanne followed by an experimental implementation in Chrome Canary. Several developers wrote articles between April and May as they began to experiment in Chrome Canary. Miriam Suzanne talked about container queries at the Hover 21 conference and on the Smashing Podcast.

I started formulating a lot of the ideas for this post while on vacation in May 2021. After I returned home, my workload picked up, and writing a post about container queries never materialized.

But the ideas for the post continued to fester in my mind. I did research and gathered links at various times intending to put them together in this post. And now a lull in my development work has given me the opportunity to revisit and finally put down these thoughts.

I don’t intend to talk about how to write code to utilize container queries. A lot of smart people have already done that. My job is to point you to those excellent resources. But I also want to put more of a personal spin on it and give a brief history of the container query conversation and where we are today. Feel free to skip ahead to my list of container query resources if you would rather skip my personal spin.

What are container queries?

Even if I am not going to go deep into talking about container queries, it will help to give a brief overview of what they are and why like so many other developers, I am excited about them coming to browsers in the next year or so (fingers crossed).

In building responsive websites, we use media queries to set up conditions for our layouts to respond to different browser window widths or heights. This is the most common way that I use media queries. In this scenario, I am modifying my layouts based on the width of the viewport. As the viewport gets wider, I moved from a one-column layout to more complex layouts of two or more columns. It is usually at this stage that I employ the use of CSS Grid in my layouts.

Container queries are very similar to media queries. But the big difference is that instead of responding to the size of the viewport, we can now respond to the size of a parent container (an element like a div) and modify our layouts based on the width of that containing element.

This illustration from Ahmad Shadeed is one of the best visual explainers that I have seen. Source:  Say Hello to CSS Container Queries

This opens the door for creating components that will look different depending on their parent container. For example, we could create a component that is used in a sidebar in one area of our site and use that same component in a wider container in other places. And depending on the space available, that component will be styled differently based on the size of the containing element.

An example of how the same component can look different in two different “containers”.

This type of tool will be extremely valuable to developers who work with design systems and components. These developers have been wishing for container queries to become a reality for years.

Where it all began for me

I believe I came across the idea of container queries for the first time in April 0f 2016 through an article that Mat Marquis wrote for A List Apart, Container Queries: Once More Unto the Breach. At that point in time, the solution that we now refer to as “container queries” were referred to as “element queries.” It was one of those articles that I read and filed away for future reference. It was something to be aware of but without a practical implementation in the browser, it was not something I put a lot of energy into at the time.

In 2017, I read Tommy Hodgins article, Element Queries, And How to Use Them Today. Again, it was something that sparked my interest and I saw the value of a solution different than media queries. But again I filed it away for future reference.

In March 2017, I was just starting to use CSS Grid Layout in my work. During some downtime in my freelance work, I decided to try to improve my learning by taking some layouts on existing sites and reworking them with CSS Grid and Flexbox. I decided to recreate the Sonic homepage in Codepen with these newer CSS layout tools. As I was working on the main content area, I wanted to be able to set the height of the grid items in proportion to the width (the images of the food with their description).

Sidenote: What I really needed as a solution to this problem was aspect-ratio, which hit browsers last year and I utilize for every project.

One of the replies to my tweet was from Tommy Hodgins about his EQCSS project. He has done some work on writing a spec but also in creating a “CSS Reprocessor” that you to implement element queries. Now there was a viable solution to start using “element” or “container queries” in the browser. This really got my attention. Tommy told me about using the element width unit (pre-cursor to container query units). I ended up using another solution for my Sonic menu. But it led me to do a deeper dive into the world of container queries, which were being referred to as “container queries” or “element queries” depending on the preferences of those writing about them.

As I did a deeper dive, I revisited Mat Marquis’ article and ended up recreating his original demo with EQCSS on Codepen. It was fun to experiment with and it helped solidify the idea and advantages of container queries for the future.

Continuing to keep an eye on things

After doing a bit of a deep dive and getting my hands dirty (“just build websites”), I continued to read articles about container queries as they came along. And from time to time, several developers would verbally express their desire to have a working implementation of container queries in the browser. As time moved along, I stopped seeing references to “element queries” and most everyone seemed to adopt the common syntax of “container queries.”

Momentum in 2021

Things really began to move forward quickly last year after Miriam Suzanne wrote a proposal for container queries in December 2020. The draft builds upon ideas previously proposed by other web standards experts like David Baron. What really moved things forward was that Chrome Canary include an experimental implementation of container queries behind a flag.

Developers now had a working implementation that they could begin to build things using container queries and give feedback. This led to many developers experimenting and writing about it. As more was written about container queries, more developers played around with it and gave feedback.

Soon after Chrome Canary released its experimental implementation, many developers started writing about their experiments and writing how-to guides so that others could start learning the concepts and playing around with container queries. I reference most of the articles below.

I also found out more about container queries by hearing from Miriam Suzanne when I attended the Hover 2021 online conference at the end of April. I also heard Miriam talk about container queries and other future CSS (Cascade Layers) on the Smashing Podcast.

Stephanie Eckels included container queries in her 12 Days of Dev project at the end of the year. Bramus Van Damme included container queries in his list of new CSS that he believes will be implemented in browsers in 2022.

Why bother spending time learning this now when it is still experimental?

So why bother learning about container queries today when they are not yet stable and ready to use in our everyday work?

First, there is incredible value in keeping an eye on technologies that will soon be available to expand your toolkit. Container queries solve a problem that many developers have been asking for a solution for many years. Getting a jumpstart now will help prepare you to determine if container queries might be the right tool to solve your problems in projects you build in the future.

I kept an eye on the progress of CSS Grid Layout many years before it was implemented. By keeping track of it, I was able to track the evolution of its development and knew that it would be implemented in the browsers in early 2017. I took some time at the end of December 2016 to learn about CSS Grid, primarily from Rachel Andrew, and thanks to the support of feature queries (@supports), I implemented CSS Grid Layout as a progressive enhancement before it was implemented in the browsers.

One of the characteristics of a good craftsman is to bed educated on the best tool for the job. We are probably going to see the implementation of container queries in the browsers in the next two years. Why not start preparing for it now?

Second, you can help shape the development of the container query implementation by playing around with it today and then giving your feedback to the CSS Working Group and browser makers. If you find a bug, have a feature request, or want to know the current status, check out the css-contain issues on GitHub.

Getting started today

Update: August 30, 2022

Container queries have been implemented in Chrome 105 as of today. You can start using container queries as a progressive enhancement strategy.

The container query implementation in Chrome Canary has continued to evolve and the proposed spec has evolved as developers have given feedback. Some of the syntaxes have changed so be aware of that as you read the articles below.

In order to start playing around with container queries today, you will need to download Chrome Canary and then enable the functionality by visiting chrome://flags/#enable-container-queries and enabling them. A restart will be required. Most of the articles below will walk you through that process.

Container queries were added to Safari Technology Preview as of March 23. It is enabled by default.

Resources and Articles

You will need Chrome Canary with the “Enable CSS Container Queries” flag enabled or Safari Technology Preview 142 or higher to view the demos below.

Recent Articles (August 2022)

  • Use the Right Container Query Syntax – Miriam Suzanne explains how the syntax for container queries has changed. This is a must read to make sure you are using the correct syntax. Many of the articles below will contain old syntax that no longer works.
  • Container queries are finally here – Ahmad Shadeed first wrote about container queries in April 2021. In this new article, he explains how container queries work, how we can use them, and what the syntax looks like, and share a few real-life examples and use cases.

Written or updated more recently (April 2022 – when I originally wrote this post)

Written in April, May, and June of 2021 – warning that some syntax for container queries has changed and may no longer work in demos referenced in these articles

Documentation

Polyfill

  • Container Query Polyfill for Chrome Developers – Using the polyfill will cause FOUC (flash of unstyled content) so that would be something to consider if you want to use the polyfill in a production site before container queries hit the browsers. Learn more about it on CSS Tricks.

Moving forward

Things have been pretty quiet about container queries for the first quarter of 2022. But there have been a couple of significant things to note. The CSS Containment Module Level 3, Editor’s Draft was released on March 31. And on March 23, Safari Technology Preview added support for container queries as an experimental feature enabled by default.

Jen Simmons and Stephanie Eckels are slated to give talks that cover container queries at the Hover ’22 conference happening at the end of April. Stephanie will be looking at practical use cases for container queries. As conference season begins to ramp up, my guess is that more developers will be addressing container queries and we start to see some more articles written.

Given where things are at currently, I don’t think we are going to see a stable browser implementation of container queries in 2022. Firefox has yet to implement an experimental version in Firefox Developer Edition and I could not find any information on how soon that might happen. That said, I do think there is a lot of positive momentum and I hope to see a stable browser implementation by 2023.

Comments are closed.