v148 · CSS · Name-Only Container Queries

Style Without Size

Switch the container's name at runtime — all descendant styles re-evaluate instantly. Four themes (editorial, technical, minimal, vivid) applied through a single container-name change, no JavaScript touching any element style.

container-name: theme-a matched: theme-a container-type: normal
Running name-only @container probe…
new

Container Identity Theming

This widget reads no class names, no data attributes, no custom properties. Its visual theme comes entirely from the container-name of its ancestor wrapper — CSS queries the name and applies the right rules.

CSS pattern

/* The wrapper — only a name changes */
.wrapper { container-name: theme-a; /* or b, c, d */ }

/* Theme A: editorial */
@container theme-a {
  .widget { background: var(--accent-amber); font-family: var(--font-serif); }
  .widget-title { color: var(--accent-amber); }
}

/* Theme B: technical */
@container theme-b {
  .widget { background: var(--text-black); color: var(--bg-stone); }
  .widget-title { color: var(--accent-blue); font-family: var(--font-mono); }
}

/* No container-type on .wrapper in any theme.
   No layout side-effects. Pure identity theming. */

JavaScript: one property change

// The only JS: update container-name on the wrapper
function switchTheme(name) {
  wrapper.style.containerName = name;
  // All @container rules re-evaluate automatically
}

see also

references

implementation reference

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