CSS: supports() static method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

Syntax

js
CSS.supports(propertyName, value)
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 string containing the name of the CSS property to check.

value

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

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

supportCondition

A string containing the condition to check.

Return value

true if the browser supports the rule, otherwise false.

Examples

In the following examples, result is a boolean value indicating if the browser supports the given CSS feature.

js
result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display: flex");
result = CSS.supports("(--foo: red)");
result = CSS.supports("selector(:has(a))");
result = CSS.supports(
  "(transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve)",
);

For more examples and syntax features, see the @supports at-rule.

Specifications

Specification
CSS Conditional Rules Module Level 3
# dom-css-supports

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
supports() static method
Chrome – Full support
Chrome 28 (Release date: 2013-07-09)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 22 (Release date: 2013-06-25)
footnote Full support
Opera – Full support
Opera 15 (Release date: 2013-07-02)
footnote Full support
Safari – Full support
Safari 9 (Release date: 2015-09-30)
footnote Full support
Chrome Android – Full support
Chrome Android 28 (Release date: 2013-07-10)
footnote Full support
Firefox for Android – Full support
Firefox for Android 22 (Release date: 2013-06-25)
footnote Full support
Opera Android – Full support
Opera Android 15 (Release date: 2013-07-08)
footnote Full support
Safari on iOS – Full support
Safari on iOS 9 (Release date: 2015-09-16)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 9 (Release date: 2015-09-16)
footnote Full support
Parentheses for single-argument version are optional.
Chrome – Full support
Chrome 61 (Release date: 2017-09-05)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – Full support
Firefox 55 (Release date: 2017-08-08)
footnote Full support
Opera – Full support
Opera 48 (Release date: 2017-09-27)
footnote Full support
Safari – Full support
Safari 11 (Release date: 2017-09-19)
footnote Full support
Chrome Android – Full support
Chrome Android 61 (Release date: 2017-09-05)
footnote Full support
Firefox for Android – Full support
Firefox for Android 55 (Release date: 2017-08-08)
footnote Full support
Opera Android – Full support
Opera Android 45 (Release date: 2018-02-15)
footnote Full support
Safari on iOS – Full support
Safari on iOS 11 (Release date: 2017-09-19)
footnote Full support
Samsung Internet – Full support
Samsung Internet 8 (Release date: 2018-07-18)
footnote Full support
WebView Android – Full support
WebView Android 61 (Release date: 2017-09-05)
footnote Full support
WebView on iOS – Full support
WebView on iOS 11 (Release date: 2017-09-19)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also