CSSSupportsRule

{{APIRef("CSSOM")}}

The CSSSupportsRule interface represents a single CSS {{cssxref("@supports")}} 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, containing one style rule. This will be the first CSSRule returned by document.styleSheets[0].cssRules. myRules[0] therefore returns a CSSSupportsRule object.

@supports (display: grid) {
  body {
    color: blue;
  }
}

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")}}