Avec la sortie de Firefox 3.6, nous disposons maintenant de 2 moteurs de rendu HTML supportant la création de dégradés via CSS 3: Gecko et WebKit (donc dans Safari depuis la version 4.0 et Chrome depuis je sais pas quelle version).
CSS 3 permet de définir autre chose qu'une URI en tant que valeur de la propriété background-image, et pour créer un dégradé en CSS 3 il faut utiliser une syntaxe précise. Cette syntaxe est en cours de mise au point par le W3C via un Editor's Draft. D'ailleurs je comprend pas trop la différence ente un Editor's Draft et un Working Draft dans la terminologie du W3C si tant est qu'il y en ait une. Et ça n'est pas la seule chose que je ne comprend pas à propos du W3C. Bref, ce qu'il faut en retenir c'est que tout cela n'est pas ferme et définitif.
WebKit était largement en avance sur les autres (avril 2008) en ce qui concerne l'implémentation des dégradés CSS. Il semble que le groupe de travail CSS ait depuis accepté une autre proposition pour la syntaxe des dégradés. Du coup Firefox a décidé d'intégrer cette nouvelle syntaxe qui certes semble plus simple mais on se retrouve maintenant avec des syntaxes qui diffèrent. Et ça, c'est bien chiant ©. Enfin bon, on va pas trop râler puisqu'il s'agit encore pour le moment de vendor-specific extensions, donc à utiliser avec modération et en toute connaissance de cause. On va voir comment les choses évoluent et si les gens de WebKit vont accepter d'adopter la nouvelle façon de faire.
Pour aller droit au but, je vous conseille d'aller directement voir du côté de la documentation des User Agents concernés :
- Firefox Using gradients
- Safari Gradients et -webkit-gradient (CSS Property Functions)
On en parle aussi chez les blogueurs avec Making the Grade: A Primer on Linear Gradients et Multiple Backgrounds and CSS Gradients. Vous y trouverez des exemples et on vous rappellera qu'il est aussi possible d'utiliser un Gradient Filter pour notre ami IE. Une troisième syntaxe propriétaire qui existe depuis bien longtemps.
Pour conclure j'ai envie de dire que peu importe la syntaxe, je trouve tout ça peu intuitif et plutôt relou à écrire à la main dans le cas de dégradés complexes. Dans le cas de dégradés linéaires simples, et une fois qu'on a compris le rôle et le fonctionnement d'un type, d'un point (origin point, et ending point pour Safari) et d'un stop ça va. Maintenant pour créer des choses plus complexes ou des radiaux, je pense que l'utilisation d'outils comme ceux de westciv prend tout son sens.
Joint