Go back to home page of Unsolicited Advice from Tiffany B. Brown

The CSS.supports() API revisited

Think of 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.

Now the 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');

Eventually window.supportsCSS() became 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.

UPDATE (June 6, 2015): Based on WebKit build r185316, Safari 9 will likely support CSS.supports() along with this newer syntax.

Previous posts