Comment puis-je facilement ajouter des préfixes de fournisseur à mon CSS ?

CSS préfixés par le fournisseur avec un effort minimal

En tant que développeurs, nous sommes souvent confrontés à la tâche fastidieuse de définir des propriétés CSS préfixées par le fournisseur telles que « transformer » ' pour la compatibilité entre navigateurs. L'approche traditionnelle consiste à spécifier manuellement chaque préfixe de fournisseur, ce qui entraîne un code verbeux et répétitif. Existe-t-il une meilleure solution ?

Une alternative simple et efficace consiste à créer une fonction personnalisée qui gère automatiquement le préfixe du fournisseur. Voici comment procéder :

function setVendor(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

Cette fonction prend trois paramètres : l'élément HTML auquel appliquer le style, le nom de la propriété CSS et la valeur souhaitée. Il parcourt les préfixes courants du fournisseur et les ajoute à chaque nom de propriété avant de définir la valeur.

Utilisation :

Avec cette fonction en place, définition du CSS préfixé par le fournisseur devient une opération sur une seule ligne :

setVendor(elem, "Transform", "translate3d(0,0,0)");

Cela appliquera automatiquement la propriété 'transform' avec la valeur spécifiée à tous les préfixes de navigateur pris en charge. Dites adieu au code redondant et bonjour à un flux de développement rationalisé.

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!