CSS3

：

@規則

：

@supports

　 編集：2022.07.14 by T.A.

[Edge]○。→●、mdn

条件付きグループ規則であり、ユーザーエージェントが CSS property:value ペア 【プロパティの［名前、値］が成すペア】をサポートするかどうかをテストする。

これを利用すれば、［新たな特能がサポートされていて可用ならば それを利用し、さもなければ上品に退行する］ようなスタイルシートを書ける。これらのクエリは、CSS 特能クエリ あるいは（俗に） supports クエリ と呼ばれる。

@supports <supports-condition> { <stylesheet> }
<supports-condition>
＝not <supports-in-parens>
| <supports-in-parens> [and <supports-in-parens>]*
| <supports-in-parens> [or <supports-in-parens>]*
<stylesheet> ●
規則リストを表現する。それは、それを利用しているブロックが［ある特定の文脈に制限されるもの以外の、すべての規則］を既定で受容することを除いて、<rule-list> と一致する。
<supports-in-parens>
＝( <supports-condition> )
| <supports-feature>
| <general-enclosed>
<supports-feature>
＝<supports-decl>
<supports-decl>
＝( <declaration> )
<general-enclosed>
＝[ <function-token> <any-value> ) ]
| ( <ident> <any-value> )

display: flex がサポートされるときに限り、@supports 規則の内側にある規則を適用する。 

@supports ( display: flex ) {
  body, #navigation, #content { display: flex; }
  #navigation { background: blue; color: white; }
  #article { background: white; color: black; }
}

display: flex がサポートされないときに代替を供するために利用できる、追加の @supports 規則を次の例に示す： 

@supports not ( display: flex ) {
  body { width: 100%; height: 100%; background: white; color: black; }
  #navigation { width: 25%; }
  #article { width: 75%; }
}

width 宣言は、flex レイアウトには害を及ぼし得るので、非 flex スタイル内に限り在ることが重要になることに注意。

以下のCSSが組み込んであります： 

<SPAN class=Test>テスト</SPAN>

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：