Container queries

Every single browser maker has the same stance when it comes to features—they want to hear from developers at the coalface.

“Tell us what you want! We’re listening. We want to know which features to prioritise based on real-world feedback from developers like you.”

“How about container quer—”

“Not that.”

I don’t think it’s an exaggeration to say that literally every web developer I know would love to have container queries. If you’ve worked on any responsive project of any size, you’re bound to have bumped up against the problem of only being able to respond to viewport size, rather than the size of the containing element. Without container queries, our design systems can never be truly modular.

But there’s a divide growing between what our responsive designs need to do, and the tools CSS gives us to meet those needs. We’re making design decisions at smaller and smaller levels, but our code asks us to bind those decisions to a larger, often-irrelevant abstraction of a “page.”

But the message from browser makers has consistently been “it’s simply too hard.”

At the Frontend United conference in Athens a little while back, Jonathan gave a whole talk on the need for container queries. At the same event, Serg gave a talk on Houdini.

Now, as I understand it, Houdini is the CSS arm of the extensible web. Just as web components will allow us to create powerful new HTML without lobbying browser makers, Houdini will allow us to create powerful new CSS features without going cap-in-hand to standards bodies.

At this year’s CSS Day there were two Houdini talks. Tab gave a deep dive, and Philip talked specifically about Houdini as a breakthrough for polyfilling.

During the talks, you could send questions over Twitter that the speaker could be quizzed on afterwards. As Philip was talking, I began to tap out a question: “Could this be used to polyfill container queries?” My thumb was hovering over the tweet button at the very moment that Philip said in his talk, “This could be used to polyfill container queries.”

For that happen, browsers need to implement the layout API for Houdini. But I’m betting that browser makers will be far more receptive to calls to implement the layout API than calls for container queries directly.

Once we have that, there are two possible outcomes:

  1. We try to polyfill container queries and find out that the browser makers were right—it’s simply too hard. This certainty is itself a useful outcome.
  2. We successfully polyfill container queries, and then instead of asking browser makers to figure out implementation, we can hand it to them for standardisation.

But, as Eric Portis points out in his talk on container queries, Houdini is still a ways off (by the way, browser makers, that’s two different conference talks I’ve mentioned about container queries, just in case you were keeping track of how much developers want this).

Still, there are some CSS features that are Houdini-like in their extensibility. Custom properties feel like they could be wrangled to help with the container query problem. While it’s easy to think of custom properties as being like Sass variables, they’re much more powerful than that—the fact they can be a real-time bridge between JavaScript and CSS makes them scriptable. Alas, custom properties can’t be used in media queries but maybe some clever person can figure out a way to get the effect of container queries without a query-like syntax.

However it happens, I’d just love to see some movement on container queries. I’m not alone.

I know container queries would revolutionize my design practice, and better prepare responsive design for mobile, desktop, tablet—and whatever’s coming next.

Have you published a response to this? :

Responses

Wilto

+1 from me; 100% in favor of moving to the WICG.

# Posted by Wilto on Friday, December 15th, 2017 at 8:51pm

beep

A massive +1 from me, especially if this gets some momentum going.

# Posted by beep on Friday, December 15th, 2017 at 8:54pm

scottjehl

+1 if we think it might help get traction.

# Posted by scottjehl on Friday, December 15th, 2017 at 9:01pm

keithjgrant

+1 from me if it will help break through the current logjam

# Posted by keithjgrant on Friday, December 15th, 2017 at 9:11pm

tomhodgins

