Zach’s ugly mug (his face) Zach Leatherman

The Origin Story of Container Queries

December 12, 2019

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!
2014 December 8
innovati’s AvatarTommy Hodgins’ eqcss
2013 April 1
ianstormtaylor’s AvatarIan Storm Taylor’s Media Queries are a Hack blog post
2013 March 17
joecritch’s AvatarJoe Critch’s container-queries
2013 March 8
mlrawlings’s AvatarMichael Rawlings’ containerqueries
2013 February 7
jon_neal’s AvatarJon Neal’s (now ⛔️ deleted) Thoughts on Media Queries for Elements
2013 February 7
necolas’s AvatarNicolas Gallagher’s (now ⛔️ deleted) tweet
2012 April 21
jon_neal’s AvatarJon Neal’s MediaClass
2012 January 23
paul_irish’s AvatarPaul Irish’s tweet reply to a (now ⛔️ deleted) ianstormtaylor’s AvatarIan Storm Taylor tweet (date unknown)
2011 September 1
A question posted by user Damon on Stack Overflow
2011 July 15
andyhume’s AvatarAndy Hume’s (now ⛔️ deleted) Responsive Containers blog post
2011 July 14
andyhume’s AvatarAndy 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 12.8 years ago

For comparison, Ethan Marcotte’s original A List Apart article on Responsive Web Design was published 13.9 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 12.6 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, 🤷‍♂️.


< Newer
Eleventy Crash Course with Nick and Zach—NebraskaJS Omaha
Older >
Building Exclusive Features For Open Collective Contributors on Netlify

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

59 Reposts

Šime Vidas全部入りHTML太郎Micah GodboltJay HoffmannMorten @ homePatrick FultonPeter Wilson 🏳️‍🌈Adactio LinksWill ᕙ(⇀‸↼‶)ᕗChristian Schaeferthomas (en grève)Responsive DesignRhys LloydAsbjørnIain van der WielBrad FrostBrad FrostTim TrenthamJoan BallesterРинат ВалиулловOren ShalevAndy HumeFeedpushr feeds.IndieWeb Avatar for https://codingnova.comIndieWeb Avatar for https://rssfeeds.cloudsite.buildersCode TipsIndieWeb Avatar for https://wpnewshub.comNextwave ConceptsFullstack DevelopernorthwhileVizWorld™SBIndieWeb Avatar for https://freeimg.euGBird7BloopixFinest Design LTDIndieWeb Avatar for https://nexstair.comJules SkoppIhor Zenich 🇺🇦Dilip ShuklaSchubiduCode TipsIndieWeb Avatar for https://cornerwire.comDoug StewartChris CollinsKatherineBlue ArcherRemeIndieWeb Avatar for https://blog.foreverytool.comIndieWeb Avatar for https://find-right-software.comJustin YostBrett BelauJoulseIndieWeb Avatar for https://www.webdirections.orgAndy HumeRachel AndrewIndieWeb Avatar for https://noti.stRachel AndrewIndieWeb Avatar for https://jeffbridgforth.com

71 Likes

Tommy HodginsMattia AstorinoPelle BjerkestrandNicholas JamiesonMichael RawlingsTommy HodginsSchubiduDilip ShuklaJules SkoppDaᴎilo Vәga ▲ 🇨🇱 ‏Rob DiMarzo𝓼𝓮𝓻𝓪𝓹𝓪𝓽𝓱 【ツ】 ☮ ( 📍 🇹🇭 )Benjamin WalshChrisTommy HodginsJon WagonerMike EnglandTope OgunleyeРинат ВалиулловTodd ParkerAngel PonceAndrewsMarvin Hagemeister ⚛️ 🇩🇪Kathleen McMahonDylan BroussardPaviel ŁaŭcevičJan BayerShane Duff𝕄𝕚𝕜𝕖Jake DohmAfiq Xilantra AzmiSteven JarvisMax “Tim Van Damme” Voltar [emoji]Steve JamessonBrad FrostJay HoffmannConstantJoe WrightDavid Toewsthomas (en grève)emmett naughtonDrew PowersEthan MarcotteJames DocAndy Bell 🌹Franco GilioJohan T.Iain van der WielPhilip FordWade HammesSamuel HauserMatt SecoskePaul Melerothomas (en grève)Todd Parkeremmett naughtonMichelle BarkerDaᴎilo Vәga ▲ 🇨🇱 ‏Arun AgrawalWill ᕙ(⇀‸↼‶)ᕗBrett JankordGaël PoupardPatrick FultonHenning KochMorten @ homeevanFabio VenniDave RupertalecMicah GodboltSnook

1 Bookmark

IndieWeb Avatar for https://adactio.com
6 Comments
  1. Frank Taillandier

    @FrankTldr

    Appreciate the contained conclusion for this query.

  2. Rik Schennink

    @rikschennink

    It's RIDicuLOUs.

  3. Zach Leatherman

    @zachleat

    I do understand that web standards can be slow. But, yeah.

  4. Rik Schennink

    @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.

  5. Artem Zakharchenko

    @kettanaito

    One day.

  6. Mattia Astorino

    @equinusocio

    🎉

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)