v148 · CSS · Name-Only Container Queries

Component Isolation Demo

A design system with five components — card, button, badge, form, nav — each driven by named container queries alone, no container-type required. Toggle variants to see every component react, then explore the conflict resolver.

Theme matrix — pick a context

container-name:
Card

Card component

Context-aware content card driven by name-only @container rules.

Button
Primary action
Badge
New feature
Form
Nav

Computed @container rules

container-name ctx-default
support probe checking…
matched token base
card bg var(--bg-paper) → no rule matched
card heading var(--text-black) → no rule matched
btn bg var(--bg-ivory) → no rule matched
badge bg var(--bg-stone) → no rule matched
winning rule — (base styles apply)

Conflict resolver — duplicate name in ancestor chain

When two ancestor containers share the same container-name, the nearest ancestor wins for descendants inside it. Chrome 148's resolution: innermost named container takes precedence.

outer: container-name="theme-a"

Outer ancestor sets container-name: theme-a

inner: container-name="theme-a"

Inner ancestor also sets container-name: theme-a

@container theme-a rule is active — which ancestor matched?
Inner container wins. The @container theme-a rule resolves to the nearest ancestor with container-name: theme-a. Both outer and inner containers have this name, but CSS uses the closest matching ancestor.

Chrome 148 rule: nearest named ancestor in tree order takes precedence.

see also

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