+1 please I wrote the CSS element queries spec about a year ago, and I’ve done so much research and writing about element/container queries since then that was just thinking recently that I really need to go through this spec again to reword and clarify some of the terminology I used. Now I have some excellent motivation! 😁 Since then I’ve also found a simple way to describe element/container query behaviour as a JavaScript function. Here’s a demo showing how this function can be used to implement container queries with client-side JS in the browser. And I’ve written down the most useful tests for this kind of technique. Hopefully that sheds light on how the core of this idea works and which properties in the browser element queries rely on. If you were to expose an interface for this kind of functionality from CSS, it makes the most sense to do that as a new CSS at-rule that supplies: - a CSS selector list - test conditions - a stylesheet (maybe with a placeholder to use inside selectors that matches tags that pass the test conditions, like $this) - and optionally to allow authors to supply an ‘event list’ that limits the testing of the selector to specific events If you want a great summary of where things are at now in the element/container queries scene, this article is fresh from last month: https://webdesign.tutsplus.com/articles/the-current-state-of-element-queries—cms-29690

# Posted by tomhodgins on Friday, December 15th, 2017 at 9:55pm

ZeeCoder

Yeah, let’s start the discussion! @ausi @marcj @davatron5000 @filamentgroup @BoomTownROI @Snugug @tysonmatanich @d6u @walmartlabs @VinSpee @lemonmade Feel free to join. (☝️ All people who made a plugin / polyfill at one point.)

# Posted by ZeeCoder on Friday, December 15th, 2017 at 10:05pm

davatron5000

+1 from me. Keeping momentum on this has been difficult since we keep getting deferred by other specs. “Wait for CSS Containment. Wait for ResizeObserver. Don’t waste time speculating on syntax.”

eeeps

+1 WICG, sounds good to me. Step zero is to figure out what we’re actually blocked on. @tabatkins has a vision for how we move forward here. My conception of it is: ResizeObserver (✔️) + (✖️) → ergonomic, performant prolyfills (which, I mean, we kiiiiiind of have even now? even without custom MQs?) → widespread prolyfill adoption (we’re at thousands of pages with prolyfills deployed, what counts as widespread?) → a spec and native implementations (✖️) The twin blockers, in this plan/worldview, are custom media queries (which, like Dave says — waiting for stuff like this for years is super frustrating), and maybe (better?) prolyfills that more authors will feel comfortable using in production… or that implementors take more seriously as templates for future native implementations. Something that might help push this forward: implementors and spec folks studying and giving feedback to the current prolyfills. How do those prollyfills succeed or fail at being platform compatible? Conversations like this one between @dbaron and @ausi feel invaluable and all too rare.

# Posted by eeeps on Saturday, December 16th, 2017 at 2:00am

marcj

Since I got mentioned here 🙌: What is exactly the goal here and how do you expect me to contribute? Did you guys look actually on real implementations first out there with hundred of thousands of installations before you start to create something own? Maybe compare usage-stats of current available implementation to understand what developers out there really want before creating a spec/product nobody needs.✌️

# Posted by marcj on Saturday, December 16th, 2017 at 9:38am

ZeeCoder

@marcj ☝️ In my mind that would be the exact reason of this discussion: look at what we have already, and decide on a syntax based on that, that’s polyfillable and addresses concerns that stopped native approaches so far.

# Posted by ZeeCoder on Saturday, December 16th, 2017 at 10:57am

ausi

+1 for moving to WICG. Regarding a vision to move forward, I strongly believe that CSS Conditions with Variables would be a great step forward for polyfills towards being performant and stable.

# Posted by ausi on Saturday, December 16th, 2017 at 11:45am

d6u

+1 yeah, why not 😆

# Posted by d6u on Sunday, December 17th, 2017 at 4:54am

jehoshua02

I’m new here. But if I had a time machine, I’d stop media queries from being invented. 💯 On Dec 15, 2017 1:41 PM, “Tantek Çelik” wrote: > As suggested by https://twitter.com/elrond25/status/941743760773283840 do > people think it would help, make no difference, or hurt to move Container > Queries to the WICG to restart/retry discussions to get more traction and > momentum? > @Wilto @beep @adactio > @jensimmons > @keithjgrant @rachelandrew > @innovati > @dbaron and please @-more folks who have > contributed / shown interest in helping make Container Queries happen. > > Some recent-ish blog posts for background/context: > > - https://adactio.com/journal/12585 > - https://ethanmarcotte.com/wrote/on-container-queries/ > - https://ethanmarcotte.com/wrote/a-bit-more-on-container-queries/ > > Draft proposal being updated: > > - https://github.com/tomhodgins/element-queries-spec > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > , or mute > the thread > > . >

