v148 · CSS · Name-Only Container Queries

Component Roster

One card component. Four container names: sidebar, main-content, compact, featured. The same HTML renders differently in each zone — driven entirely by name-only @container queries, no container-type anywhere.

Toggle zones:
Running name-only @container probe…

sidebar zone

compact zone

5 min read

Quick tip: container names

2 min read

Name-only queries ship

featured zone

main-content zone

tutorial

How to use name-only queries

Chrome 148 · May 2026

Walk through the migration from container-type-required syntax to the new simpler form. No layout side-effects, cleaner CSS.

reference

@container at-rule syntax guide

Chrome 106+ · Updated 148

All the query types in one place: size, style, and now name-only. With browser support tables and live examples.

CSS driving all four zones

/* Containers — just names, no container-type */
.sidebar-zone   { container-name: sidebar; }
.main-zone      { container-name: main-content; }
.compact-zone   { container-name: compact; }
.featured-zone  { container-name: featured; }

/* Same component, four identities */
@container sidebar {
  .c-card { padding: 0.6rem; background: var(--bg-stone); }
  .c-card-body, .c-card-tag { display: none; }
}

@container main-content {
  .c-card { box-shadow: 3px 3px 0 var(--border-black); }
}

@container compact {
  .c-card { border-left: 4px solid var(--accent-blue); border-top: none; }
  .c-card-body, .c-card-tag { display: none; }
}

@container featured {
  .c-card { border: 3px solid var(--border-black); box-shadow: 6px 6px 0 var(--border-black); }
  .c-card-title { font-size: 1.4rem; }
}

see also

references

implementation reference

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