Préparer sa CSS3 aux nouvelles versions des navigateurs

O u : « comment j'ai agrandi ma CSS ».

Un designer CSS qui louchait sur ma feuille de styles ce matin, m'a fait cette remarque : Pour bien faire et t'assurer de la comptabilité actuelle et future de ta feuille de styles, tu devrais, pour chacune des propriétés, faire une déclaration spécifique pour chaque navigateur.

Allons bon ! Dans l'absolu il n'a pas tort. Déjà qu'HTML5 est bien verbeux (ça me fait penser qu'après le ménage de printemps que j'ai fait à mon code, ce serait intéressant que je publie un billet là-dessus pour qu'on en discute), s'il faut multiplier les déclarations on va se retrouver avec des CSS ballonnées. • • •

Un exemple ? Celui du code utilisé dans mon billet sur le refonte de mon template HTML5/CSS3 pour l'affichage de l'article sur 2 colonnes : 

div.article {
/* SANS PREFIXE */ 
column-count: 2;
column-gap: 20px;
column-rule:1px dotted #bbb;
/* OPERA */
-o-column-count: 2;
-o-column-gap: 20px;
-o-column-rule:1px dotted #bbb;
/* IE*/
-ms-column-count: 2;
-ms-column-gap: 20px;
-ms-column-rule:1px dotted #bbb;
/* GECKO */
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-rule:1px dotted #bbb;
/* WEBKIT */
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule:1px dotted #bbb;
/* KDE */
-khtml-column-count: 2;
-khtml-column-gap: 20px;
-khtml-column-rule:1px dotted #bbb;
border-top:1px solid #999;border-bottom:1px solid #999;padding:8px;text-align:left}

Boum ! C'est que ça en fait des octets en plus ! Des octets qui vont faire des Ko si j'applique sa recommandation sur l'ensemble des propriétés CSS3 de ma feuille de styles. N'étant pas un spécialiste, Mesdames et Mesdemoiselles, Messieurs et Damoiseaux, je pose la question :

Faut-il répéter les règles pour chaque navigateur ?

Bien sûr si vous avez répondu qu'il y a d'autres solutions ce serait sympa de dire lesquelles pour nos camarades syndiqués.

[PS] Merci de rigoler sous cape si vous zieutez ma CSS

Commentaires :

jpvincent||#1
jpvincent
tu as oublié une réponse dans ton questionnaire qui est la mienne concernant les règles CSS3 :

non, je ne veux pas passer à CSS3

malgré le fait que je tienne un blog de veille techno web et que CSS3 autant que HTML5 m'excite, il n'existe que bien peu de fallback pour CSS3 sur les anciens browsers (il faut lorgner du coté des filters IE), sans compter sur les vieilles version de FF qui traînent encore.

Et en CSS3, ne serait ce que pour la plus aboutie des règles qui est border-radius, lorsque tu vas dans les détails, aucun navigateur ne l'a implémenté de la même manière : déjà qu'on se prenait la tête avec les designer pour éviter le pixel perfect, utiliser CSS3 en l'état actuel des choses ne va rien arranger :)
kilroysoft||#2
kilroysoft
Une solution temporaire qui aide à moduler la réponse : mettre en place un système de macros qui permette de transformer une commande en l'ensemble des implémentation, voire même d'ajouter les hacks. Mais bien sur si ça standardise le code en output, ça ne résout pas le problème de verbosité. Mais on peut utiliser les attributs de manière parcimonieuse en les généralisant au maximum au niveau des classes.
Philippe||#3
Philippe
Hello les gars,

@JP :

Argh ! Trop tard pour changer le vote en cours (même si c'est possible) ! Car tu as raison :
ici c'est parce que je fais joujou mais en prod ça doit être une autre paire de manches. Pourquoi passer à CSS3 à tout prix ?

@ kilroysoft :

Ah oui ! Si je comprends bien ton idée ça me rappelle une rencontre avec un développeur chez un client (il y a 1 ou 2 ans) qui m'avait tiré par la manche pour me montrer comment il utilisait PHP pour scripter ses CSS. Ça lui permettait de définir des variables dans ses fichiers CSS et d'utiliser les conditions (if / else).

C'était balaise... tellement balaise que je me suis dit que c'était pas pour moi. :-D
Philippe||#5
Philippe
Hello Raphaël
Non : je le découvre grâce à toi. Article effectivement très pertinent et, entre parenthèses, des commentaires très intéressants, parmi lesquels celui-ci, où son auteur mentionne l'existence d'un compilateur CSS en Ruby (un spécialiste en parle aussi ici (en français) : créer des CSS dynamiques avec LESS : un compilateur de CSS en Ruby).

J'y lis aussi les effets de bords indésirables et le bordel que génèrent de telles pratiques. Mais un autre commentateur soulève un point intéressant
sur l'application de ces préfixes en ouvrant le débat :
You're looking at the issue from the wrong side. The vendor prefix allows vendors to put special stuff in their engine in a way that doesn't conflict with future standards or other vendors. Stuff that could be totally proprietary and not aimed at becoming an open standard at all, but still completely shares the codebase of a standards compliant engine. The fact that there are some major open source engines that publish their vendor specific additions and then web developers instantly adopt them makes it all seem a bit pointless, but a standard like CSS has to cater for more than just the average webkit and mozilla on desktop and mobile.
La suite de la discussion vaut son pesant de cacahouettes. Du genre :
I have a question about my old nineties warning : "This site is optimised for Netscape Navigator".
Should I replace "Netscape" by "Firefox" (or anything else)?
:-D
Marketing Twitter||#7
Marketing Twitter
Hello,

petit retour de commentaire depuis Tweet industry.

Merci pour cet article, pour ma part tout comme @jpvincen je ne suis pas près non plus pour le CSS3 :)

Et comme j'ai droit à un tiquet pour 2 liens, j'en profite ;)

Voici mon blog développement personnel

À+ et vive le dofollow !
Djolhan||#8
Djolhan
Pour ma part, je suis comme jpvincent, je ne me risquerait pas dans l'html5/CSS3 à ce stade la. Déjà qu'on a encore du IE6 qui traine, alors bon, de la à pouvoir passer sur du html5 sans bidouiller dans tous les sens pour tel ou tel navigateur, on a le temps.
boby||#9
boby
Une autre solution: prefixfree.min.js

un javascript qui s’occupe de tout préfixer pour nous sans avoir à se prendre la tête.

Les commentaires pour ce billet sont fermés