# Posted by jehoshua02 on Sunday, December 17th, 2017 at 6:06am

ZeeCoder

@tantek @Wilto So are we moving there? Is there a link we could start the discussion at? How is this gonna happen exactly? 🤔

# Posted by ZeeCoder on Wednesday, December 20th, 2017 at 12:57pm

tantek

Awesome, I’m not seeing any objections from anyone so let’s do this. @marcoscaceres (co-chair WICG) can you help us out with how to steps to transition an existing effort to WICG?

# Posted by tantek on Wednesday, December 20th, 2017 at 3:03pm

marcoscaceres

Happy to help. I can move it over. Once there, we will still need to lobby the right folks at various browser companies to get this moving. @tantek and I can help ping the right folks on the Moz side. However, let’s time this right so it doesn’t vanish during xmas.

ZeeCoder

Good point 👍 On 23 Dec 2017 09:25, “Marcos Cáceres” wrote: > Happy to help. I can move it over. Once there, we will still need to lobby > the right folks at various browser companies to get this moving. > > @tantek and I can help ping the right folks > on the Moz side. However, let’s time this right so it doesn’t vanish during > xmas. > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > , > or mute the thread > > . >

# Posted by ZeeCoder on Saturday, December 23rd, 2017 at 2:14pm

tomhodgins

This is great news, thanks @marcoscaceres! :D

# Posted by tomhodgins on Saturday, December 23rd, 2017 at 3:43pm

matchboxhero

I’m a little late to the party but I’m onboard, thanks for the invite. Let me know what I can do to help!

VinSpee

I am also late to the party but excited about this notion. I’d love to help in any way I can, code, docs, cat-herding, etc.

# Posted by VinSpee on Saturday, December 23rd, 2017 at 4:03pm

djlotus

Before I start trying to research who has implemented what polyfills and why, does anyone know if anyone has done this or begun doing this?

# Posted by djlotus on Wednesday, January 3rd, 2018 at 2:15pm

ZeeCoder

If you need a list of GitHub links, I have one.

# Posted by ZeeCoder on Wednesday, January 3rd, 2018 at 2:19pm

ZeeCoder

I’ve also been talking a lot with @tomhodgins too, since we couldn’t stop ourselves. I was waiting for the new forum to open before I presented that syntax we came up with. I think we should probably wait until the new forum opens to share our thoughts.

# Posted by ZeeCoder on Wednesday, January 3rd, 2018 at 2:21pm

djlotus

That would be great. Is this a list of available polyfills or a list of site authors who have implemented polyfills? I would be much more interested in the latter to get a feel for exactly what problems authors are solving in practice (not just in theory) and what made them choose the polyfills they chose. From my discussions with @tomhodgins and my lurking around other discussions it seems syntax is the main sticking point for most people and the main reason this discussion gets sidelined. I”ll let others fight over that since I personally don’t care (for the most part) what the syntax looks like. I’m more interested in making sure we can justify the underlying principal as to get solid buy-in from vendors.

# Posted by djlotus on Wednesday, January 3rd, 2018 at 2:22pm

ZeeCoder

Unfortunately I only have the former: - https://github.com/eqcss/eqcss - https://github.com/ausi/cq-prolyfill - https://github.com/marcj/css-element-queries - https://github.com/tysonmatanich/elementQuery - https://github.com/ZeeCoder/container-query I’m sure polyfill authors can post some sites that use their solutions. For example, mine is used by EventsTag for on-site products and some not-yet-public microsites. (The on-site products use web-based tech, running Chrome.) ☝️ That syntax is also very close to what we discussed with @tomhodgins

# Posted by ZeeCoder on Wednesday, January 3rd, 2018 at 2:30pm

tomhodgins

