{ "caniuse": [ "css-cascade-scope" ], "compat_features": [ "api.CSSScopeRule", "api.CSSScopeRule.end", "api.CSSScopeRule.start", "css.at-rules.scope", "css.selectors.nesting.at-scope" ], "description": "The @scope CSS at-rule sets the scope for a group of rules.", "description_html": "The @scope CSS at-rule sets the scope for a group of rules.", "group": [ "css" ], "kind": "feature", "name": "@scope", "spec": [ "https://drafts.csswg.org/css-cascade-6/#scope-atrule" ], "status": { "baseline": "low", "baseline_low_date": "2026-03-24", "by_compat_key": { "api.CSSScopeRule": { "baseline": "low", "baseline_low_date": "2025-12-09", "support": { "chrome": "118", "chrome_android": "118", "edge": "118", "firefox": "146", "firefox_android": "146", "safari": "17.4", "safari_ios": "17.4" } }, "api.CSSScopeRule.end": { "baseline": "low", "baseline_low_date": "2025-12-09", "support": { "chrome": "118", "chrome_android": "118", "edge": "118", "firefox": "146", "firefox_android": "146", "safari": "17.4", "safari_ios": "17.4" } }, "api.CSSScopeRule.start": { "baseline": "low", "baseline_low_date": "2025-12-09", "support": { "chrome": "118", "chrome_android": "118", "edge": "118", "firefox": "146", "firefox_android": "146", "safari": "17.4", "safari_ios": "17.4" } }, "css.at-rules.scope": { "baseline": "low", "baseline_low_date": "2026-03-24", "support": { "chrome": "118", "chrome_android": "118", "edge": "118", "firefox": "146", "firefox_android": "146", "safari": "26.4", "safari_ios": "26.4" } }, "css.selectors.nesting.at-scope": { "baseline": "low", "baseline_low_date": "2025-12-12", "support": { "chrome": "143", "chrome_android": "143", "edge": "143", "firefox": "142", "firefox_android": "142", "safari": "26.2", "safari_ios": "26.2" } } }, "support": { "chrome": "143", "chrome_android": "143", "edge": "143", "firefox": "146", "firefox_android": "146", "safari": "26.4", "safari_ios": "26.4" } }, "id": "scope", "groups": [ "css" ], "specs": [ { "url": "https://drafts.csswg.org/css-cascade-6/#scope-atrule", "seriesComposition": "delta", "shortname": "css-cascade-6", "series": { "shortname": "css-cascade", "currentSpecification": "css-cascade-4", "title": "CSS Cascading and Inheritance", "shortTitle": "CSS Cascading", "releaseUrl": "https://www.w3.org/TR/css-cascade/", "nightlyUrl": "https://drafts.csswg.org/css-cascade/" }, "seriesVersion": "6", "shortTitle": "CSS Cascading 6", "seriesPrevious": "css-cascade-5", "organization": "W3C", "groups": [ { "name": "Cascading Style Sheets (CSS) Working Group", "url": "https://www.w3.org/groups/wg/css/" } ], "release": { "url": "https://www.w3.org/TR/css-cascade-6/", "status": "Working Draft", "filename": "Overview.html" }, "nightly": { "url": "https://drafts.csswg.org/css-cascade-6/", "status": "Editor's Draft", "alternateUrls": [ "https://w3c.github.io/csswg-drafts/css-cascade-6/" ], "repository": "https://github.com/w3c/csswg-drafts", "sourcePath": "css-cascade-6/Overview.bs", "filename": "index.html" }, "title": "CSS Cascading and Inheritance Level 6", "source": "w3c", "categories": [ "browser" ], "standing": "good", "tests": { "repository": "https://github.com/web-platform-tests/wpt", "testPaths": [ "css/css-cascade" ] }, "fragment": "scope-atrule" } ], "mdnUrls": [ { "slug": "Web/CSS/Reference/At-rules/@scope", "title": "`@scope` CSS at-rule", "anchor": null, "url": "https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@scope" } ], "standardPositions": [ { "vendor": "mozilla", "url": "https://github.com/mozilla/standards-positions/issues/472", "position": "positive", "concerns": [] }, { "vendor": "apple", "url": "https://github.com/WebKit/standards-positions/issues/13", "position": "support", "concerns": [] } ], "hasNegativeStandardPosition": false, "stateOfSurveys": [ { "name": "State of CSS 2026", "url": "https://2026.stateofcss.com/en-US/usage/#favorite_new_features", "question": "usage", "subQuestion": "favorite_new_features", "path": "dataAPI.surveys.state_of_css.css2026.usage.favorite_new_features.freeform.allEditions.1.buckets.13.entity" }, { "name": "State of CSS 2026", "url": "https://2026.stateofcss.com/en-US/usage/#css_interoperability_features", "question": "usage", "subQuestion": "css_interoperability_features", "path": "dataAPI.surveys.state_of_css.css2026.usage.css_interoperability_features.freeform.allEditions.1.buckets.17.entity" }, { "name": "State of CSS 2026", "url": "https://2026.stateofcss.com/en-US/features/#reading_list", "question": "reading_list", "subQuestion": "reading_list", "path": "dataAPI.surveys.state_of_css.css2026.reading_list.reading_list.combined.allEditions.0.buckets.5.entity" }, { "name": "State of CSS 2026", "url": "https://2026.stateofcss.com/en-US/other_features/#other_features_pain_points_features", "question": "other_features", "subQuestion": "other_features_pain_points_features", "path": "dataAPI.surveys.state_of_css.css2026.other_features.other_features_pain_points_features.freeform.allEditions.1.buckets.2.entity" }, { "name": "State of CSS 2026", "url": "https://2026.stateofcss.com/en-US/other_features/#other_features_pain_points", "question": "other_features", "subQuestion": "other_features_pain_points", "path": "dataAPI.surveys.state_of_css.css2026.other_features.other_features_pain_points.freeform.allEditions.1.buckets.6.entity" }, { "name": "State of CSS 2026", "url": "https://2026.stateofcss.com/en-US/_all_features/#all_features", "question": "_all_features", "subQuestion": "all_features", "path": "dataAPI.surveys.state_of_css.css2026._all_features.all_features.39.entity" }, { "name": "State of CSS 2025", "url": "https://2025.stateofcss.com/en-US/features/#reading_list", "question": "reading_list", "subQuestion": "reading_list", "path": "dataAPI.surveys.state_of_css.css2025.reading_list.reading_list.combined.allEditions.0.buckets.2.entity" }, { "name": "State of CSS 2025", "url": "https://2025.stateofcss.com/en-US/features/#all_features", "question": "features", "subQuestion": "all_features", "path": "dataAPI.surveys.state_of_css.css2025.features.all_features.53.entity" }, { "name": "State of CSS 2024", "url": "https://2024.stateofcss.com/en-US/features/#reading_list", "question": "reading_list", "subQuestion": "reading_list", "path": "dataAPI.surveys.state_of_css.css2024.reading_list.reading_list.responses.currentEdition.buckets.2.entity" }, { "name": "State of CSS 2024", "url": "https://2024.stateofcss.com/en-US/features/#all_features", "question": "features", "subQuestion": "all_features", "path": "dataAPI.surveys.state_of_css.css2024.features.all_features.58.entity" } ], "chromeUseCounters": { "percentageOfPageLoad": 0.00685554, "url": "https://chromestatus.com/metrics/webfeature/timeline/popularity/54" }, "interop": [ { "year": 2025, "label": "interop-2025-scope", "url": "https://wpt.fyi/interop-2025?feature=interop-2025-scope" } ], "wpt": { "url": "https://wpt.fyi/results?q=feature:scope" }, "developerSignals": null, "bugs": { "firefox": [ "https://bugzil.la/1830512" ], "chrome": [ "https://crbug.com/1280240" ] }, "useCases": null, "baselineLowDateAsObject": "2026-03-24T00:00:00.000Z", "baselineHighDateAsObject": null, "expectedBaselineHighDate": "2028-09-24" }