CSS Gradients dans Webkit et Gecko
Je me suis pas mal amusé ces derniers temps avec les nouvelles possibilité des CSS (angles arrondis, ombres de boîtes et de texte, dégradés de couleur) pour voir ce qu'il était possible de faire avec ces nouveaux outils. L'intérêt de ces règles CSS c'est qu'elles permettent très souvent d'améliorer facilement un site web existant à peu de frais sans pour autant casser le site pour des navigateurs plus anciens (et par anciens navigateurs, j'inclus Firefox 3, Opera 10, Safari 3, les versions de Chrome vieilles de plus de 6 mois... ;) )
Ces règles sont parmi les règles CSS les plus intéressantes car le dégradé est un effet courant sur le web et les faire par css permettra de remplacer de coûteuses requêtes http pour des images. Sur la page des labs du projet Kompozer, j'ai combiné plusieurs de ces effets pour voir ce qu'on pourrait faire, notez par exemple le titre KompoZer Labs qui ne contient aucune image mais est une combinaison de dégradé, arrondis et d'ombrages sur une balise <h1>.
Pour ceux qui n'auraient pas un navigateur très récent, voici une capture d'écran montrant cette page dans les dernières versions de Firefox Trunk et Chromium sous Linux :
On peut noter que Chromium bien que supportant les dégradés CSS depuis plus longtemps que Mozilla a des bugs de rendus assez importants avec un très fort effet d'escalier dans le dégradé d'arrière-plan et beaucoup de mal avec les dégradés progressifs sur le h1, ça donne vraiment l'impression que le dégradé est calculé sur 256 couleurs seulement. Ça m'a un peu surpris car il me semblait que Webkit malgré un support imparfait des dégradés ferait mieux que gecko puisqu'ils avaient implémenté le draft CSS bien avant nous (ce qui explique leur syntaxe CSS assez compliquée pour le moment, elle a été simplifiée depuis et c'est ce que nous utilisons). En plus Paul me disait qu'il était sûr que sous Windows il n'y avait pas d'effet d'escalier sous Webkit, j'ai donc lancé Virtualbox pour vérifier et voici la capture d'écran avec Safari 4, Chrome 3 et Firefox 3.6b5 :
Là on peut voir en fait que Webkit sait bien gérer les dégradés mais que c'est dans le fork Chrome de leur moteur de rendu qu'il y a un problème puisque Safari a un rendu correct. On notera aussi sur la capture de Chromium sous Ubuntu plus haut que le support des bords arrondis avec ombrage qui les suit devient enfin correct (il y a deux mois c'était pété de chez pété). Le rendu des polices avec ombrage diffère aussi entre Safari et Chrome, la version Safari est strictement identique à celle de Gecko alors que Chrome a un rendu trop léger à mon avis, on voit à peine les passages en gras.
À surveiller donc dans les mois à venir, ça pose la question du support correct des technologies dans les navigateurs, je me demande aussi comment se font les arbitrages dans le projet Webkit qui est maintenant bicéphale, le gros du développement du moteur de rendu étant assuré par Apple alors que Google a le gros des utilisateurs Webkit avec Chrome.
