#container-queries

#container-queries

I'll admit, when container queries first shipped back in 2022, I didn't really pay attention. I mean, why container size queries when we already have media queries? Why container style queries when custom properties inherit anyway (they don't work with standard properties... yet)? Their use cases seemed like edge cases to me, enabling us to do things that we could already do but in a different way.

One important recent next step were container queries: .parent { container-name: parent; container-type: inline-size; } article { flex-direction: row; } @container parent (width < 40rem) { article { flex-direction: column; } } Instead of reacting to viewport size changes, we can react to size changes of HTML elements. With media queries, the whole page was responsive. With container queries, individual user interface elements can be responsive, too.