Widely available Use only when a prefixed compatibility path still matters to your browser support matrix.

@supports (compatibility prefix)

The -webkit-transform-3d Boolean CSS media feature is a WebKit extension whose value is true if vendor-prefixed CSS 3D transforms are supported.

Note: While this media feature is currently supported by most browsers. If possible, use an @supports feature query instead.

Feature detectionCompatibilityProgressive enhancement

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.-webkit-transform-3d
2
12
49
4
18
3.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

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

Live demo

@supports Basics

CSS @supports basic demo.

PreviewFullscreen

@supports not

CSS @supports not demo.

PreviewFullscreen

prefixconfirm

CSS prefixconfirm demo.

PreviewFullscreen

Use cases

  • Legacy engine support

    Gate fallbacks or prefixed behavior when an older implementation still needs to be recognized.

  • Transition to standards

    Bridge from browser-specific prefixes to standard syntax without dropping compatibility immediately.

Cautions

  • Compatibility queries should be retired when the prefixed path is no longer required.
  • Keeping too many prefixed branches makes CSS harder to maintain and reason about.

Accessibility

  • Progressive enhancement should preserve readable, usable fallbacks in every support branch.
  • Do not reserve accessible improvements only for the newest feature path if an older branch remains supported.

Related links