The CSS.supports() static methods returns a Boolean value indicating if the browser supports a given CSS feature, or not.
boolValue = CSS.supports(propertyName, value); boolValue = CSS.supports(supportCondition);
There are two distinct sets of parameters. The first one allows to test the support of a pair property-value:
DOMString containing the name of the CSS property to check.DOMString containing the value of the CSS property to check.The second syntax takes one parameter matching the condition of @supports:
DOMString containing the condition to check.result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display: flex");
result = CSS.supports("(--foo: red)");
result = CSS.supports(`(transform-style: preserve) or (-moz-transform-style: preserve) or
(-o-transform-style: preserve) or (-webkit-transform-style: preserve)`);
// result is true or false | Specification | Status | Comment |
|---|---|---|
| CSS Conditional Rules Module Level 3 The definition of 'CSS: supports()' in that specification. | Candidate Recommendation | Initial definition. |
| Desktop | ||||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
| Basic support | 61
|
Partial
|
55
|
No | 12.1 | No |
| Mobile | |||||||
|---|---|---|---|---|---|---|---|
| Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | 61
|
61
|
Partial
|
55
|
12.1 | No | ? |
@supports at-rule that allows for the same functionality but in a declarative way.CSSSupportsRule CSSOM class allowing to manipulate @supports at-rules.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports