DEVENIR-WEBMASTER.COM Log In
 33
close

Les préfixes vendeurs

Visiter ma chaine Youtube

# A quoi servent les préfixes vendeurs ? close

Je vais faire une explication un peu simpliste.

  1. Je suis un développeur de Chrome et je veux développer une propriété CSS3 qui n'est pas validée dans la norme du W3C. Ma propriété s'appelle new-prop. J'ai la possibilité tout en restant dans la norme de développer ma propriété en mettant un préfixe devant son nom. Ce préfixe est le mien. Je vais appeler ma propriété -webkit-new-prop.
  2. Je suis un développeur de Firefox. Je trouve intéressant ce que fait new-prop . Alors je décide d'implémenter new-prop sur Firefox. J'ai le droit de le faire en utilisant mon préfixe. La propriété va s'appeler -moz-new-pro.
  3. Un beau jour new-prop est validée dans la norme CSS3. La propriété new-prop devient utilisable sous ce nom. L'utilité du préfixe est obsolète pour cette propriété.

# Comment les utiliser ? close

Le développeur d'un site web qui code sa feuille de style doit y placer -webkit-new-prop pour les internautes qui utilisent Chrome. Il doit ensuite placer -moz-new-prop pour les internautes qui utilisent Firefox. Et enfin new-prop pour anticiper le moment où la propriété sera validée.

Exemple de code CSS avec une nouvelle propriété

# Conséquences close

  1. Une augmentation du travail de codage pour les développeurs de site qui ne sont clairement pas les gagnants dans ce processus.
  2. Des feuilles de styles qui vont épaissir et perdre en lisibilité. Ce qui n'était déjà pas leur point fort.
  3. Des développeurs qui vont se limiter au préfixe leader -webkit- ce qui va même amener les autres constructeurs à prendre en charge -webkit- en plus de leur propre préfixe.

# Le début de la solution Autoprefixer. close

Explication sur un exemple : un dégradé horizontal du noir vers le blanc

Image d'un dégradé horizontal noir blanc

Le développeur code sa feuille de style et oublie les préfixes.

Un outil du nom de Autoprefixer lui propose de traiter sa feuille de style pour y ajouter les préfixes.

L'outil est configurable selon le niveau de compatibilité que vous souhaitez obtenir.

L'inconvénient c'est qu'il faut faire appel à une application web extérieure pour post traiter votre feuille de style ce qui n'est pas très pro. De plus ce mécanisme est statique. Au fur et à mesure que le temps s'écoule votre feuille de style embarque des préfixes qui ne sont plus utiles. Pour bien faire il faut y revenir.

# La solution idéale. close

Il existe des plugins notamment un pour l'éditeur Sublime Text. Mais ça reste manuel et statique. La solution idéale serait que la feuille de style du développeur sans préfixe soit adaptée à la volée.