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 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.
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.
Wish there was a way to set height of element in proportion to width in CSS. So if I wanted a square, I could set height to 100% of width.
— Jeff Bridgforth (@webcraftsman) March 9, 2017
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.”
- Ethan Marcotte wrote a couple of articles in 2017, On Container Queries and A Bit More On Container Queries
- Paul Robert Lloyd wrote an article in response to Ethan’s first article, Questioning Container Queries, in which he shared his thoughts on why he was not sold on the idea that we need container queries
- Phillip Walton’s Responsive Components: a Solution to the Container Queries Problem proposed a strategy of building responsive components that could utilize existing Web APIs and not have to wait for a container query solution in the browser.
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)
- Container Queries lesson that was part of Stephanie Eckels’s 12 Days of Dev (December 2021). I would suggest starting here because it had more up-to-date syntax than the other articles below which were written in the spring of 2021.
- My Codepen of the layout from Stephanie’s tutorial. It includes a syntax update to her original code to make the container query work properly.
- A Primer on CSS Container Queries by Stephanie Eckels (originally written in May 2021 and updated in January 2022)
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
- Una Kravets’ tweet about container queries in Chrome Canary and a Codepen demo (March 26, 2021) – the demo appears to be broken because of updates to the container query syntax. I forked that pen with the updated syntax.
- Container Queries are Actually Coming by Andy Bell (March 31, 2021) – an overview and some examples
- Container Queries, A Quick Start Guide by David A. Herron (April 5, 2021) – I believe this was one of the first tutorials to cover container queries based on Miriam Suzanne’s proposal.
- Say Hello to Container Queries by Ahmad Shadeed (April 13, 2021) – Great introduction to the subject with some great visuals
- CSS Container Queries for Designers by Ahmad Shadeed (May 25, 2021) – Ahmad explores how container queries will likely change the workflow of designers and how they can prepare for it.
- CSS Container Query Units by Ahmad Shadeed (September 18, 2021) – similar to the viewport units of
vw
andvh
- Component-level art direction with CSS Container Queries by Sara Soueidan (May 9, 2021) – A great explanation of the power of container queries to change the component layout with lots of great examples
- The New Responsive: Web design in a component-driven world (Una Kravets, May 19, 2021) – a great introduction to modern web development which includes container queries
- Responsive design and container queries? oh my! by Ethan Marcotte (May 2021)
- A Cornucopia of Container Queries by Geoff Graham on CSS Tricks (June 2021) – a roundup of different articles related to container queries, many of which I have already linked above
- Container Queries and the Future of CSS – a collection of conference video talks that Miriam Suzanne did in May and June of 2021
Documentation
- CSS Container Query Proposal and Explainer by Miriam Suzanne (Jan 2020 with revisions) – this is what really set things a buzz about container queries early last year
- Original Draft of Miriam’s proposal
- CSS Containment Module Level 3, Editor’s Draft (March 31, 2022)
- CSS Container Queries on MDN (Last updated September 15, 2021)
- Can I use ‘CSS container queries’?
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.