v148 · CSS · Container Queries

Theme Switcher

CSS name-only container queries let descendants match an ancestor by container-name alone: @container mode-dark { ... }. Toggle the names on the wrapper below; the card changes through real @container rules with no container-type set on the live container.

Checking whether this browser applies a real name-only @container rule without container-type.

Live container-name controls

The controls update only the wrapper's container-name list. The component has no state classes and no inline style changes; all visual variants come from name-only query blocks.

mode name

density name brand name preview width not part of the query100% no named container edge case

container-name on the wrapper theme-root mode-light density-normal brand-blue

name-only rules expected to match @container theme-root, @container mode-light, @container density-normal, @container brand-blue

Feature card

CSS Name-Only Container Queries

This card is styled by matching names on its ancestor container. Toggle mode-dark, density-compact, or brand-green and the descendant rules respond without a size query or a style-query condition.

Chrome 148 · container-name only · no container-type

Happy path: the wrapper has a name list, so descendant @container rules can match it.

/* The container declares names only: no container-type */
#app {
  container-name: theme-root mode-dark density-compact brand-green;
}

/* Descendant styles match identities directly */
@container mode-dark {
  .card { background: var(--text-black); color: var(--bg-ivory); }
}
@container density-compact {
  .card { padding: 0.4rem; font-size: 0.8em; }
}
@container brand-green {
  .badge { color: var(--accent-emerald); border-color: var(--accent-emerald); }
}

references

implementation reference

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

references

see also

implementation reference