CSS @scope: Browser Support, Cascade, Donut Scope

What is CSS @scope?

CSS @scope is a W3C Cascade and Inheritance Level 6 at-rule that scopes a block of style rules to a chosen DOM subtree. You set a scope root selector for the upper bound and an optional scope limit for the lower bound, and the rules only match elements between them.

CSS @scope Syntax

The formal syntax takes two parameters. The <scope-start> selector defines the scope root, the upper bound of the subtree, and is inclusive: the root element itself can be matched. The optional to <scope-end> selector defines the scope limit, the lower bound, and is exclusive: elements at or below the limit are not matched.

@scope (<scope-start>) to (<scope-end>) {
  /* rulesets that only match between the root and the limit */
}

/* root only, no lower limit */
@scope (.article-body) {
  img { border-radius: 8px; }
}

/* root plus limit: the donut */
@scope (.article-body) to (figure) {
  img { border: 5px solid black; }
}

Both parameters accept a full selector list, so a scope can have several roots or limits. Omitting the prelude entirely (a bare @scope block in an inline style element) scopes the rules to the enclosing element of that style block.

Which browsers does CSS @scope support?

Every modern Chromium-based browser, Safari, and Firefox now supports CSS @scope by default. Firefox was the last major engine to ship it, and Internet Explorer never added the at-rule.

What is donut scope in CSS @scope?

Donut scope is the most useful pattern @scope unlocks. You pass a scope root selector and a scope limit selector to the @scope prelude, and the rules only match elements that sit between the two boundaries. The donut shape comes from the gap: elements outside the root and elements inside the limit both fall out of the match set.

A typical donut scope looks like this:

@scope (.card) to (.card__content) {
  img { border-color: green; }
}

The rule turns every img green inside .card, but stops at .card__content. Images nested deeper than .card__content keep their default border. This is exactly what a component author wants when an inner slot embeds a child component with its own image styles. The donut keeps the parent component styling out of the inner slot, while still applying it to everything else inside the root.

Selector Isolation vs. Style Isolation

@scope gives you selector isolation, not style isolation. Selector isolation means the selectors inside the block can only match elements between the scope root and the scope limit; they will never reach outside those boundaries.

Style isolation is a different guarantee, and @scope does not make it. Inherited properties such as color, font-family, and custom properties still cascade down through the scope limit like normal CSS inheritance. If a scoped rule sets color on a container, text inside the excluded donut hole still inherits that color, even though no selector in the scope can match it directly. Shadow DOM is the tool that provides true style isolation; @scope only controls where selectors apply.

@scope vs. CSS Modules and CSS-in-JS

Before @scope, teams got scoping from build-time tooling. CSS Modules (files named with the .module.css convention) and CSS-in-JS libraries both scope styles by rewriting class names into unique hashes at build time. Native @scope moves that job into the browser.

How does @scope affect the CSS cascade?

@scope adds a new step to the cascade called scoping proximity. When two rules tie on specificity, the rule whose scope root sits closer to the matched element wins, no matter what order they appear in the source. Proximity sits between specificity and order of appearance in the cascade, so a less specific selector inside a closer scope can beat a more specific selector inside an outer scope.

The browser measures proximity by counting DOM hops: the number of levels up the DOM tree from the matched element to each scope root. If a paragraph sits one hop from a .light-theme root but two hops from a .dark-theme root, the light-theme rule wins the tie because its hop count is smaller.

The :scope pseudo-class targets the scope root itself and adds (0,1,0) of specificity. Selectors inside a scoped block get an implicit :scope prepended, so a bare img selector behaves like .card img inside @scope (.card). The & nesting selector inside @scope also points at the scope root, but it composes like a normal nested selector and can match the root from anywhere the selector applies, while :scope only matches the root once.

How do you check if a browser supports CSS @scope?

Use the @supports at-rule, the CSS.supports JavaScript API, or a quick DevTools probe to confirm the browser parses @scope before you ship a stylesheet that depends on it.

