demo · v149

Breakpoint Matrix

Five frames at fixed widths — 220, 280, 360, 540, 720 — each running the same comma-separated @container rule. The rule mixes a container-size branch and a user-preference branch, so a single declaration handles both axes.

container · 220px
tile
container · 280px
tile
container · 360px (trigger)
tile
container · 540px
tile
container · 720px
tile

the rule

@container tile (min-width: 360px), (prefers-reduced-motion: reduce) {
  .tile {
    background: emerald-tinted;
    font-family: display;
    font-size: 1.4rem;
  }
}

The second branch isn't a container query at all — it's a media-style condition. Same comma, same fall-through semantics; only one of the two needs to match.

read it back from CSSOM

const rule = [...document.styleSheets[0].cssRules]
  .find(r => r.constructor.name === 'CSSContainerRule');
console.log(rule.conditionText);
// "tile (min-width: 360px), (prefers-reduced-motion: reduce)"

see also

implementation reference

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