Feature
The Quiet Revolution in Browser Rendering
How a series of incremental changes to layout engines fundamentally altered what's possible in CSS -- and why almost nobody noticed.
In 2019, if you wanted to build a responsive layout that adapted to its container rather than the viewport, you couldn't. The idea had been discussed for a decade, prototyped in JavaScript polyfills, and rejected by browser vendors as too expensive to implement. Container queries were the feature that CSS developers wanted most and the one they were told they couldn't have.1
By 2023, every major browser shipped them. The feature that was impossible became the feature that was everywhere, and the transition was so smooth that most developers barely registered the magnitude of what had changed.
The constraint that shaped everything
To understand why container queries took so long, you have to understand how browser layout works. The rendering engine makes a single pass through the document tree, calculating each element's size based on its parent's constraints. A container query inverts this: the child's styles depend on the parent's computed size, which depends on the child's styles. It's circular.2
The breakthrough wasn't algorithmic cleverness. It was a constraint: containment. If an element declares container-type: inline-size, it promises the browser that its children cannot affect its inline size. The circularity breaks. The engine can compute the container's size first, then resolve the query.3
The best features are the ones that work within the engine's existing model rather than fighting it. Containment didn't change how layout works -- it gave authors a way to make promises that the engine could exploit.
Miriam Suzanne, CSS Working Group
What containment unlocked
Container queries were the headline feature, but containment itself turned out to be more important. Once browsers had a robust containment model, other features became possible:
- Container query units (
cqi,cqb) let you size type and spacing relative to a container rather than the viewport - Style queries let children respond to a container's custom property values, not just its dimensions
- Content visibility uses containment to skip rendering for off-screen content, dramatically improving initial paint times
Each of these was a separate specification effort, but they all depended on the same underlying primitive. Containment was the foundation that made a decade of wishlist features suddenly achievable.4
The adoption curve nobody expected
New CSS features typically follow a long adoption curve. Flexbox took five years from first browser support to widespread use. Grid took three. Container queries took less than one.
The reason was component libraries. Design systems teams had been waiting for container queries specifically because they solved the "component in an unknown context" problem that had plagued every responsive design system since 2012. When the feature shipped, these teams adopted it immediately and pushed it through their organizations.5
What comes next
The containment model is still evolving. The CSS Working Group is exploring ways to relax the constraints -- allowing queries on block size, for instance, which is currently forbidden because it reintroduces circularity in vertical writing modes. There's also work on "toggle" and "switch" functions that would bring conditional logic into CSS values without requiring a container context at all.
But the larger shift is cultural. For twenty years, CSS developers learned to think in terms of the viewport. Media queries trained us to ask "how wide is the screen?" Containment is training us to ask a better question: "how wide is the space I've been given?" That shift in mental model may matter more than any individual feature.
-
The 2019 State of CSS survey listed container queries as the most-wanted feature for the third consecutive year. ↩
-
Tab Atkins described this as the "infinite loop problem" in a 2018 blog post that became the canonical reference for why container queries were considered impossible. ↩
-
The CSS Containment specification (Level 2) was the enabling work. Miriam Suzanne's container queries proposal built directly on its primitives. ↩
-
Chrome's implementation of
content-visibility: autoshowed rendering time improvements of 7x on long pages in internal benchmarks. Real-world results varied but were consistently positive. ↩ -
Shopify's Polaris and Salesforce's Lightning both adopted container queries within three months of full browser support, affecting millions of deployed components. ↩