Utilisation de graphiques Web normalisés dans IE10

Les utilisateurs souhaitent pouvoir accéder à n'importe quel site Internet avec n'importe quel navigateur et bénéficier d'une qualité d'affichage similaire. Nous avons déjà discuté de l'engagement d'Internet Explorer visant à atteindre l'objectif « mêmes balises, mêmes résultats » sur différents navigateurs dans un billet publié le 16 mars 2010, annonçant la sortie du premier aperçu de la plateforme IE9. IE9 nous a permis d'approcher très près de cet objectif et les normes HTML5 accompagnées des modes Quirks d'IE10 ont largement permis de l'atteindre. Le billet HTML5 Parsing in IE10 (Analyse HTML5 dans IE10) répertoriait certaines des anciennes fonctionnalités qui ont été supprimées des normes HTML5 et des modes Quirks d'IE10.

Ce billet étend la liste des anciennes fonctionnalités qui ont été supprimées en en ajoutant deux : VML (Vector Markup Language) et les filtres et transitions DirectX. Ces deux fonctionnalités étaient signalées comme déconseillées dans la documentation MSDN à partir d'IE9 (par exemple, la première phrase de Filters and Transitions (Filtres et transitions) : « Cette rubrique porte sur une fonctionnalité des filtres visuels et des transitions qui est déconseillée depuis Windows Internet Explorer 9 ») et sont maintenant retirées des normes et modes Quirks d'IE10.

Les utilisations communes de VML et des filtres DX bénéficient désormais d'alternatives normalisées implémentées dans IE10 et les versions actuelles d'autres navigateurs. Ces fonctionnalités héritées d'IE demeurent disponibles dans IE10 en mode de document 5, 7, 8 et 9, bien que leurs performances soient inférieures à celles de leurs remplacements normalisés dotés d'une accélération matérielle. Nous encourageons les développeurs Web à utiliser les technologies normalisées pour leurs sites au lieu de s'appuyer sur les modes de document hérités.

Utiliser SVG au lieu de VML

Microsoft et d'autres éditeurs ont proposé VML (Vector Markup Language) au Consortium W3C en 1998. IE5 l'a implémenté en premier. Le Consortium W3C a fusionné VML avec une proposition concurrente dont le résultat est SVG. (Consultez Vector Markup Language pour obtenir un bref historique.)

SVG, implémenté dans IE9, offre les fonctionnalités nécessaires pour remplacer VML dans les sites Web et les applications qui l'utilisent. Le VML to SVG Migration Guide (guide de la migration VML vers SVG), publié sur le centre de téléchargement Microsoft, explique comment passer de VML à SVG.

La bibliothèque Raphaël JavaScript Library est une API graphique simple d'utilisation qui fait appel à SVG lorsque celui-ci est disponible et à VML lorsqu'il ne l'est pas. La bibliothèque Raphaël est idéale pour créer des solutions graphiques vectorielles qui fonctionnent dans IE8 et les navigateurs récents.

Utiliser CSS3 au lieu des filtres DX

Internet Explorer 4 a introduit un ensemble de filtres visuels et de transitions permettant aux développeurs Web d'appliquer des effets de style multimédia à leurs pages Web. Le nom de filtres DX provient de leur implémentation sous-jacente, DirectX, et de leur longue syntaxe, par exemple « filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50). » Les filtres DX sont différents des effets du filtre SVG, même si les deux utilisent le nom de la propriété CSS filter.

Les plus utilisés de ces effets sont depuis devenus des « Working Drafts » (brouillons de travail) ou des « Candidate Recommendations » (recommandations possibles) CSS3, y compris l'opacité, le dégradé et l'ombrage. Comme IE10 prend en charge ces spécifications CSS3, les filtres hérités spécifiques à IE ne sont pas nécessaires. Un filtre supplémentaire, AlphaImageLoader, a été beaucoup utilisé pour contourner les bogues concernant la transparence PNG dans IE6, mais ces bogues ont été résolus dans IE7.

Le tableau suivant répertorie les filtres DX les plus utilisés et leurs alternatives normalisées.

Filtre DX	Alternative normalisée
Alpha	opacity
AlphaImageLoader	<img> ou background-image et propriétés associées
Gradient	background-image: linear-gradient()
DropShadow	text-shadow ou box-shadow
Matrix	transform, transform-origin

Les effets du filtre SVG dans IE10 peuvent permettre de simuler certains des filtres les moins répandus, les plus ésotériques dans le contexte du SVG.

Remarque : comme le mode de document IE9 prend en charge à la fois les filtres DX et certaines alternatives normalisées, il est sage d'éviter de spécifier les deux propriétés sur le même élément. Les bibliothèques, telles que Modernizr, permettent d'utiliser facilement la détection des fonctionnalités avec CSS et d'éviter les déclarations dupliquées.

Utiliser les mêmes balises

Les modifications décrites ci-dessus entrent en vigueur avec le quatrième aperçu de la plateforme IE10, disponible pour Windows Developer Preview.

Plus que n'importe quelle autre version antérieure d'IE, IE10 fonctionne avec les mêmes balises et codes que les autres navigateurs les plus utilisés (une fois les préfixes spécifiques aux fournisseurs CSS mis à jour pour inclure « -ms- »). À l'inverse, le retrait de ces deux fonctionnalités héritées signifie que le contenu développé pour IE10 doit également fonctionner dans d'autres navigateurs.

Les utilisateurs bénéficient du fait que tous les navigateurs peuvent fonctionner avec le même contenu normalisé.

—Ted Johnson, Chef de projet, Internet Explorer Graphics