There is currently no shortage of element query plugins or syntaxes that can be used. I’ve also been maintaining a list of plugin authors over at: http://whoisworkingoncontainerqueries.com Here are some of the syntaxes and plugins I’ve created (all listed below except EQCSS were built in 2017) to help me use the idea of element queries as different project needs arose. Much of the functionality is similar between them, the biggest differences here are the location of the styles and how the selector, conditions, test, and styles are encoded into a syntax and read back by a plugin. Whatever syntax we create for CSS to handle this concept should have the power and flexibility to capture the functionality that these examples all have in common. Hopefully sharing these solutions sparks some creativity 😍 ## HTML-based Syntaxes ### Querious html css: css div.data-width { background: lime; } ### Skopein html css: css :self { background: lime; } ### reproCSS css ${demo.offsetWidth >= 500 ? ` #demo { background: lime; } ` : ''} ## CSS-based syntaxes ### QSS css div if width >= 500 { background: lime; } and other variations: css div @min 500 width { background: lime; } div @ >= 500 width { background: lime; } div if width min 500 { background: lime; } ### CSSplus/Selectory css div[test="this.offsetWidth >= 500"] { background: lime; } ### EQCSS css @element div and (min-width: 500px) { :self { background: lime; } } ## JS-based Syntaxes ### Container Query Mixin (Rule edition) js container('div', 'this.offsetWidth >= 500', '', ` background: lime; `) ### Container Query Mixin (Stylesheet edition) js containerQuery('div', el => el.offsetWidth >= 500, ` :self { background: lime; } `) ### Element Query JS-in-CSS Helper Function js element('div', {minWidth: 500}, ` :self { background: lime; } `) ## JSON-based Syntaxes ### Robserv js robserv.load([ { selector: 'div', test: el => el.offsetWidth > 500, stylesheet: ':self { background: lime; }' } ]) ### Parsed EQCSS js EQCSS.register([ { selector: "div", conditions: [{ measure: "min-width", value: "500", unit: "px" }], style: " :self { background: lime; } " } ])

# Posted by tomhodgins on Wednesday, January 3rd, 2018 at 3:24pm

ZeeCoder

So who’s in charge for starting the discussion at the WICG? 🤔 I’m eager to discuss what functionality should even be considered for implementation, syntaxes and potential barriers for browser vendors, as well as experiences of plugin authors. I do think that such a discussion would have to be very focused though, so I’m resisting the urge to spam my thoughts until we’re set on how it’s gonna actually go down. ping @tantek @marcoscaceres

# Posted by ZeeCoder on Monday, January 15th, 2018 at 1:25am

marcoscaceres

Ok, back from vacation… let’s start by moving this over :) Now, we need to figure out who will edit and participate in the work. Can folks here me know who is going to be involved? I need a list of collaborators. Should we set up a Hangout session do discuss the state of things and find a “champion” to drive this work?

tomhodgins

Welcome back @marcoscaceres! You can count me in for sure :D

# Posted by tomhodgins on Tuesday, January 16th, 2018 at 12:30am

ZeeCoder

Ah sorry didn’t mean to bug you during your vacation. 😅 I’m in ofc!

# Posted by ZeeCoder on Tuesday, January 16th, 2018 at 12:30am

Andy Bell

jeremy, trust you to actually be productive

# Posted by Andy Bell on Monday, January 27th, 2020 at 9:15pm

5 Shares

# Shared by Gunnar Bittersmann on Thursday, July 20th, 2017 at 2:23pm

# Shared by Martin Auswöger on Thursday, July 20th, 2017 at 3:40pm

# Shared by Paul Howells on Saturday, December 16th, 2017 at 9:12am

# Shared by Shannon Moeller on Wednesday, June 5th, 2019 at 1:26pm

# Shared by Andy Bell on Monday, January 27th, 2020 at 9:14pm

49 Likes

# Liked by Martin Auswöger on Thursday, July 20th, 2017 at 3:58pm

# Liked by Tommy Hodgins on Thursday, July 20th, 2017 at 4:12pm

