Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
メディアクエリ Widely available

@supports (compatibility prefix)

@supports を使った互換性プレフィックスクエリにより、ブラウザの3D変形サポートを検出できます。歴史的な WebKit プレフィックスを標準的な方法で参照でき、古いコードとの互換性を維持します。機能検出ベースのプログレッシブエンハンスメントに利用されます。

機能検出互換性

概要

@supports を使った互換性プレフィックスクエリにより、ブラウザの3D変形サポートを検出できます。歴史的な WebKit プレフィックスを標準的な方法で参照でき、古いコードとの互換性を維持します。機能検出ベースのプログレッシブエンハンスメントに利用されます。

対応ブラウザ

デスクトップ

Chrome 2+
Edge 12+
Safari 4+
Firefox 49+

モバイル

Chrome Android 18+
Safari iOS 3.2+
Firefox Android 49+

基本構文

CSS 
@supports (-webkit-transform-3d) {
  .card {
    transform-style: preserve-3d;
    perspective: 1000px;
  }
}

実務での使いどころ

  • 3D変形の機能検出

    3D変形をサポートするブラウザでのみ、3D効果を含むスタイルを適用します。

注意点

  • 現代のブラウザではほぼすべてが3D変形をサポートしているため、この互換性クエリの必要性は低下しています。

アクセシビリティ

  • 3D効果が無効化された場合でもコンテンツが読みやすい状態を維持するフォールバックを提供してください。

参考リンク