• Open the page in your target browser: Load any page in the browser version you want to test, including older Safari and Firefox builds where @scope might be missing.
• Open DevTools and switch to the Console: On Chromium and Firefox press F12, on Safari press Option-Command-I after you enable the Develop menu.
• Run the CSS.supports probe: Paste the snippet below to print yes or no for both the @scope at-rule and the :scope pseudo-class.
• Wrap dependent styles in @supports: Put fallback rules outside an @supports (at-rule: @scope) block, then put the @scope-only rules inside, so older browsers fall through to the fallback.
• Confirm in the Styles pane: Inspect a scoped element and check that the rule shows the @scope prelude next to the selector. If the prelude is missing, the browser parsed @scope as an unknown at-rule and dropped the whole block.

Paste this snippet into the browser DevTools console to confirm @scope support:

// Run in any browser DevTools console to confirm @scope support.
const scopeAtRule = CSS.supports("at-rule: @scope");
const scopePseudo = CSS.supports("selector(:scope)");

console.log("@scope at-rule parsed:", scopeAtRule ? "yes" : "no");
console.log(":scope pseudo-class parsed:", scopePseudo ? "yes" : "no");

if (!scopeAtRule) {
  console.warn("This browser ignores @scope blocks. Ship a fallback stylesheet.");
}

If the at-rule check prints no, your fallback stylesheet should ship the same rules under BEM-style class names so layout still holds on older browsers.

What are the known issues with CSS @scope?

@scope reached baseline only after Firefox 146 shipped, so a long tail of older browsers still ignores the at-rule. The cascade changes also catch teams off guard when proximity flips a rule that worked under specificity alone.

• Firefox was last to ship: Firefox 145 and earlier silently ignore @scope blocks. Visitors on long-term-support builds inside locked-down enterprises will not get scoped styles for a while, so a fallback stylesheet stays mandatory.
• Safari 17.3 and older have no support: macOS Big Sur and Monterey are pinned to Safari 15 and 16, which do not parse @scope. iPhone visitors on iOS 17.3 or earlier hit the same gap.
• :scope and & differ in subtle ways: :scope matches the root once with specificity (0,1,0), while & resolves like a nested selector and can match across the subtree. Mixing the two inside one block produces specificity surprises that DevTools surfaces only after layout breaks.
• Proximity can flip expected wins: A less specific rule inside a closer scope beats a more specific rule from an outer scope. Teams used to specificity-only cascade reasoning need to retrain on proximity before they ship deeply nested @scope hierarchies.
• No working JavaScript polyfill: @scope is a parser-level at-rule, so a JS shim would have to re-parse and rewrite stylesheets on every load. That breaks DevTools and adds startup cost no team wants in production.
• Prelude-less @scope only works inline: A bare @scope block scopes to the parent of its style element only when the block lives inside an HTML style element. The same block in an external CSS file applies nothing because it has no scope root to bind to.
• DevTools display varies: Chrome shows the @scope prelude in the Styles pane, Safari Web Inspector shows it more compactly, and Firefox 146 surfaces it in a separate panel. Cross-browser debugging needs you to know each tool layout.

In my experience, the most surprising failure happens on iOS 17.3. Safari parses the @scope keyword as an unknown at-rule and drops the whole block, including the rules that should fall through, so the page renders with no styles where the scoped rules used to apply. Always pair an @scope block with an @supports fallback when you target iPhone visitors.

Citations

All CSS @scope version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - @scope at-rule: developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope
• MDN Web Docs - :scope pseudo-class: developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:scope
• W3C CSS Cascading and Inheritance Level 6: w3.org/TR/css-cascade-6
• Chrome for Developers - Limit the reach of your selectors with @scope: developer.chrome.com/docs/css-ui/at-scope
• Chrome Platform Status - CSS @scope: chromestatus.com/feature/5100672734199808
• WebKit blog - Safari 17.4 release notes: webkit.org/blog/15063/release-notes-for-safari-17-4
• Mozilla Hacks - Firefox 146 release announcement: hacks.mozilla.org/category/firefox
• Wikipedia - Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets
• CSS-Tricks Almanac - @scope: css-tricks.com/almanac/rules/s/scope
• Frontend Masters - How to @scope CSS Now That It is Baseline: frontendmasters.com/blog/how-to-scope-css-now-that-its-baseline
• Smashing Magazine - CSS @scope: An Alternative To Naming Conventions: smashingmagazine.com/2026/02/css-scope-alternative-naming-conventions