Dégradés CSS3 non préfixés dans IE10

IE10 dans la version Windows 8 Release Preview prend en charge la recommandation du W3C concernant les dégradés CSS dans leur forme non préfixée. IE10 prend également en charge l'ancienne syntaxe des dégradés CSS de l'ébauche de travail du W3C du 17 février 2011 derrière le préfixe du fournisseur -ms-. Ce billet décrit les différences entre les anciens et nouveaux comportements et syntaxes et explique les évolutions.

Modifications importantes

Si vous décidez de simplifier votre CSS en passant des dégradés CSS3 préfixés aux dégradés CSS3 non préfixés, vous devez connaître certaines modifications importantes apportées à la syntaxe. De nombreux générateurs de dégradés ont fourni un balisage sur tous les navigateurs, y compris un balisage pour les dégradés non préfixés. Dans de nombreux cas, le balisage non préfixé n'est plus valide selon la recommandation du W3C concernant les valeurs des images CSS qui concerne les dégradés. Voici les modifications que vous devez connaître.

Dégradés linéaires et dégradés linéaires répétitifs

	Ébauche de travail	Recommandation
Mots clés de direction	Les mots clés top, bottom, left et right décrivent la direction des lignes du dégradé en utilisant leur point de départ.	La préposition « to » précède les mots clés. Les mots clés top, bottom, left et right décrivent la direction des lignes du dégradé en utilisant leur point d'arrêt.
Exemple	-ms-linear-gradient(top, orange, black);	linear-gradient(to bottom, orange, black);
Calcul d'angle	Les mots clés d'angle indiquent une ligne de dégradé tracée depuis cet angle vers l'angle opposé.	Les mots clés d'angle sont précédés de « to » et indiquent une ligne de dégradé commençant à partir du quadrant spécifié et se terminant dans le quadrant opposé. Le centre de la ligne de dégradé coupe une ligne tracée entre les deux angles restants.
Exemple	-ms-linear-gradient(top left, fuchsia, yellow);	linear-gradient(to bottom right, fuchsia, yellow);
Direction d'angle	0deg est une ligne de dégradé pointant vers la droite. Les angles croissent dans le sens anti-horaire.	0deg est une ligne de dégradé pointant vers le haut. Les angles croissent dans le sens horaire. Les anciens angles peuvent être convertis en nouveaux à l'aide de la formule new = abs(old−450) mod 360
Exemple	-ms-linear-gradient(200deg, lime, magenta);	linear-gradient(250deg, lime, magenta);

Dégradés radiaux et dégradés radiaux répétitifs

	Ébauche de travail	Recommandation
Position	Les mots clés de position, ou longueurs, décrivent l'emplacement du centre du dégradé.	Les mots clés de position, ou longueurs, sont précédés de la préposition « at » pour décrire l'emplacement du centre du dégradé. La position est maintenant spécifiée après la forme et la taille du dégradé, si elles sont présentes.
Exemple	-ms-radial-gradient(center, aqua, black);	radial-gradient(at center, aqua, black);
Mots clés de taille	La taille du dégradé est définie par un des six mots clés : farthest-corner, farthest-side, closest-corner, closest-side, contain et cover.	La taille du dégradé est définie par un des quatre mots clés : farthest-corner, farthest-side, closest-corner et closest-side. contain et cover ne sont plus valides et correspondent respectivement à closest-side et à farthest-corner.
Exemple	-ms-radial-gradient(circle cover, lime, black);	radial-gradient(circle farthest-corner, lime, black);
Syntaxe de taille et de forme	Pour les dégradés radiaux spécifiés avec des longueurs, les longueurs des rayons horizontaux et verticaux doivent toutes les deux être indiquées.	Les dégradés radiaux peuvent être spécifiés avec une seule longueur de rayon pour les cercles.
Exemple	-ms-radial-gradient(center, 50px 50px, red, black);	radial-gradient(circle 50px at center, red, black);

Contexte

Les dégradés CSS3 sont définis dans la recommandation du W3C du module de niveau 3 relative aux valeurs d'images et au contenu remplacé CSS. Les dégradés ont d'abord été ajoutés à la spécification en 2009. Ils étaient fondés sur les dégradés introduits dans le WebKit, mais leur syntaxe était améliorée. À cette époque, le WebKit disposait d'une implémentation pour -webkit-gradient(). Le groupe de travail CSS a réitéré la fonctionnalité en modifiant sa syntaxe. Les dégradés radiaux et linéaires ont été spécifiés avec des valeurs de propriétés distinctes : linear-gradient() et radial-gradient(). Quelques années plus tard, tous les navigateurs les plus importants (Chrome, Firefox, premier aperçu de la plateforme IE10 et Opera) ont pris en charge la version des dégradés CSS décrite dans l'ébauche de travail du W3C du 17 février 2011.

Après un examen minutieux de l'ébauche de travail, plusieurs changements ont été suggérés et à la suite de nombreuses discussions, la spécification a été modifiée pour prendre en compte ces modifications. Les principales modifications, répertoriées dans le tableau ci-dessus, ont amélioré l'ancienne spécification en renforçant la clarté et la cohérence. Par exemple, dans l'ancien système de coordonnées des angles, les angles positifs augmentaient dans le sens anti-horaire. Cela va à l'opposé des transformations CSS et des transformations SVG, où les rotations des angles positifs se produisent dans le sens horaire. Dans la spécification actualisée, les angles qui décrivent des dégradés CSS sont maintenant cohérents avec les autres angles CSS et augmentent dans le sens horaire.

Dans le processus de modification de la syntaxe des dégradés, la compatibilité était une préoccupation partagée, même si la spécification était dans une phase d'ébauche de travail. Tous les cas ne sont pas compatibles, mais une grande partie du contenu existant continuera de fonctionner. Les valeurs par défaut restent les mêmes, de sorte que leur rendu ne changera pas. Pour la direction des lignes de dégradé, la préposition « to » requise apporte de la clarté et modifie la grammaire valide. Le contenu existant avec des dégradés non préfixés utilisant l'ancienne syntaxe ne sera pas valide, ce qui le ramènera à la version préfixée.

Mettez à jour vos dégradés non préfixés

Maintenant que les dégradés CSS3 sont stables, nous vous encourageons à mettre à jour le balisage de vos dégradés pour utiliser la syntaxe appropriée des dégradés non préfixés de la recommandation. Le guide pour les développeurs d'Internet Explorer 10 inclut une documentation complète sur la syntaxe non préfixée. Vous pouvez également supprimer des instances des dégradés préfixés -ms-, car IE10 prend en charge la version non préfixée. Si vous utilisez des mots clés d'angle ou des angles pour décrire la direction des dégradés, vous pouvez vérifier que vos dégradés s'affichent toujours comme vous le souhaitez.

Bien que les dégradés préfixés par les fournisseurs continuent de fonctionner dans IE10 et dans d'autres navigateurs, l'ajout de la prise en charge appropriée des dégradés non préfixés est une sécurité pour l'avenir de votre contenu.

—Jennifer Yu, chef de projet, Internet Explorer