# Liked by Tommy Ho-Ho-Hodgins on Friday, December 15th, 2017 at 5:24pm

# Liked by Viktor Hubert on Friday, December 15th, 2017 at 5:49pm

# Liked by keith•j•grant on Friday, December 15th, 2017 at 6:52pm

# Liked by Paul Howells on Saturday, December 16th, 2017 at 9:32am

# Liked by Brad Kemper on Saturday, December 16th, 2017 at 5:38pm

# Liked by Daniela de Oliveira on Wednesday, June 5th, 2019 at 8:23am

# Liked by Jay Greasley 🇪🇺 🏴󠁧󠁢󠁥󠁮󠁧󠁿 🏳️‍🌈 on Wednesday, June 5th, 2019 at 8:23am

# Liked by Moritz Gießmann 🔥 on Wednesday, June 5th, 2019 at 8:23am

# Liked by Andy Bell on Wednesday, June 5th, 2019 at 8:53am

# Liked by Krystal Higgins on Wednesday, June 5th, 2019 at 9:23am

# Liked by _ on Wednesday, June 5th, 2019 at 9:23am

# Liked by Alessandro Muraro on Wednesday, June 5th, 2019 at 9:23am

# Liked by Dawid Gaweł on Wednesday, June 5th, 2019 at 9:49am

# Liked by Russell Bishop on Wednesday, June 5th, 2019 at 10:23am

# Liked by Jono Alderson on Wednesday, June 5th, 2019 at 10:23am

# Liked by Ethan Marcotte on Wednesday, June 5th, 2019 at 10:53am

# Liked by A More Refined Squid on Wednesday, June 5th, 2019 at 11:28am

# Liked by Hugh Jazzhammer on Wednesday, June 5th, 2019 at 11:28am

# Liked by Flor Coppola on Wednesday, June 5th, 2019 at 11:28am

# Liked by S.lexis Works on Wednesday, June 5th, 2019 at 12:02pm

# Liked by Leyla Shapiro on Wednesday, June 5th, 2019 at 12:02pm

# Liked by Sarah Federman on Wednesday, June 5th, 2019 at 12:02pm

# Liked by Una Kravets 👩🏻‍💻 on Wednesday, June 5th, 2019 at 12:27pm

# Liked by Navid Mirzaie Milani on Wednesday, June 5th, 2019 at 12:59pm

# Liked by AS on Wednesday, June 5th, 2019 at 12:59pm

# Liked by Noah Blon on Wednesday, June 5th, 2019 at 12:59pm

# Liked by Søren Kottal on Wednesday, June 5th, 2019 at 2:05pm

# Liked by Sid on Wednesday, June 5th, 2019 at 2:05pm

# Liked by Michael Coker on Wednesday, June 5th, 2019 at 2:32pm

# Liked by Xaviju on Wednesday, June 5th, 2019 at 4:06pm

# Liked by David Miranda on Wednesday, June 5th, 2019 at 4:42pm

# Liked by Tommy Hodgins on Wednesday, June 5th, 2019 at 5:45pm

# Liked by Davi Lima on Wednesday, June 5th, 2019 at 6:45pm

# Liked by Thomas Hooper on Wednesday, June 5th, 2019 at 6:45pm

# Liked by Ms. Jen on Wednesday, June 5th, 2019 at 8:59pm

# Liked by Patrick Kuhlmann on Wednesday, June 5th, 2019 at 10:23pm

# Liked by Michael Trythall on Wednesday, June 5th, 2019 at 11:47pm

# Liked by Ken Himschoot on Thursday, June 6th, 2019 at 9:17am

# Liked by Eric Portis on Monday, January 27th, 2020 at 9:42pm

# Liked by Michael Bernth on Monday, January 27th, 2020 at 9:42pm

# Liked by Dave Rupert on Monday, January 27th, 2020 at 9:42pm

# Liked by Dimitris Grammatiko on Monday, January 27th, 2020 at 9:42pm

# Liked by Jeremy Katras on Monday, January 27th, 2020 at 9:43pm

