demo · v149

Fallback Query

Drag the dashed box, toggle the support hint, and watch a single comma-separated @container rule fire from a style() branch, a width branch, or an aspect-ratio branch.

support hint: off · size: measuring…

I am a card

style(--support-hint: on) (width > 600px) (max-aspect-ratio: 1)

the rule

.resizer {
  container: card-area / size;
  --support-hint: off;
}

@container card-area style(--support-hint: on),
           card-area (width > 600px),
           card-area (max-aspect-ratio: 1) {
  .card {
    background: color-mix(in srgb, blue 16%, paper);
    font-family: display;
    font-size: 1.4rem;
  }
}

the API

Click the button to read conditionText and conditions[] from the live stylesheet.
const rule = [...document.styleSheets[0].cssRules]
  .find(rule => rule.constructor.name === "CSSContainerRule");

console.log(rule.conditionText);
console.log(rule.conditions); // Chrome 149+: each comma branch as an item

see also

implementation reference

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