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

BCD tables only load in the browser

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.