W3cubDocs

/Web APIs

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

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.

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`	28	12	22	15	9	28	22	15	9	1.5	4.4	9
`optional_parens`	61	79	55	48	11	61	55	45	11	8.0	61	11