Comment puis-je déterminer la prise en charge par le navigateur des propriétés et des valeurs CSS ?

Détermination de la prise en charge par le navigateur des propriétés et valeurs CSS

Vous avez rencontré un problème où une propriété CSS (vh) ne fonctionne pas de manière cohérente dans tous les navigateurs . Pour résoudre ce problème, vous recherchez une méthode permettant de vérifier si les propriétés et les valeurs sont prises en charge. Bien que l'article de Lea Verou fournisse des informations, il n'est pas clair comment l'appliquer spécifiquement aux valeurs CSS.

Utilisation de CSS.supports

Les navigateurs modernes proposent désormais l'API CSS.supports , qui vous permet de vérifier la prise en charge de propriétés et de valeurs spécifiques. Voici comment vous pouvez l'utiliser :

<code class="javascript">console.log(
  // Check for property support
  1, CSS.supports("text-decoration-style", "blink"),
  2, CSS.supports("display", "flex"),

  // Check for value support
  3, CSS.supports('--foo', 'red'),
  4, CSS.supports('(--foo: red)'),

  // Check for more complex property and value combinations
  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>

Dans cet exemple, diverses propriétés et valeurs sont testées. La sortie de la console affichera « vrai » pour les fonctionnalités prises en charge et « false » pour celles non prises en charge. Cette API fournit un moyen concis et efficace de vérifier la prise en charge du navigateur pour les propriétés et les valeurs.

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!