The CSS.supports() API revisited
CSS.supports() as a CSS-only feature detection API. Defined by the CSS Conditional Rules Module Level 3 specification, the
CSS.supports() API is the scriptable counterpart to the
@supports grouping rule.
You can use
CSS.supports() to test whether a user agent supports a particular property and value. That last part is important. You can't simply test support for a property. You must test for support of a property and a value.
CSS.supports() API has undergone a pretty significant syntax change since its introduction in 2012. In its original form, the
window.supportsCSS() method, the function accepted two arguments in a comma-separated list:
var supportsFlexbox = window.supportsCSS('display','flex');
window.CSS.supports and largely followed the same syntax: e.g.
CSS.supports(property, value). But the specification has evolved since then to support a new, supports condition syntax. Rather than passing a list of two arguments, you can instead pass a declaration as an argument.
var supportsFlexbox = CSS.supports('(display: flex)');
Notice that the declaration must be enclosed in parentheses. Just about any condition that's valid to use with a CSS
@supports rule is valid to use with this newer
CSS.supports() syntax. Want to negate a condition? No problem.
CSS.supports('not (text-decoration: underline wavy #606)');
Want to combine conditions? Cool.
CSS.supports('(display: flex) or (display: grid)');
This syntax is much more flexible than the original syntax. It's also supported in the latest versions of Chrome, Opera, Firefox, and the Project Spartan technical preview.