v145 · 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. Theme Matrix

    Four widget instances, each wrapped in a differently-named container: theme-dark, theme-accent, theme-light, and theme-mono. A single .widget component reacts to all four contexts with no size queries. Swap any cell's theme at runtime with the controls.

  5. Sidebar Context

    One .widget component dropped into three zones — sidebar-context, content-context, and header-context — each with only a container-name. Click to move the widget between zones and watch it reformat: compact and truncated in the sidebar, full-featured in the content area, horizontal strip in the header. No container-type anywhere.

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