CSS: supports() statische Methode

Baseline Widely available

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

Die CSS.supports() statische Methode gibt einen booleschen Wert zurück, der angibt, ob der Browser ein bestimmtes CSS-Feature unterstützt oder nicht.

Syntax

js
CSS.supports(propertyName, value)
CSS.supports(supportCondition)

Parameter

Es gibt zwei unterschiedliche Sätze von Parametern. Der erste ermöglicht es, die Unterstützung eines Eigenschaft-Wert-Paars zu testen:

propertyName

Ein String, der den Namen der zu überprüfenden CSS-Eigenschaft enthält.

value

Ein String, der den Wert der zu überprüfenden CSS-Eigenschaft enthält.

Die zweite Syntax erfordert einen Parameter, der der Bedingung von @supports entspricht:

supportCondition

Ein String, der die zu überprüfende Bedingung enthält.

Rückgabewert

true, wenn der Browser die Regel unterstützt, andernfalls false.

Beispiele

In den folgenden Beispielen ist result ein boolescher Wert, der angibt, ob der Browser das gegebene CSS-Feature unterstützt.

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)",
);

Für weitere Beispiele und Syntaxmerkmale siehe die @supports-Regel.

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
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
Parentheses for single-argument version are optional.

Legend

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

Full support
Full support

Siehe auch

  • Die @supports-Regel, die die gleiche Funktionalität auf deklarative Weise ermöglicht.
  • Die CSSSupportsRule CSSOM-Klasse, die es ermöglicht, @supports-Regeln zu manipulieren.