CSS機能クエリ

CSSで機能クエリを操作する方法

機能クエリはCSSの最近の比較的未知の機能ですが、十分にサポートされています1。

これを使用して、ブラウザで機能がサポートされているかどうかを確認できます。@supportsキーワード。

これは、これを書いている時点で、ブラウザがCSSグリッドをサポートしているかどうかを確認するのに特に役立つと思う例です。これは次の方法で実行できます。

@supports (display: grid) {
  /* apply this CSS */
}

ブラウザがサポートしているかどうかを確認しますgridの値displayプロパティ。

使用できます@supportsCSSプロパティの場合、値を確認します。

論理演算子も使用できますand、orそしてnot複雑な機能クエリを作成します。

この例では、ブラウザが両方をサポートしているかどうかを確認しますCSSグリッドそしてFlexbox：

@supports (display: grid) and (display: flex) {
  /* apply this CSS */
}

私の無料ダウンロードCSSハンドブック