@supports (compatibility prefix)
Compatibility-prefixed @supports checks let code detect older prefixed implementations while still moving toward standard feature queries. They are mainly useful in transitional support windows.
Overview
Compatibility-prefixed @supports checks let code detect older prefixed implementations while still moving toward standard feature queries. They are mainly useful in transitional support windows.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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
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
Powered by web-features