CSS.supports

The CSS.supports() static methods returns a Boolean value indicating if the browser supports a given CSS feature, or not.

Syntax

boolValue = CSS.supports(propertyName, value);
boolValue = CSS.supports(supportCondition);

Parameters

There are two distinct sets of parameters. The first one allows to test the support of a pair property-value:

propertyName

A DOMString containing the name of the CSS property to check.

value

A DOMString containing the value of the CSS property to check.

The second syntax takes one parameter matching the condition of @supports:

supportCondition

A DOMString containing the condition to check.

Examples

result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display", "flex");
result = CSS.supports('--foo', 'red');
result = CSS.supports('(--foo: red)');

result = CSS.supports("( transform-origin: 5% 5% )");
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

Browser compatibility

[1] Gecko 20 and 21 supported this feature only if the user enables it by setting the config value layout.css.supports-rule.enabled to true.

[2] In Chrome ≤ 51 (bug 584683) and Safari (bug 154669), CSS.supports('--foo', 'red') returns incorrectly false, even if custom properties are supported. As a workaround, you can use the form CSS.supports('(--foo: red)').

See also

• The @supports at-rule that allows for the same functionality but in a declarative way.
• The CSSSupportsRule CSSOM class allowing to manipulate @supports at-rules.