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.

Thomas

Ce que je trouve le + cool quand même c'est la "dégradation silencieuse" ou le fait que ça n'enlève pas d'informations aux navigateurs ne supportant pas ces propriétés.

Si je peux me permettre, j'ai aussi fait quelques tests cette semaine dont : http://tb4.fr/labs/css3/blockquote....

J'utilise les ombres, border-radius et les dégradés. Pour Opera 10.50 la seule solution pour faire des dégradés reste un fichier SVG (utilisé ici). Ce n'est pas si lourd (en investissement) à utiliser tant que le dégradé reste simple.

À propos de la syntaxe pour les dégradés, je me suis aperçu que celle pour border-radius est aussi différente entre Webikt et Gecko mais cette fois-ci l'avantage (respect du nommage) va à Webkit : http://www.the-art-of-web.com/css/b...

A+

Thomas samedi 2 janvier 2010 - 19:04
Benoit

J'avais justement commencé à traduire la documentation sur les dégradés la semaine dernière avant d'attraper la crève.

Pour ceux qui veulent essayer chez eux c'est assez facile :
https://developer.mozilla.org/fr/Ut...

Benoit dimanche 3 janvier 2010 - 14:53
antistress

Très interessant billet, conclusion comprise

antistress

J'ai une question sur l'état de l'implémentation de CSS3 dans les versions en développement de Firefox.

Par exemple j'ai été surpris de constater cela http://jojaba.free.fr/?/Web-utilisa...
Comparer ici http://jojaba.free.fr/html5/ Chrome 3 avec Firefox 3.5.5 ou Firefox 3.7a1pre sur Ubuntu (version téléchargée hier du trunk)
D'ailleurs sur ce site http://www.sitepoint.com/examples/c... les cadres "Left to Right" et "Top to Bottom" sont uniformes avec Firefox 3.5 comme avec Firefox 3.7a1pre sur Ubuntu.
Quid ?

Pascal Chevrel

@antistress, ta syntaxe pour les gradients en fausse, tu essayes de calquer la syntaxe utilisée par webkit qui est basée sur une ancienne version du draft CSS3.

Pascal Chevrel mercredi 20 janvier 2010 - 20:14
antistress

Je vais transmettre à l'auteur de la page, merci !

Jojaba

Merci "antistress" pour m'avoir signalé ça...
J'ai compris qu'il fallait que je vois ça sur la traduction de Benoit - https://developer.mozilla.org/fr/Ut... . Je corrige dès que possible ;)

Jojaba jeudi 21 janvier 2010 - 11:32

Fil des commentaires de ce billet

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.