Comment vérifier la prise en charge des propriétés et des valeurs CSS dans les navigateurs ?

Détection de la prise en charge du navigateur pour les propriétés et valeurs CSS

Problème :

Déterminer si une propriété ou une valeur CSS est prise en charge par un navigateur particulier est crucial pour garantir la compatibilité entre navigateurs. Cependant, les solutions existantes se concentrent souvent uniquement sur l’accompagnement immobilier. Comment pouvons-nous vérifier à la fois la prise en charge des propriétés et des valeurs en CSS ou JavaScript ?

Solution :

CSS.supports

Modern les navigateurs prennent en charge l'API CSS.supports, qui permet la validation des propriétés et des valeurs. La syntaxe est la suivante :

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

Exemple :

Le code JavaScript suivant illustre l'utilisation de 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>

L'API CSS.supports renvoie true si la propriété et/ou la valeur spécifiée est prise en charge, et false dans le cas contraire. Cela permet des tests complets de prise en charge entre navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!