Skip to content

Glossary

Container queries

CSS that reacts to the width of the box a component sits in, rather than to the width of the window.

Media queries ask the wrong question for a component. The same card can appear in a wide main column and in a narrow sidebar on the very same screen, and the window knows nothing about which one it is in; the container does.

That makes a component genuinely portable. Its layout rules travel with it instead of living in a breakpoint file that has to be updated every time the card is placed somewhere new — the usual reason a design system accumulates one-off overrides.

It is Baseline widely available, so on a site that is not obliged to serve very old browsers it needs no fallback and no build-time transform.