v149 · CSS · Container queries · CSSOM

Conditions API Inspector

Walk the CSSOM and read CSSContainerRule objects from every stylesheet. Comma-separated queries expose a conditionText (and the upcoming conditions array) — this inspector displays each component condition and flags multi-condition rules.

@container rules found: —
comma-separated (multi): —
single-condition: —
CSSContainerRule entries Click scan to populate
Press "Scan stylesheets" to walk the CSSOM and find all @container rules on this page.
// Walk CSSOM for all @container rules
function findContainerRules(sheet) {
  const rules = [];
  for (const rule of sheet.cssRules) {
    if (rule instanceof CSSContainerRule) {
      rules.push(rule);
    }
    // Also recurse into @layer, @supports etc.
  }
  return rules;
}

const allRules = [];
for (const sheet of document.styleSheets) {
  try { allRules.push(...findContainerRules(sheet)); }
  catch (e) { /* cross-origin sheet */ }
}

// conditionText includes the full comma-separated expression
allRules.forEach(rule => {
  console.log(rule.conditionText);
  // e.g. "(inline-size > 600px), demo-cq (inline-size < 200px)"

  // Chrome 149+: rule.conditions[] — one entry per comma segment
  if (rule.conditions) {
    rule.conditions.forEach((c, i) =>
      console.log(`  [${i}]`, c)
    );
  }
});

see also

implementation reference

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