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.
Très intéressant tout ça.
A tester =)
Une alternative à ce « problème » de paresse à écrire des lignes supplémentaires est l’utilisation de ‘langages’ tels que Less ou Sass, qui permettent justement d’optimiser l’écriture tout en conservant le code complet dans le fichier CSS final une fois interprété et compilé.
On trouve dans ces solutions des « fonctions » toute prête pour générer des border-radius ou autre box-shadow par exemple. On peut même créer nos propres fonctions…
Ces 2 solutions proposent des plusieurs méthodes de compilation, soit côté client à chaque chargement de la page via un JS donc (je suis pas fan), soit côté serveur (un peu restrictif par rapport à la mise en place), ou tout simplement au moment du developpement (compilation auto à chaque sauvegarde) et on appelle ainsi directement dans la page le fichier CSS généré…
Je ne me suis pas penché sur la « propreté » du code CSS ainsi généré mais Twitter Bootstrap utilise Less, je pense donc que c’est un bon gage de qualité…
+1 pour less ou sass !!
webSilone, Gilles {
Faudrait que je me penche sur Less ou Sass, mais jusqu’à présent, j’ai fais l’impasse sur les solutions basées sur des lignes de commandes. Mais ça fait longtemps que je n’ai pas jeté un oeil sur ces techniques : il y a peut-être du nouveau. Vous avez un truc à me conseiller sur Less ou Sass ?
}
J’ai commencé par Sass qui est utilisé par le framework Sencha Touch, puis j’ai eu affaire à Less quand j’ai utilisé Twitter Bootstrap.
En terme de syntaxe, les 2 se valent.
J’ai cependant une préférence pour Less par rapport aux méthodes de compilation.
Pour Sass il faut obligatoirement passer par de la ligne de commande, pour Less, il y a plusieurs alternatives (à la volée dans la page Web côté client, côté client ou encore en local au moment du dev avant déploiement). La compilation en locale peut se faire via une petite appli (sous Mac OS en tout cas).
Je m’apprête d’ailleurs à utiliser Less sur un nouveau projet…
Chic, une perche trollesque ! Vite, je la prends 🙂
En ce qui me concerne je vois plusieurs grosses différences entre LESS/SASS/Compass et -prefix-free en terme d’état d’esprit.
LESS aura un impact sur ma fainéantise : il va m’aider à compléter les trous automatiquement en rajoutant les lignes manquantes. Mais c’est tout ce qu’il va m’apporter. Bref, c’est un outil pratique mais égoïste : il ne sert qu’à moi.
-prefix-free va faire la même chose, mais aura l’excellente idée de ne pas ajouter tous les préfixes pour tous les navigateurs. En clair, il n’ajoutera du -moz- que si c’est Firefox qui consulte la page.
De ce second effet kiss kool en découle que ma feuille de style ne va pas mesurer 3km de long pour rien, donc que les performances n’en seront pas altérées. Donc je ne l’utilise pas que pour moi, mais aussi pour mes clients.
Et de plus, en bonux, -prefix-free m’assure que mes anciens, actuels et futurs sites sont toujours à jour en terme de préfixes.
C’est pas un peu réducteur de limiter l’utilité de Less à une écriture plus confortable pour l’intégrateur, il me semble que les variables, les opérations, les mixins, les règles imbriquées soient des arguments de tailles concernant l’utilisation de Less.
Pascal : en effet, je n’ai évoqué que le strict domaine des préfixes. Les outils tels que Less vont bien entendu plus loin que cela.