Patricio Treviño · 10 January, 2019 · 2 min read
Detect browser support for specific CSS features
Syntax
|
@supports [not](<supports-condition>) { |
|
[styles] |
|
} |
| Option |
Description |
| supports-condition |
The feature to be evaluated |
Example
|
<html> |
|
<head> |
|
<style> |
|
.support-font-size-adjust { |
|
width: 22px; |
|
display:inline-block; |
|
} |
|
|
|
.support-font-size-adjust:after { |
|
content: '\274C'; |
|
font-size: 12px; |
|
} |
|
|
|
.support-flexbox { |
|
width: 22px; |
|
display:inline-block; |
|
padding-left: 3px |
|
} |
|
|
|
.support-flexbox:after { |
|
content: '\274C'; |
|
} |
|
|
|
@supports(font-size-adjust) { |
|
.support-font-size-adjust:after { |
|
content: '\2713'; |
|
} |
|
} |
|
|
|
@supports(display:flex) { |
|
.support-flexbox:after { |
|
content: '\2713'; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<span class="support-font-size-adjust"></span>Supports 'font-size-adjust' |
|
<span class="support-flexbox"></span>Supports 'flexbox' |
|
</body> |
|
</html> |
Output
Supports 'font-size-adjust'
Supports 'flexbox'
