Comments on: Let’s Not Forget About Container Queries

By: Matt Hill

Matt Hill — Fri, 10 Jan 2020 15:35:35 +0000

Sounds like you’re unaware of the CSS Working Group. Check out Rachel Andrew’s article then get involved :)
https://rachelandrew.co.uk/archives/2019/05/07/getting-involved-with-the-web-platform/

The working group’s Github can be found here:
https://github.com/w3c/csswg-drafts/issues

By: sheriffderek

sheriffderek — Mon, 16 Dec 2019 23:44:27 +0000

I would love a way to tell the powers that be what we want most. If we can catalog the ‘almost perfect’ bits of CSS and prioritize them, maybe we can get more light shined on them? It feels like these things aren’t being designed by people who actually use them. Some of us write a lot of CSS – and if we could have some entry point to stress test these decisions – we might come up with some helpful edge cases.

By: Jace Cotton

Jace Cotton — Mon, 14 Oct 2019 18:22:30 +0000

In reply to Jon. Very well put. I feel like there needs to be some sort of unofficial but tightly-knit dev community that work on various libraries and polyfills for unofficial features that work well enough to be put into production, but with the idea being that eventually, if enough people use them, browser vendors will take note and implement a native version. There's no reason to sit around waiting for them. This polyfill community could also have very lax rules for what's included: the ringer that these features would go through is whether they ever became popular, so it's more democratic and less bureaucratic.

By: Evan Payne

Evan Payne — Thu, 10 Oct 2019 05:29:25 +0000

I literally talk about this once a week, either with my teammates when we’re frustrated over working with an outdated grid system, or with designers that are frustrated that we’re not very good at implementing their beautiful grid system.

This is absolutely my number one desired CSS feature, above subgrid or whatever else they are cooking up. Elements that can visually adapt to the size of the space they’re placed within? Sign me up.

By: Jon

Jon — Wed, 09 Oct 2019 16:17:33 +0000

If a given pattern is repeated often enough in the real world, it eventually gets added natively. Web components, CSS variables, JavaScript “classes”, querySelector, even rounded corners were all nativized because “shoehorning” them was so common; usually through some other technology.

Container queries are a bit of an odd case because the end solution has such high consensus that few projects want to implement a polyfil. This lack of adoption is misconstrued as lack of interest to a casual observer.

We as a community need to embrace a JS solution first. When that becomes common enough to be considered a pseudo-standard, we’ll get our CSS solution.

By: Tommy Hodgins

Tommy Hodgins — Wed, 09 Oct 2019 14:39:40 +0000

I think for this we’ll see people using CSS with JavaScript-based Observers like Resize Observer, and also Mutation Observer and Intersection Observer together in a synergetic way that lets you naturally define breakpoints as custom properties of elements, and have JavaScript code that observes the page and allows the elements to be targeted in its different breakpoint states.

There’s already a specific demo I have in mind as I’m writing this that’s waiting for the right time to be shown to the world, but I don’t think any pieces are missing if we want to use CSS and JavaScript together in this way. ‘Element Queries’ and ‘Container Queries’ may not be a CSS feature, they may be a CSS technique or a certain way of using CSS and JavaScript together, naturally. Keep an eye out for how to use JS-based Observers and CSS together like friends!