Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

@supports (compatibility prefix)

-webkit-transform-3d は CSS の論理メディア特性で WebKit 拡張であり、ベンダー接頭辞付きの CSS 3D transform に対応していれば値が true になります。

メモ: このメディア特性は現在、大部分のブラウザーが対応していますが、可能であれば、代わりに @supports 機能クエリーを使用してください。

機能検出互換性

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.-webkit-transform-3d
2
12
49
4
18
3.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

ライブデモ

@supports Basics

CSS @supports basic demo.

プレビュー全画面表示

@supports not

CSS @supports not demo.

プレビュー全画面表示

prefixconfirm

CSS prefixconfirm demo.

プレビュー全画面表示

実務での使いどころ

  • 3D変形の機能検出

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

注意点

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

アクセシビリティ

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

参考リンク