-prefix-free : du beau, du bon, du mauvais ?

Pour l’intégrateur web, les préfixes «constructeur» sont une bénédiction et une malédiction. D’un côté, ils permettent de surfer sur la vague du progrès dès qu’une nouvelle propriété est disponible sur un navigateur ; d’un autre côté, ils ont la réputation d’allonger la feuille de style avec une foule de déclarations redondantes. Le DRY est mis à mal… Pour seulement 2KB (gzippé) le script Javascript -prefix-free de Lea Verou ajoute automatiquement les préfixes «vendeur» pour les propriétés CSS3 et les navigateurs qui en ont besoin.

Du beau ?

Ainsi, au lieu d’écrire :

-moz-box-shadow: #000 0 0px 2px;
-webkit-box-shadow: #000 0 0px 2px;
-o-box-shadow: #000 0 0px 2px;
-ms-box-shadow: #000 0 0px 2px;
-khtml-box-shadow: #000 0 0px 2px;
box-shadow: #000 0 0px 2px;

Il suffit de mettre uniquement la dernière déclaration box-shadow: #000 0 0px 2px; et -prefix-free s’occupe du reste.

Du bon ?

De nombreux maitres ès CSS comme Raphaël Goetter ou Eric Meyer sont plutôt favorables à l’utilisation de -prefix-free.

Du mauvais ?

Certains (Jérémie Patonnier dans Lier CSS à Javascript : une mauvaise idée) pointent leurs travers, tandis que d’autres (Nicolas Hoffmann dans Les préfixes constructeurs, comment bien les utiliser ? dont j’ai repris l’exemple des préfixes vendeur ci-dessus) s’interrogent sur la paresse qui s’empare de l’intégrateur web quand vient le moment d’ajouter quelques lignes supplémentaires.

Alors ?

Ce genre de script est diablement séduisant. Mais le diable se cache, comme chacun sait, dans les détails. Il est important de s’interroger plutôt deux fois qu’une avant d’inclure un nouveau script dans ses projets. Ceci dit, à première vue, je serais prêt à confier à -prefix-free l’analyse d’une feuille de style dédiée aux propriétés CSS3 pour éviter 1) de bloquer le chargement de la page si la CSS globale est imposante et 2) de mélanger le fond et la forme.

Pour aller plus loin