coderef

@scopeBaseline · Newly available

The @scope CSS at-rule sets the scope for a group of rules.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Mar 24, 2026.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–142Not supported
143+Supportedsince Dec 2, 2025
Current: 155
Edge
12–142Not supported
143+Supportedsince Dec 5, 2025
Current: 154
Firefox
1–145Not supported
146+Supportedsince Dec 9, 2025
Current: 157
Safari
1–26.3Not supported
26.4+Supportedsince Mar 24, 2026
Current: 27
MobileChrome Android
18–142Not supported
143+Supportedsince Dec 2, 2025
Current: 155
Firefox Android
4–145Not supported
146+Supportedsince Dec 9, 2025
Current: 157
Safari iOS
1–26.3Not supported
26.4+Supportedsince Mar 24, 2026
Current: 27

How to use

Every current browser supports this, but it only became Baseline on Mar 24, 2026. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN: CSSScopeRule.

Feature detection

JS · check before using
if ("CSSScopeRule" in globalThis) {
  // CSSScopeRule is available
} else {
  // load a polyfill or use a fallback
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (5). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
CSSScopeRule11811814617.411814617.4
CSSScopeRule.end11811814617.411814617.4
CSSScopeRule.start11811814617.411814617.4
@scope11811814626.411814626.4
nesting.at-scope14314314226.214314226.2