-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
50 lines (33 loc) · 1.21 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
---
title: CSSSupportsRule
slug: Web/API/CSSSupportsRule
page-type: web-api-interface
browser-compat: api.CSSSupportsRule
---
{{APIRef("CSSOM")}}
The **`CSSSupportsRule`** interface represents a single CSS {{cssxref("@supports")}} [at-rule](/en-US/docs/Web/CSS/At-rule).
{{InheritanceDiagram}}
## Instance properties
_Inherits properties from its ancestors {{domxref("CSSConditionRule")}}, {{domxref("CSSGroupingRule")}}, and {{domxref("CSSRule")}}._
## Instance methods
_Inherits methods from its ancestors {{domxref("CSSConditionRule")}}, {{domxref("CSSGroupingRule")}}, and {{domxref("CSSRule")}}._
## Examples
The CSS includes a CSS feature query using the {{cssxref("@supports")}} [at-rule](/en-US/docs/Web/CSS/At-rule), containing one style rule. This will be the first CSSRule returned by `document.styleSheets[0].cssRules`.
`myRules[0]` therefore returns a {{domxref("CSSSupportsRule")}} object.
```css
@supports (display: grid) {
body {
color: blue;
}
}
```
```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // a CSSSupportsRule representing the feature query.
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{cssxref("@supports")}}