Développement CSS3 compatible multi-navigateurs avec Modernizr et eCSStender

Que des soucis c'est nouvelles règles CSS3. On s'extasie devant la possibilité d'intégrer quelques coins arrondis sur Firefox, Webkit et Opéra et dès qu'on exploite un peu le filon, on se rend compte que les techniques d'exploitation se multiplient.

On peut choisir de ne pas utiliser de règles CSS3, d'en exploiter certaines ou encore de se servir de toutes mais de ne pas prendre en compte l'ensemble de navigateurs. En effet, les propriétés ne sont pas encore tout à fait implémentées dans les navigateurs et chacun utilise ce qu'on nomme des préfixes pour les produire : -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;

Le problème fondamental reste garantir un code compatible dans le temps (1 an, 2 ans, 5 ans…). Comment écrire un code simple, court, lisible, facilement modifiable et compatible au court du temps avec les avancées probables des navigateurs ?

Modernizr

La première solution est d'utiliser Modernizr. Ce script teste la compatibilité du navigateur de l'utilisateur avec les règles CSS3 ou autres. En fonction des capacités du navigateur, le script ajoute un préfixe (no-) sur la classe appliquée dans le code CSS.

Ainsi, on déclare dans un sélecteur le code pour les navigateurs qui supportent une propriété, on déclare dans un autre sélecteur le code préfixe (avec le préfixe no-) pour les navigateurs qui ne supporte pas la propriété.

Sans appeler de feuilles particulières, Modernizr va modifier le code de la page en HTML pour que le style adapté aux capacités du navigateur s'affiche.

Enorme avantage de ne pas cibler un navigateur mais bien une propriété en particulier, avec son alternative.

Lire Taking Advantage of HTML5 and CSS3 with Modernizr.

eCSStender

Autre couche JavaScript sur l'interprétation des feuilles de style, eCSStender script qui permet de ne plus jongler les propriétés préfixées par moteur de rendu (-moz, -webkit, -o, -khtml…).

Souvent le travailleur du web imagine les utilisateurs comme lui, souvent exactement comme lui : un mac avec Safari et Firefox. Sauf que les moteurs de rendus ne sont pas au nombre de 2 mais sont plus diversifiées que ça.

Donc quand on déclare une propriété comme : -webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 5px;.

On est très content, c'est beau, sauf que quand on nous demande de l'appliquer à l'ensemble des navigateurs, ça peut devenir : border-radius: 10px 5px;-moz-border-radius: 10px 5px;-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 5px;-o-border-radius: 10px 5px;-khtml-border-top-left-radius: 10px;-khtml-border-top-right-radius: 5px;-khtml-border-bottom-right-radius: 10px;-khtml-border-bottom-left-radius: 5px;

Appliquer des petits coins arrondis demandent donc d'appliquer des hacks spécifiques à chaque navigateur. Cette façon de procéder allonge le code mais augmente, de même, le nombre d'erreurs possibles.

Script eCSStender vient à mon aide. On disait que quand j'écrivais une propriété du type : border-radius: 5px; ; toi tu t'arrangeais pour sortir au navigateur ce qu'il comprend ; le machin avec les préfixes.

Comme ça moi, j'écris du CSS3 de manière idéale, mon code est propre, court et en plus si jamais, un jour, un nouveau moteur sort avec son préfixe à lui, j'ai juste à mettre à jour mon fichier .js.

Lire Stop Forking with CSS3.

Conclusion

Certes Modernizr et eCSStender sont deux scripts JavaScript, leur utilisation augmente le poids de la page à télécharger. Cependant, leur utilisation permet, d'une part, d'écrire un code spécifique (dégradé) pour les navigateurs qui n'ont pas implémentés certaines propriétés et, d'autre part, de ne plus surcharger son code avec des spécificités particulières à chaque navigateur.