Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (78 sloc) 6.91 KB
title tags imgOptions postRank
The Origin Story of Container Queries
research
popular-posts
duration
30d
4

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

2013 April 1
{% assign imgObj = "ianstormtaylor" | avatarObject %}{% img imgObj, imgOptions %}Ian Storm Taylor’s Media Queries are a Hack blog post
2013 March 17
{% assign imgObj = "joecritch" | avatarObject %}{% img imgObj, imgOptions %}Joe Critch’s container-queries
2013 March 8
{% assign imgObj = "mlrawlings" | avatarObject %}{% img imgObj, imgOptions %}Michael Rawlings’ containerqueries
2013 February 7
{% assign imgObj = "jon_neal" | avatarObject %}{% img imgObj, imgOptions %}Jon Neal’s (now ⛔️ deleted) Thoughts on Media Queries for Elements
2013 February 7
{% assign imgObj = "necolas" | avatarObject %}{% img imgObj, imgOptions %}Nicolas Gallagher’s (now ⛔️ deleted) tweet
2012 April 21
{% assign imgObj = "jon_neal" | avatarObject %}{% img imgObj, imgOptions %}Jon Neal’s MediaClass
2012 January 23
{% assign imgObj = "paul_irish" | avatarObject %}{% img imgObj, imgOptions %}Paul Irish’s tweet reply to a (now ⛔️ deleted) {% assign imgObj = "ianstormtaylor" | avatarObject %}{% img imgObj, imgOptions %}Ian Storm Taylor tweet (date unknown)
2011 September 1
A question posted by user Damon on Stack Overflow
2011 July 15
{% assign imgObj = "andyhume" | avatarObject %}{% img imgObj, imgOptions %}Andy Hume’s (now ⛔️ deleted) Responsive Containers blog post
2011 July 14
{% assign imgObj = "andyhume" | avatarObject %}{% img imgObj, imgOptions %}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 {{ "14 Jul 2011 11:40:00 CDT" | timePosted }} ago

For comparison, Ethan Marcotte’s original A List Apart article on Responsive Web Design was published {{ "25 May 2010 00:00:00 GMT" | timePosted }} ago on May 25, 2010.

The first large-scale Responsive Web Design project at the Boston Globe was launched after container queries were planted {{ "9 Sep 2011 00:00:00 GMT" | timePosted }} 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, 🤷‍♂️.

You can’t perform that action at this time.