For years we styled components based on the size of the viewport. Container queries let a component respond to the space it actually sits in, which is what we wanted all along.
Components that adapt themselves
A card can switch from stacked to side-by-side based on its container width, so the same component just works in a sidebar, a grid, or a full-width row.
.card-wrap { container-type: inline-size; }n@container (min-width: 360px) { .card { display: flex; } }The parent selector we waited for
The :has() selector finally lets you style an element based on its children — highlighting a form field that contains an invalid input, for example, with no JavaScript.
Together these features push more layout logic into CSS where it belongs, and out of brittle JavaScript.