[nolongerthere]

This article is interesting but when we’re talking about design elements I think it’s always a good idea to include some actual demos or examples showing the final result and not just the “code”. I might also not be the target audience but I still don’t understand what container queries are or what old paradigm they’re replacing. The author does a good job explaining the difference between border-radius and the old way of using photoshop, but fails to do that for the features that he’s trying to promote.

[ervine]

Old paradigm (media queries): You make layout changes based on the width / height of the viewport (browser).

New paradigm (container queries): You make layout changes based on the width / height of the containing element.

This lets you layout a component so that it looks good in any sized container. Picture a component that might be in the main section or in the sidebar - you can now just style directly based on width of the container instead of having to know the total width of sidebar + main section and do the calculation using viewport width.

[kevindamm]

Agreed, but to add to this:

media queries are still useful, and since a media query may hide/remove entire containers in the view then the remaining containers may have widths that are no longer a simple proportion of the viewport width (or other property being selected for).

So container queries can also enhance styles with media queries, not just replace them.