v148 · CSS

CSS Name-Only Container Queries

Query a container by its container-name alone — no container-type required. Style rules can now target a specific container's identity without opting it into size containment.

concepts

  1. Identity Inspector

    Side-by-side comparison: the old approach needed container-type: inline-size to make @container work. The new approach just uses container-name — no type needed for style queries.

  2. Component Roster

    A set of UI components — card, badge, sidebar — each with a different container name. Toggle which context each lives in and watch the styles switch without any size-query involvement.

  3. Style Without Size

    A live code editor showing how name-only queries decouple theming from layout containment. Switch the container name at runtime and watch all descendant styles re-evaluate instantly.

  4. Component Isolation Demo

    A design system with five components (card, button, badge, form, nav) driven by named container queries. A theme matrix lets you toggle context names and watch all components switch variants. A conflict resolver shows what happens when two ancestor containers share the same name.

  5. Theme Switcher

    Theme, density, and brand names are composed into one container-name list. Toggle any combination and the component responds through name-only @container rules with no container-type or size-query condition.

why it shipped

CSS container queries arrived in Chrome 105 for size queries (width, height, inline-size, block-size) and Chrome 111 for style queries. Both required container-type because the browser needs to know what kind of containment to apply. But developers wanting to apply identity-based styles — "apply these rules when this component lives inside a sidebar container" — still had to pick an arbitrary container-type, which has layout side-effects (establishing an independent formatting context). Name-only queries remove that friction: a container named sidebar is simply named, and descendants can query that identity directly. The feature makes container names a first-class scoping mechanism, independent of layout containment.

references

implementation reference

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