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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

-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

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



9 commentaires pour “-prefix-free : du beau, du bon, du mauvais ?”

  1. Dall0o dit :

    Très intéressant tout ça. A tester =)

  2. webSilone dit :

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

  3. Gilles dit :

    +1 pour less ou sass !!

  4. Bruno Bichet dit :

    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 ? }

  5. webSilone dit :

    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…

  6. Raphael dit :

    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.

    • Pascal dit :

      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.

  7. [...] background-position: 50% 0px; background-color:#222222; background-repeat : no-repeat; } css4design.com (via @chris_tofe) – Today, 1:26 [...]

  8. Raphael dit :

    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.

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site