@supports

試してみましょう

.flex-container > * {
  padding: 0.3em;
  list-style-type: none;
  text-shadow: 0 0 2px red;
  float: left;
}

@supports (display: flex) {
  .flex-container > * {
    text-shadow: 0 0 2px blue;
    float: none;
  }

  .flex-container {
    display: flex;
  }
}

<ul class="flex-container">
  <li><a href="#">Index</a></li>
  <li><a href="#">About me</a></li>
  <li><a href="#">Contact</a></li>
</ul>

JavaScript では @supports は CSS オブジェクトモデルインターフェイスの CSSSupportsRule からアクセスできます。

構文

@supports アットルールは、 supports 条件 を含む文のブロックで構成されます。 supports 条件は、1 つ以上の名前と値のペア （例： <property>: <value>）のセットです。

@supports (<supports-condition>) {
  /* 条件が true の場合、このブロックの CSS を使用します。 */
}

条件は、結合条件 (and)、非結合条件 (or)、否定 (not) で組み合わせることができます。

@supports (<supports-condition>) and (<supports-condition>) {
  /* 両方の条件が true の場合、このブロックの CSS を使用します。 */
}

演算子の優先順位は、括弧で定義することができます。 対応条件は、<property>: <value> 宣言構文または <function()> 構文のいずれかを使用することができます。 以下の節では、それぞれの種類の対応条件の使用方法について記述します。

宣言の構文

宣言構文は、ブラウザーが指定された <property>: <value> 宣言に対応しているかどうかを調べます。 宣言は括弧で囲む必要があります。 次の例は、ブラウザーが式 transform-origin: 5% 5% に対応している場合に true を返します。

@supports (transform-origin: 5% 5%) {
}

関数構文

関数構文は、関数内の値または式がブラウザーに対応しているかどうかを調べます。 関数構文で対応している関数は、次の節で記述されています。

selector()

ブラウザーがテストされたセレクターの構文に対応しているかどうかを検査します。 以下の例は、ブラウザーが子結合子に対応していれば true を返します。

@supports selector(h2 > p) {
}

font-tech()

この関数は、ブラウザーがレイアウトおよびレンダリングのために指定されたフォント技術に対応しているかどうかを調べます。 次の例では、ブラウザーが COLRv1 フォント技術に対応している場合、true を返し、CSS スタイルを適用します。

@supports font-tech(color-COLRv1) {
}

以下の表は、フォント技術 (<font-tech>) について記述しています。これには、色フォント技術 (<color-font-tech>)、フォント機能技術 (<font-features-tech>)、および関数 font-tech() を使用して照会できるそれ以外の利用可能なフォント技術を含みます。

font-format()

この関数は、ブラウザーがレイアウトおよびレンダリングのために指定されたフォント形式に対応しているかどうかを調べます。 次の例は、ブラウザーが opentype フォント形式に対応している場合、 true を返し、 CSS スタイルを適用します。

@supports font-format(opentype) {
}

次の表は、この関数でクエリーできる利用可能な形式 （<font-format> 値） を記述したものです。

not 演算子

not 演算子は、新たな式を作成するために任意の式の前に置くことができ、元の式を否定します。 以下の例は、ブラウザーが transform-origin プロパティの値として 10em 10em 10em を無効とするのであれば true を返します。

@supports not (transform-origin: 10em 10em 10em) {
}

他の演算子と同様に、 not 演算子はどれだけ複雑な宣言にも適用できます。 以下の例はすべて有効な式です。

@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}

and 演算子

and 演算子は 2 つの式から、元の式の論理積で構成される新たな式を作成します。元の式の両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式が同時に true になる場合に限り、全体の式も true になります。

@supports (display: table-cell) and (display: list-item) {
}

括弧を増やすことなく、複数の論理積を並記することができます。以下の式はどちらも等価です。

@supports (display: table-cell) and (display: list-item) and (display: contents) {
}
@supports (display: table-cell) and
  ((display: list-item) and (display: contents)) {
}

or 演算子

or 演算子は 2 つの式から、元の式の論理和で構成される新たな式を作成します。元の式の一方または両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式の少なくとも 1 つが true になる場合に限り、全体の式も true になります。

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}

括弧を増やすことなく、複数の論理和を並記することができます。以下の式はどちらも等価です。

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve) {}

@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}

形式文法

@supports = 
  @supports <supports-condition> { <rule-list> }  

<supports-condition> = 
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]*  |
  <supports-in-parens> [ or <supports-in-parens> ]*   

<supports-in-parens> = 
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>        

<supports-feature> = 
  <supports-selector-fn>     |
  <supports-font-tech-fn>    |
  <supports-font-format-fn>  |
  <supports-at-rule-fn>      |
  <supports-decl>            

<general-enclosed> = 
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]                 

<supports-selector-fn> = 
  selector( <complex-selector> )  

<supports-font-tech-fn> = 
  font-tech( <font-tech> )  

<supports-font-format-fn> = 
  font-format( <font-format> )  

