@container style(): components that read parent tokens

I'll admit it. I haven't used container queries as much as I though I was going to when I first learned of the spec. It's something that really should be relied on more.

The responsive implications of contianer queries are the obvious ones, but @container style() is the quieter part that makes components feel more like components. A child can look at a custom property on its parent context and take on a theme or style from there.

That means the thing using the component can say --card-tone: urgent or --card-density: compact, and the component can adapt without needing .card--urgent, .card--compact, or another prop that only exists to become a class name.

Container style queries are Baseline Newly Available since May 19, 2026. web.dev notes that Firefox 151 completed cross-browser support for custom-property style queries recently as well. MDN has the practical caveat: today, style() queries are limited to custom properties. You cannot query background-color: red yet.

I like too that you don't always need contianer-type. Size queries need containment. Style queries do not. All elements can act as style query containers, so something like this is enough:

.theme-slot {
	--theme: dark;
}

@container style(--theme: dark) {
	.card {
		color-scheme: dark;
	}
}

(I'm going to do another post about color-scheme too, because that's one I just learned about too).

The gotcha is direction. A container query styles descendants. It does not let an element query itself and restyle itself. Put the token on a wrapper, region, slot, list item, or layout shell, then let the component inside respond.

Keep default styles first and treat the query as an enhancement. Unsupported browsers keep the normal card. Supporting browsers get the contextual version without another pile of modifier classes.