v145 · 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
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: #fffde7; font-family: serif; }
  .widget-title { color: #7a5c00; }
}

/* Theme B: technical */
@container theme-b {
  .widget { background: #0d1117; color: #c9d1d9; }
  .widget-title { color: #58a6ff; font-family: monospace; }
}

/* 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