Container queries can check more than size — style queries let components read custom property values

When a component needs to know its context — is it inside a dark sidebar? a compact layout? a danger banner? — the usual answer is JavaScript. You pass a prop, toggle a class, and the styles follow. But the context you're checking is often already sitting in a CSS custom property on some ancestor element. Style queries let the component read it directly, with no JavaScript in the middle.

The size queries you already know

If you've used container queries, you know the size query pattern:

.card { container-type: inline-size; }

@container (min-width: 400px) {