The CSSScopeRule
interface of the CSS Object Model represents a CSS @scope
at-rule.
CSSScopeRule
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Instance properties
Inherits properties from its ancestors CSSGroupingRule
and CSSRule
.
Instance methods
Inherits methods from its ancestors CSSGroupingRule
and CSSRule
.
Examples
Accessing @scope information in JavaScript
Assuming the following is the only stylesheet attached to a document:
css
@scope (.outer) to (.inner) { :scope { background: yellow; } }
The following JavaScript could be used to access information about the contained @scope
block:
js
const scopeBlock = document.styleSheets[0].cssRules[0]; console.log(scopeBlock.start); // Returns ".outer" console.log(scopeBlock.end); // Returns ".inner"
Specifications
Specification |
---|
CSS Cascading and Inheritance Level 6 # cssscoperule |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | ||
CSSScopeRule |
118 | 118 | 128 | 104 | 17.4 | 118 | No | 79 | 17.4 | 25.0 | 118 | |
end |
118 | 118 | 128 | 104 | 17.4 | 118 | No | 79 | 17.4 | 25.0 | 118 | |
start |
118 | 118 | 128 | 104 | 17.4 | 118 | No | 79 | 17.4 | 25.0 | 118 |
See also
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSScopeRule