Zach’s ugly mug (his face)

Zach Leatherman

The Origin Story of Container Queries

December 12, 2019 #8 Popular

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):

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 8.8 years ago

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

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
Eleventy Crash Course with Nick and Zach—NebraskaJS Omaha
Next
Building Exclusive Features For Open Collective Contributors on Netlify

19 Retweets

KatherineSchubiduDilip ShuklaIhor Zenich 🇺🇦Jules SkoppOren ShalevJoan BallesterTim TrenthamBrad FrostIain van der WielAsbjørnRhys LloydResponsive Designthomas (en grève)Christian SchaeferWill ᕙ(⇀‸↼‶)ᕗPatrick FultonMorten @ homeMicah Godbolt

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 @ homeevanDave RupertFabio VennialecMicah GodboltSnook
1 Bookmark
  1. Jeremy Keith

    Jeremy Keith https://adactio.com/ #

    ThE OrigIN sTORy oF cOnTaiNER quERiES—ZAChLEAt.cOM DeCEmBer 13Th, 2019 everyOnE waNTS It, bUT it suRe seEMs liKe No ONE is ACtIvELY wORkiNg On it. ZAch tRACeS tHE eaRlIEst InKLINgs oF CoNtaINEr qUERIes TO aN oLd bLOG post OF ANDy’S—bAcK wHeN he was AT clEaRleFT—CalLEd … Truncated

6 Replies
  1. Mattia Astorino

    Mattia Astorino @equinusocio #

    🎉

  2. Artem Zakharchenko

    Artem Zakharchenko @kettanaito #

    One day.

  3. Rik Schennink

    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.

  4. Zach Leatherman

    Zach Leatherman @zachleat #

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

  5. Rik Schennink

    Rik Schennink @rikschennink #

    it's RIdICuLous.

  6. Frank Taillandier

    Frank Taillandier @FrankTldr #

    Appreciate the contained conclusion for this query.

    35 Mentions
    1. Joulse

      Joulse @Joulse_ #

      The Origin Story of Container Queries zachleat.com/web/origin-con…

    2. Brett Belau

      Brett Belau @bbelau #

      The Origin Story of Container Queries zachleat.com/web/origin-con…

    3. Justin Yost

      Justin Yost @justinyost #

      The Origin Story of Container Queries zachleat.com/web/origin-con… 8 years in the making and counting

    4. find-right-software.com #

    5. Inspirational Website of the Week: CANALS An exceptional horizontal design that gets elevated by smooth and well timed animations. Get inspired This content is sponsored via Thought Leaders Join the 20,000+ developers who love Clubhouse “I can’t say enough good things about … Truncated

    6. Reme

      Reme @RemeJuan #

      zachleat.com/web/origin-con…

    7. Blue Archer

      Blue Archer @BlueArcherPGH #

      Everything you need to know about Container Queries --> zachleat.com/web/origin-con…

    8. Chris Collins

      Chris Collins @scottishstoater #

      I think the web community need to make more noise about container queries! 😫

    9. Doug Stewart

      Doug Stewart @dougoftheabaci #

      In short, give us #ContainerQueries you cowards! zachleat.com/web/origin-con… cc: @mozhacks @ChromiumDev @Apple @MicrosoftEdge

    10. cornerwire.com #

    11. Code Tips

      Code Tips @RealCodeTips #

      The Origin Story of Container Queries zachleat.com/web/origin-con…

    12. admin https://nexstair.com/author/admin/ #

      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 omissi… Truncated

    13. Finest Design LTD

      Finest Design LTD @Finest_DesignUK #

      The Origin Story of Container Queries zachleat.com/web/origin-con… #html #wordpress

    14. Bloopix

      Bloopix @Bloopix_design #

      bloopix.design — The Origin Story of Container Queries zachleat.com/web/origin-con…

    15. GBird7

      GBird7 @Bird7G #

      The Origin Story of Container Queries—zachleat.com #WebDesign #webdev #html via twinybots.ch zachleat.com/web/origin-con…

    16. freeimg.eu #

    17. SB

      SB @amruthasuri #

      The Origin Story of Container Queries—zachleat.com #WebDesign #webdev #html via twinybots.ch zachleat.com/web/origin-con…

    18. VizWorld™

      VizWorld™ @VizWorld #

      The Origin Story of Container Queries—zachleat.com #WebDesign #webdev #html zachleat.com/web/origin-con…

    19. northwhile

      northwhile @northwhile1 #

      The Origin Story of Container Queries—zachleat.com #WebDesign #webdev #html via twinybots.ch zachleat.com/web/origin-con…

    20. Fullstack Developer

      Fullstack Developer @FullstackDevJS #

      The Origin Story of Container Queries #Frontend #devTips #Devlife #Design #Css #HTML zachleat.com/web/origin-con…

    21. Nextwave Concepts

      Nextwave Concepts @Nextwave #

      The Origin Story of Container Queries—zachleat.com #WebDesign #webdev #html via twinybots.ch zachleat.com/web/origin-con…

    22. wpnewshub.com #

    23. www.webmastersgallery.com #

    24. Code Tips

      Code Tips @RealCodeTips #

      The Origin Story of Container Queries zachleat.com/web/origin-con…

    25. rssfeeds.cloudsite.builders #

      Show original post The Origin Story of Container Queries Container queries don’t exist today but a lot of web developers have been arguing in their favor lately. At first, the idea sounds relatively simple: whereas media queries allow us to make style changes based on … Truncated

    26. codingnova https://codingnova.com/index.php/author/robertteah/ #

      Container queries don’t exist today but a lot of web developers have been arguing in their favor lately. At first, the idea sounds relatively simple: whereas media queries allow us to make style changes based on the width of the browser, container queries would allow us to make s… Truncated

    27. Feedpushr feeds.

      Feedpushr feeds. @feedpushr #

      The Origin Story of Container Queries zachleat.com/web/origin-con…

    28. Andy Hume

      Andy Hume @andyhume #

      Fun throw back to July 2011. I wanted to call them Element Queries. @adactio suggested Selector Queries. Funny how neither of those caught people’s imagination in the end. cc others who contributed: @adactio, @joshje, @scottjehl

    29. Ринат Валиуллов

      Ринат Валиуллов @4rontender #

      sLOw ANd HArD ImpLEmEnTatIOn...

    30. Brad Frost

      Brad Frost @brad_frost #

      All I want for Christmas is container queries. twitter.com/zachleat/statu…

    31. Adactio Links

      Adactio Links @adactioLinks #

      The Origin Story of Container Queries—zachleat.com zachleat.com/web/origin-con…

    32. Peter Wilson 🏳️‍🌈

      Peter Wilson 🏳️‍🌈 @pwcc #

      acCoRDING tO @zAChLeAT, ThiS YEaR COmMEMOrates A BLOoDY lOnG TImE siNCe ElemenT, UM COnTAinER, uM selECTor queriES WeRE FIrSt suGGEsTEd. zachLEat.coM/weB/orIGiN-cON…

    33. Jay Hoffmann

      Jay Hoffmann @jay_hoffmann #

      zacH'S out HERE trYING tO STeAl mY JOb

    34. 全部入りHTML太郎

      全部入りHTML太郎 @_yuheiy #

      The Origin Story of Container Queries—zachleat.com zachleat.com/web/origin-con…

    35. Šime Vidas

      Šime Vidas @simevidas #

      Container Queries zachleat.com/web/origin-con…: “Everyone wants it, but it sure seems like no one is actively working on it.” Is there a place that succinctly describes its use-cases? That would help.