v158 · cssom · conditional imports

The supports() gate

An @import … supports(condition) is only fetched when the condition holds. This page writes the @import you choose into a real style element, lets the browser evaluate it, then reads the CSSImportRule back out of the CSSOM — so you see exactly what styleSheet returns on this browser for a condition that passes and one that fails.

ChromeStatus lists the nullable styleSheet as enabled by default from Chrome 158 (runtime feature CSSImportRuleStyleSheetNullable, added by CL 5065830). Builds that predate that CL have no flag to flip — the feature name does not exist in them — so on older Chrome this page simply shows you the older behavior instead of pretending. Everything below reads live values; nothing is simulated.

Inject a conditional @import

Proof card. The imported sheet paints this card green and appends a marker — if it stays this colour, the import did not apply.

@import written
—
CSS.supports(cond)
—
rule in cssRules?
—
rule.supportsText
—
rule.styleSheet
—
proof card painted?
—

Pick a condition and inject it.

what the spec says

CSS Cascade 5 (§conditional imports): a false condition means the stylesheet is never fetched and the rule has no associated style sheet. CSSOM types the attribute CSSStyleSheet?, so the conforming read for that rule is null — the rule itself still appears in cssRules with its supportsText intact. Older Chromium deviates in measured, specific ways: it drops the whole rule from cssRules for a false declaration-form condition like supports(display: pancake); it wrongly fetches a false parenthesized condition like supports((display: pancake)) and exposes the fetched sheet through styleSheet (without applying it); it manufactures a phantom empty sheet for failed loads (see the lifecycle page); and its IDL typed the attribute non-nullable. The readout above tells you exactly what this browser just did.

code path

const style = document.createElement("style");
style.textContent =
  `@import url("../sheets/applied.css") supports((display: pancake));`;
document.head.append(style);

const rule = style.sheet.cssRules[0];  // may be absent on pre-158 Chromium!
rule.supportsText;                     // "(display: pancake)"
rule.styleSheet;                       // Chrome 158+/Firefox/Safari: null
                                       // (condition false, nothing fetched)

see also