Bonjour,

Je vous propose un nouvel élément à utiliser : PrefixFinder

De quel préfixe vendeur votre visiteur a-t-il besoin ?



Présentation

PrefixFinder est un petit script utilitaire permettant de gérer facilement les préfixes vendeurs liés au navigateur de votre visiteur lorsque vous devez manipuler les styles CSS.



Fonctionnalités

PrefixFinder propose diverses fonctions utiles :

  • PrefixFinder.prefixe contient un objet composé de deux propriétés (.css et .js) indiquant le préfixe CSS et JavaScript du navigateur ;
  • PrefixFinder.getPrefixedProp(propriete) est une méthode retournant un objet composé de deux propriétés (.css et .js) indiquant pour la propriété CSS propriete sa syntaxe CSS et JavaScript pour le navigateur de l'utilisateur ;
  • PrefixFinder.getPrefixedPropValue(propriete, valeur) est une méthode retournant un objet composé de trois propriétés (.css, .js et .valeur) indiquant pour la propriété CSS propriete si la valeur valeur est reconnue pour le navigateur de l'utilisateur et s'il faut un préfixe pour cette valeur ;
  • PrefixFinder.listPrefixes contient un objet des valeurs déjà cherchées, les clés correspondant à la notation JavaScript non préfixée de la propriété ;
  • enfin, deux méthodes .camelize() et .deCamelize() permettent de retourner la notation camelCase de la chaine passée en paramètre ou l'inverse.




Utilisation

Pour mettre en place PrefixFinder sur votre site, il suffit d'intégrer le script dans votre page (si possible dans le head (le script n'a pas besoin que la page soit complètement chargée pour fonctionner) puis de définir une instance :

var prefixer = new PrefixFinder();



Notes

Certaines propriétés CSS implémentent différemment différentes valeurs. Par exemple, la propriété transform peut nécessiter un préfixe pour les transformations 3D mais pas pour les transformations 2D, la méthode .getPrefixedPropValue() tient compte de cela.

Internet Explorer 8 et inférieurs renvoie une erreur si l'on essaye d'affecter une valeur non valide pour une propriété, c'est pourquoi le code comporte des instructions try catch.

Les préfixes JavaScript, contrairement aux préfixes CSS, ne sont pas normalisés et les navigateurs n'utilisent pas la même règle : certains restent conformes à la règle de transformation de nom CSS JavaScript (lowerCamelCase) alors que d'autres préfèrent indiquer qu'il s'agit d'un préfixe en distinguant les noms lowerCamelCase pour les propriétés standards et les nom UpperCamelCase pour les propriétés préfixées, c'est pourquoi le script fait une recherche du préfixe réel et non dans une liste figée.

Si aucun préfixe n'a été trouvé, on considère qu'il s'agit d'Internet Explorer.



Compatibilité

Sauf erreur de ma part, le script est compatible tous navigateurs et toutes versions.



Pourquoi intégrer les notations CSS ?

S'agissant d'un script JavaScript, la manipulation des styles se fera en JavaScript via l'objet style des éléments HTML. De ce fait, seuls les propriétés en notation JavaScript sont supposées être utiles.

Au moins deux cas de figure peuvent cependant nécessiter l'utilisation des propriétés en notation CSS.

  • Lorsque l'on modifie plusieurs propriétés de style simultanément, il est conseillé, pour des raisons de performance, d'utiliser la propriété cssText et non chaque propriété individuelle. Or cssText prend comme valeur une chaine dans laquelle la notation des styles est celle de CSS.
  • On peut prévoir d'utiliser ce script comme préprocesseur des feuilles de style en parsant l'objet document.styleSheets par exemple et en réécrivant chaque règle si besoin avec les valeurs préfixées. Cela permettra de simplifier l'écriture des feuilles de style en n'écrivant que les propriétés standards et en adaptant celles nécessitant un préfixe directement dans la page Web.




Exemple d'utilisation

Vous pouvez voir sur cette page (regarder la source) une mise en oeuvre de ce script.

Qu'en pensez-vous ?