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

Specification Status Comment
CSS Conditional Rules Module Level 3
The definition of 'CSS.supports()' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 28.0 [2] (Yes) 22 (22) [1] No support 12.1 9 [2]
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.4 (Yes) 22.0 (22) [1] No support 12.1 9

[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

Document Tags and Contributors

Last updated by: claudepache,