Next Gen CSS: @container

Great article by Una introducing container queries. I haven’t played with them yet, but have always wondered where the intersection is between media and container queries.

For example: why, and in what scenarios, would you use @media over @container? From Una:

One of the best features of container queries is the ability to separate micro layouts from macro layouts. You can style individual elements with container queries, creating nuanced micro layouts, and style entire page layouts with media queries, the macro layout. This creates a new level of control that enables even more responsive interfaces.

This idea of micro/macro layouts turned on a light bulb in my head. And her breakdown and visual examples in this post are great.

I’ve seen this intersection of media and container queries being called “the new responsive”.