# Liked by ᒍᗩKOᗷ E on Monday, January 27th, 2020 at 9:43pm

# Liked by Robb Owen on Monday, January 27th, 2020 at 9:43pm

# Liked by Andy Bell on Monday, January 27th, 2020 at 9:44pm

# Liked by Chris on Monday, January 27th, 2020 at 10:15pm

2 Bookmarks

# Bookmarked by Pelle Wessman on Thursday, July 20th, 2017 at 1:05pm

# Thursday, July 20th, 2017 at 5:30pm

Related posts

Even more writing on web.dev

Five more articles on modern responsive design to close out the course.

Fit For Purpose: Making Sense of the New CSS by Eric Meyer

A presentation at An Event Apart Seattle 2018.

Sticky headers

A few things to remember if you’re going to using position:fixed.

Windows mobile media queries

Solving that pesky Windows Phone 7 problem.

Workaround

Browsers and bugs.

Related links

Bruce Lawson’s personal site  : prefers-reduced-motion and browser defaults

I think Bruce is onto something here:

It seems to me that browsers could do more to protect their users. Browsers are, after all, user agents that protect the visitor from pop-ups, malicious sites, autoplaying videos and other denizens of the underworld. They should also protect users against nausea and migraines, regardless of whether the developer thought to (or had the tools available to).

So, I propose that browsers should never respect scroll-behavior: smooth; if a user prefers reduced motion, regardless of whether a developer has set the media query.

Tagged with

Nested Media Queries – Bram.us

Huh. I don’t think I ever thought about nesting media queries …and yet I’m pleasantly surprised that it works!

Tagged with

CSS Custom Properties Fail Without Fallback · Matthias Ott – User Experience Designer

Matthias has a good solution for dealing with the behaviour of CSS custom properties I wrote about: first set your custom properties with the fallback and then use feature queries (@supports) to override those values.

Tagged with

Responsive web design turns ten. — Ethan Marcotte

2010 was quite a year:

And exactly three weeks after Jeremy Keith’s HTML5 For Web Designers was first published, “Responsive Web Design” went live in A List Apart.

Nothing’s been quite the same since.

I remember being at that An Event Apart in Seattle where Ethan first unveiled the phrase and marvelling at how well everything just clicked into place, perfectly capturing the zeitgeist. I was in. 100%.

Tagged with

Custom Styling Form Inputs With Modern CSS Features | CSS-Tricks

It’s now easier than ever to style form controls without sacrificing semantics and accessibility:

The reason is that we can finally style the ::before and ::after pseudo-elements on the <input> tag itself. This means we can keep and style an <input> and won’t need any extra elements. Before, we had to rely on the likes of an extra <div> or <span>, to pull off a custom design.

The demo is really nice. And best of all, you can wrap all of these CSS enhancements in a feaure query:

Hopefully, you’re seeing how nice it is to create custom form styles these days. It requires less markup, thanks to pseudo-elements that are directly on form inputs. It requires less fancy style switching, thanks to custom properties. And it has pretty darn good browser support, thanks to @supports.

Tagged with

Previously on this day

12 years ago I wrote Device labs

Brighton, London, Malmö…

14 years ago I wrote Ship talk

A distributed online conversation.

19 years ago I wrote Ajax shopping cart

I’ve been working together with Message on a couple of different projects recently. Some of the more exciting work has involved building a new back end for the award-winning Rapha website.

20 years ago I wrote Registering my displeasure

The hot topic of the day would appear to be newspaper sites that require visitors to register before allowing them to read any articles. Wired is running a story which ties in nicely with last week’s article about The New York Times and its lousy pa

20 years ago I wrote The grand alliance

Given the martial tone of some of my recent posts, I’m starting to feel more and more like a warblogger.

21 years ago I wrote This is just a test

This is not the journal entry you were looking for. Move along, move along.

22 years ago I wrote One for the Webmonkeys

Geek that I am, I thought it was the funniest thing ever when I saw this sticker on a black drainpipe.