Wie prüfe ich, ob CSS-Eigenschaften und -Werte in Browsern unterstützt werden?

Erkennen der Browserunterstützung für CSS-Eigenschaften und -Werte

Problem:

Bestimmen, ob eine CSS-Eigenschaft oder ein CSS-Wert unterstützt wird von Ein bestimmter Browser ist entscheidend, um die browserübergreifende Kompatibilität sicherzustellen. Bestehende Lösungen konzentrieren sich jedoch häufig ausschließlich auf die Immobilienbetreuung. Wie können wir sowohl die Eigenschafts- als auch die Werteunterstützung in CSS oder JavaScript überprüfen?

Lösung:

CSS.supports

Modern Browser unterstützen die CSS.supports-API, die sowohl die Validierung von Eigenschaften als auch von Werten ermöglicht. Die Syntax lautet wie folgt:

<code class="css">CSS.supports(property, value);</code>

Beispiel:

Der folgende JavaScript-Code demonstriert die Verwendung von CSS.supports:

<code class="javascript">console.log(
  // CSS.supports(property, value)
  1, CSS.supports("text-decoration-style", "blink"),
  2, CSS.supports("display", "flex"),
  3, CSS.supports('--foo', 'red'),
  4, CSS.supports('(--foo: red)'),

  // CSS.supports(DOMstring)
  5, CSS.supports("( transform-origin: 5% 5% )"),
  6, CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or "
  + "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )")
);</code>

Die CSS.supports-API gibt true zurück, wenn die angegebene Eigenschaft und/oder der angegebene Wert unterstützt wird, andernfalls false. Dies ermöglicht umfassende browserübergreifende Unterstützungstests.

Das obige ist der detaillierte Inhalt vonWie prüfe ich, ob CSS-Eigenschaften und -Werte in Browsern unterstützt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!