Container queries shipped in 2023 and ended viewport guessing

The assumption was wrong from the start

A sidebar card does not know how wide the browser window is. It knows how wide the card is. Media queries made components pretend otherwise — the breakpoint fired at a viewport width, but what the component actually needed to know was its own rendered size. That mismatch lasted from Ethan Marcotte's responsive design formulation in May 2010 until 2023, when container queries reached every major engine and closed it.

The spec work was long. Miriam Suzanne, working in public through the CSS Working Group, pushed the containment model that made container queries possible: before a parent can report its own size to a child, it must be isolated from that child's influence, otherwise the browser enters an infinite loop trying to calculate the layout. That isolation is the contain property, which shipped in Chrome well before the query layer and reached other engines over the following years. The query layer on top of it — @container — is what designers and developers actually reach for.

What shipped, when, and in what form

Chrome 105, released in August 2022, was the first production browser to ship @container for size queries. Safari 16, in September 2022, followed. Firefox held out until version 110, released in February 2023. That February date is the practical one: it is when you could write a container query and not write a fallback for a meaningful share of users. MDN's compatibility table marks all three engines green from that point.

The syntax is declarative. You name the container on the parent — container-type: inline-size and optionally container-name: card — and then query it from a descendant:

1. May 2010Ethan Marcotte's responsive design article in A List Apart establishes media queries as the component breakpoint mechanism
2. 2020–2021CSS contain property ships progressively across engines, providing the isolation model container queries require
3. August 2022Chrome 105 ships @container size queries
4. September 2022Safari 16 ships container queries
5. February 2023Firefox 110 ships container queries; all major engines now green
6. March 2023Chrome 111 ships container style queries; Firefox support still partial as of mid-2025

``css @container card (min-width: 400px) { .card__image { float: left; } } ``

That float triggers not when the window hits 400 pixels but when the card's own inline axis hits 400 pixels, which may happen at any viewport size depending on the grid or layout the card is dropped into. A component written this way is genuinely portable: put it in a narrow sidebar or a wide editorial grid and it resizes correctly without a media query rewrite.

The query layer on top of it — @container — is what designers and developers actually reach for.

What this changes in practice

The composability argument is the one that sticks. Media queries were always a component-level concern wearing viewport-level clothes. A designer working at a product like Figma or Framer would draw a card at three sizes for documentation purposes — compact, default, wide — and then a developer would wire those to viewport breakpoints that approximated, but never exactly tracked, the card's actual rendered context. Container queries let the code match the component model directly.

The pattern that emerged most quickly at teams building design systems was the responsive grid cell: a grid-template-columns layout with auto-fill and a minmax() creates columns that grow and shrink, and a container query inside each cell reflows the cell's content at its own natural breakpoints rather than guessing from the window. It is cleaner than the old approach of calculating column count in JavaScript and adding modifier classes.

Container style queries — querying a CSS custom property value rather than a size — shipped in Chrome 111 (March 2023), several months after the size variant, giving components a way to branch on tokens passed from a parent context. Support remains uneven as of mid-2025; Firefox supports them only partially. Style queries are the newer and rougher edge of the same spec.

The underlying principle is not new in UI programming — every native widget system that has ever existed gives components knowledge of their own bounds first and the window second. CSS was the outlier for thirteen years. What container queries fixed is not a clever trick but a basic correctness: a component that responds to its own box behaves the same wherever you put it, which is what reusable components are supposed to do.