The Origin Story of Container Queries
Update November 2022 Container Queries are now available in stable browser versions! 🎉🎉🎉🎉
- ✅ 2022 October 2
- Edge 106 ships with Container Query support.
- ✅ 2022 September 22
- Chrome 106 ships with Container Query support.
- ✅ 2022 September 11
- Safari 16 ships with Container Query support.
Container Queries are an often requested feature of the web platform. It has become almost cliché to mention it when talking about problems we’d like the web platform to solve. Container Queries would go a long way toward helping web developers do their jobs better and its omission is a huge limitation when developing component-based code for the web.
Everyone wants it, but it sure seems like no one is actively working on it. But I’m not here to soapbox about that. Here I only mean to discover the earliest mention of Container Queries (or Element Queries or any implementations of this similar idea) to learn how long this feature has been requested by web developers. I’m curious: is this length of time customary for a new feature of the web platform? Or is something else going on?
Here are the earliest mentions of Container Queries that the community was able to dig up (in reverse chronological order):
- 2021 March 26
-
Chrome Canary adds an experimental flag for a container queries implementation!
- via Una Kravets
- 2014 December 8
-
Tommy Hodgins’
eqcss
- via Mattia Astorino
- 2013 April 1
-
Ian Storm Taylor’s Media Queries are a Hack blog post
- via Patrick Fulton
- 2013 March 17
-
Joe Critch’s
container-queries
- via Tommy Hodgins
- 2013 March 8
-
Michael Rawlings’
containerqueries
- 2013 February 7
-
Jon Neal’s (now ⛔️ deleted) Thoughts on Media Queries for Elements
- via Jay Hoffman
- 2013 February 7
-
Nicolas Gallagher’s (now ⛔️ deleted) tweet
- via Eric Portis and Jay Hoffman
- 2012 April 21
-
Jon Neal’s
MediaClass
- 2012 January 23
- Paul Irish’s tweet reply to a (now ⛔️ deleted) Ian Storm Taylor tweet (date unknown)
- 2011 September 1
-
A question posted by user
Damon
on Stack Overflow- via Jay Hoffman
- 2011 July 15
- Andy Hume’s (now ⛔️ deleted) Responsive Containers blog post
- 2011 July 14
-
Andy Hume’s
selector-queries
Andy Hume’s work, thus far, seems to be the original! If you have others that pre-date 2014 (even if they aren’t before Andy’s), please reply to this tweet.
Look at all this link rot! We’re so lucky that many of these entries were preserved by The Wayback Machine. You too can donate to the Internet Archive to support their obviously valuable mission.
The Container Queries idea was planted 13.4 years ago
For comparison, Ethan Marcotte’s original A List Apart article on Responsive Web Design was published 14.5 years ago on May 25, 2010.
The first large-scale Responsive Web Design project at the Boston Globe was launched after container queries were planted 13.2 years ago on September 9, 2011. The Boston Globe launch further planted the seeds for responsive image approaches that would result in web browser implementations of both <img srcset>
and <picture>
just three years later in 2014.
In conclusion, 🤷♂️.
6 Comments
@FrankTldr
Appreciate the contained conclusion for this query.
@rikschennink
It's ridiculous.
@zachleat
I do understand that web standards can be slow. But, yeah.
@rikschennink
Me too, and I truly understand that there are some caveats, but maybe just accepting that a perfect solution isn't possible at the moment and giving us something in the general direction of container queries would at least start things moving.
@kettanaito
One day.
@equinusocio
🎉