CSSSupportsRule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

CSSSupportsRule インターフェイスは、1 個の CSS @supports アット規則 を表すオブジェクトを表します。

CSSRule CSSGroupingRule CSSConditionRule CSSSupportsRule

プロパティ

祖先である CSSConditionRule, CSSGroupingRule, CSSRule からプロパティを継承しています。

メソッド

祖先である CSSConditionRule, CSSGroupingRule, CSSRule からメソッドを継承しています。

例

この CSS には CSS 機能クエリーとして @supports アットルールを使用しており、その中にスタイルルールを 1 つ含んでいます。これは document.styleSheets[0].cssRules が最初に返す CSSRule になります。 したがって、 myRules[0] は CSSSupportsRule オブジェクトを返します。

css
@supports (display: grid) {
  body {
    color: blue;
  }
}
js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // CSSSupportsRule は機能クエリーを表す。

仕様書

Specification
CSS Conditional Rules Module Level 3
# the-csssupportsrule-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報