close

Les préfixes vendeurs

#1 A quoi servent les préfixes vendeurs ? open

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é.

#2 Comment les utiliser ? open

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é

#3 Conséquences open

  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.

#4 Le début de la solution Autoprefixer. open

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.

#5 La solution idéale. open

Le plugin Emmet de l'éditeur Sublime Text prend en charge l'autopréfixage.