CSS
フィーチャクエリ

構文

• @supports [条件] {/ *適用するCSSルール* /}

パラメーター

備考

基本的な@サポートの使用

@supports (display: flex) {
  /* Flexbox is available, so use it */
  .my-container {
    display: flex;
  }
}

構文に関して、 @supportsは@mediaと非常に似ていますが、画面のサイズと向きを検出する代わりに、 @supportsはブラウザが特定のCSSルールを処理できるかどうかを検出します。

@supports (flex)ようなものではなく、ルールが@supports (display: flex)ことに注意してください。

機能検出の連鎖

一度に複数のフィーチャを検出するには、 and演算子を使用します。

@supports (transform: translateZ(1px)) and (transform-style: preserve-3d) and (perspective: 1px) {
  /* Probably do some fancy 3d stuff here */
}

また、 or演算子とnot演算子もあります。

@supports (display: flex) or (display: table-cell) {
  /* Will be used if the browser supports flexbox or display: table-cell */
}
@supports not (-webkit-transform: translate(0, 0, 0)) {
  /* Will *not* be used if the browser supports -webkit-transform: translate(...) */
}

究極の@supportsエクスペリエンスを得るには、括弧で論理式をグループ化してみてください。

@supports ((display: block) and (zoom: 1)) or ((display: flex) and (not (display: table-cell))) or (transform: translateX(1px)) {
  /* ... */
}

これは、ブラウザ

1. display: blockをサポートdisplay: block AND zoom: 1 、または
2. display: flexをサポートしdisplay: flex AND NOT display: table-cell 、または
3. transform: translateX(1px)をサポートしています。