Container queries
Elements that respond to their container's size, not the viewport
container-type: inline-size
An element becomes a "container" and its children can respond to its width, not the viewport's.
Change the width by dragging the right edge. The layout reorganizes on its own.
container-type: inline-size
@container (min-width: 320px)
When the container measures more than 320px, the card switches from vertical to horizontal. No viewport media queries.
@container (min-width: 320px) { flex-direction: row }
No JS
Before you needed ResizeObserver + conditional classes. Now CSS reacts to the parent's size, not the browser's.
/* el elemento se vuelve un container */
.cq-card {
container-type: inline-size;
display: flex;
flex-direction: column;
}
/* cuando el container mide más de 320px */
@container (min-width: 320px) {
.cq-card {
flex-direction: row;
}
.cq-card-media {
width: 80px;
height: auto;
}
}An honest note on support
Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".