<supports-at-rule-fn> = 
  at-rule( <at-keyword-token> )  

<supports-decl> = 
  ( <declaration> )  

<complex-selector> = 
  <complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*  

<font-tech> = 
  <font-features-tech>  |
  <color-font-tech>     |
  variations            |
  palettes              |
  incremental           

<font-format> = 
  <string>           |
  collection         |
  embedded-opentype  |
  opentype           |
  svg                |
  truetype           |
  woff               |
  woff2              

<complex-selector-unit> = 
  [ <compound-selector>? <pseudo-compound-selector>* ]!  

<combinator> = 
  '>'          |
  '+'          |
  '~'          |
  [ '|' '|' ]  

<font-features-tech> = 
  features-opentype  |
  features-aat       |
  features-graphite  

<color-font-tech> = 
  color-COLRv0  |
  color-COLRv1  |
  color-SVG     |
  color-sbix    |
  color-CBDT    

<compound-selector> = 
  [ <type-selector>? <subclass-selector>* ]!  

<pseudo-compound-selector> = 
  <pseudo-element-selector> <pseudo-class-selector>*  

<type-selector> = 
  <wq-name>         |
  <ns-prefix>? '*'  

<subclass-selector> = 
  <id-selector>            |
  <class-selector>         |
  <attribute-selector>     |
  <pseudo-class-selector>  

<pseudo-element-selector> = 
  : <pseudo-class-selector>         |
  <legacy-pseudo-element-selector>  

<pseudo-class-selector> = 
  : <ident-token>                   |
  : <function-token> <any-value> )  

<wq-name> = 
  <ns-prefix>? <ident-token>  

<ns-prefix> = 
  [ <ident-token> | '*' ]? '|'  

<id-selector> = 
  <hash-token>  

<class-selector> = 
  '.' <ident-token>  

<attribute-selector> = 
  '[' <wq-name> ']'                                   |
  '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'  

<legacy-pseudo-element-selector> = 
  : [ before | after | first-line | first-letter ]  

<attr-matcher> = 
  [ '~' | '|' | '^' | '$' | '*' ]? '='  

<attr-modifier> = 
  i  |
  s  

例

指定した CSS プロパティの対応状況を確認

@supports (animation-name: test) {
  /* 接頭辞がないプロパティでアニメーションに対応する場合に適用する CSS */
  @keyframes {
    /* 他のアットルールを含むことができる */
  }
}

指定した CSS プロパティの対応状況を、接頭辞付きも含めて確認

@supports (text-stroke: 10px) or (-webkit-text-stroke: 10px) {
  /* text-stroke が対応している場合に適用される CSS（接頭辞の有無は問わない） */
}

指定した CSS プロパティに対応していないことを確認

@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
  … /* text-align-last: justify をシミュレートするために適用する CSS */
}

セレクターの対応の検査

CSS 条件付きルール 4 仕様書では、セレクターの対応を検査する機能が追加されています。例えば :has() です。

/* このルールは :has() に対応していないブラウザーでは適用されません */
ul:has(> li li) {
  … /* :has(…) セレクターに対応している場合に CSS が適用される */
}

@supports not selector(:has(a, b)) {
  /* :has() に対応していない場合の代替 */
  ul > li,
  ol > li {
    /* 上記のものは :has(…) に対応していないブラウザーのために展開しています */
  }
}

/* Note: 今のところ :nth-child(…) の `of` 引数に対応しているブラウザーはありません。 */
@supports selector(:nth-child(1n of a, b)) {
  /* このルールは @supports ブロックの中に記述する必要があります。
     nth-child(…)の `of` 引数に対応していないブラウザーでは、
     部分的に適用されます。 */
  :is(:nth-child(1n of ul, ol) a, details > summary) {
    /* :is(…) セレクターと :nth-child(…) の
          両方に対応している場合にのみ適用される CSS */
  }
}

フォント技術の対応状況を確認

次の例は、ブラウザーが COLRv1 フォント技術に対応している場合に CSS スタイルを適用します。

@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice");

@supports font-tech(color-COLRv1) {
  font-family: "Bungee Spice";
}

フォント技術の対応を検査するには、 @font-face アットルール内の tech 関数を使用することもできます。 ブラウザーがフォント技術に対応していない場合は、代替フォント (Bungee-fallback.otf) を使用することができます。

@font-face {
  font-family: "Bungee Spice";
  src:
    url("https://fonts.googleapis.com/css2?family=Bungee+Spice")
      tech(color-COLRv1),
    url("Bungee-fallback.otf") format("opentype");
}

フォント形式の対応検査

次の例は、ブラウザーが woff2 フォント形式に対応している場合に CSS スタイルを適用します。

@supports font-format(woff2) {
  font-family: "Open Sans";
  src: url("open-sans.woff2") format("woff2");
}

仕様書

ブラウザーの互換性

関連情報

• 機能クエリーの使用
• CSS アットルール関数
• CSSSupportsRule
• CSS.supports() メソッド