Einsatz standardbasierter Webgrafiken in IE10

Benutzer erwarten, dass alle im Internet aufgerufenen Seiten in allen Browsern auf die gleiche Weise dargestellt werden. Das Engagement von Internet Explorer für das Ziel „Gleiches Markup, gleiches Ergebnis“ haben wir in einem Blog-Eintrag vom 16. März 2010 behandelt, in dem die erste IE9 Platform Preview angekündigt wurde. IE9 hat uns auf dem Weg zu diesem Ziel weit vorangebracht, und mit den HTML5-basierten Standards und Quirks-Modi von IE10 sind wir endgültig dort angelangt. Im Beitrag zum HTML5-Parsing in IE10 wurden einige der alten Funktionen genannt, die aus den HTML5-basierten Standards und Quirks-Modi von IE10 entfernt wurden.

In diesem Beitrag kommen zwei veraltete Funktionen hinzu, die entfernt wurden: Vector Markup Language (VML) und DirectX-basierte Filter und Übergänge. Beide Funktionen wurden in der MSDN-Dokumentation als „ab IE9 missbilligt“ indiziert (beispielsweise im ersten Satz unter Filters and Transitions: „This topic documents a feature of Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9“ [Diese Thema dokumentiert eine Funktion von Grafikfiltern und -übergängen, die ab Windows Internet Explorer 9 missbilligt wird.]) und aus den Standards und Quirks-Modi von IE10 entfernt.

Für die normale Verwendung von VML- und DX-Filtern stehen in IE10 und den aktuellen Versionen anderer Browser nun standardbasierte Alternativen zur Verfügung. Diese veralteten Funktionen stehen in den Dokumentmodi 5, 7, 8 und 9 von IE10 weiterhin zu Verfügung, obwohl deren Leistung den hardwarebeschleunigten, standardbasierten Alternativen weit unterlegen ist. Wir empfehlen Entwicklern, deren Websites auf standardbasierte Technologien umzustellen und nicht weiter auf veraltete Dokumentmodi zu vertrauen.

SVG statt VML

Microsoft und andere Parteien hatten dem W3C 1998 VML (Vector Markup Language) vorgeschlagen. Diese Technologie kam in IE5 erstmals zum Einsatz. Das W3C arbeitete VML gemeinsam mit einem Gegenvorschlag in SVG um. (Eine kurze Geschichte dieser Entwicklung finden Sie unter Vector Markup Language.)

SVG, erstmals eingesetzt bei IE9, bietet einen Ersatz für die Funktionen von VML auf Websites und in Anwendungen, in denen VML verwendet wird. Im VML to SVG Migration Guide, der im Microsoft Download Center zur Verfügung steht, erfahren Sie, wie der Wechsel von VML zu SVG erfolgt.

Die Raphaël JavaScript Library ist eine ressourcenschonende und benutzerfreundliche Grafik-API, die – wenn möglich – SVG verwendet und VML, wenn SVG nicht zur Verfügung steht. Raphaël ist eine gute Wahl für das Erstellen von Vektorgrafiken, die in IE8 und neueren Browsern verwendet werden können.

CSS3 statt DX-Filter

Mit Internet Explorer 4 wurde ein Satz von Grafikfiltern und -übergängen eingeführt, mit denen Entwickler Webseiten Multimedia-Effekte hinzufügen konnten. Der Name DX-Filter leitet sich von DirectX – der zugrunde liegenden Implementierung – und deren langen Syntax ab, z. B. „filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)“. DX-Filter sind keine Entsprechung der SVG-Filtereffekte, obwohl beide den CSS-Eigenschaftsnamen filter verwenden.

Die beliebtesten dieser Effekte, darunter Deckkraft, Farbverläufe und Schatten, wurde seither als „Working Drafts“ oder „Candidate Recommendations“ für CSS3 aufgenommen. Da IE10 diese CSS3-Spezifikationen unterstützt, müssen keine veralteten, IE-spezifischen Filter angewendet werden. Ein weiterer Filter, AlphaImageLoader, stellte eine beliebte Umgehung für Fehler bei der PNG-Transparenz in IE6 dar, jedoch wurden diese Fehler bereit in IE7 behoben.

Im Folgenden werden die beliebtesten DX-Filter und deren standardbasierten Alternativen aufgeführt.

DX-Filter	Standardbasierte Alternative
Alpha	opacity
AlphaImageLoader	<img> oder „background-image“ und zugehörige Eigenschaften
Gradient	background-image: linear-gradient()
DropShadow	„text-shadow“ oder „box-shadow“
Matrix	transform, transform-origin

SVG-Filtereffekte können in IE10 verwendet werden, um weniger häufig verwendete Filter im Zusammenhang mit SVG zu ersetzen.

Hinweis: Da der IE9-Dokumentmodus sowohl DX-Filter als auch einige standardbasierte Alternativen unterstützt, sollte es vermieden werden, beide Eigenschaften für dasselbe Element anzugeben. Bibliotheken wie Modernizr ermöglichen eine einfache Funktionserkennung mit CSS, durch die doppelte Deklarationen vermieden werden können.

Einheitliche Umsetzung von Markup jetzt!

Die im Vorherigen beschriebenen Änderungen werden ab der IE10 Platform Preview 4 umgesetzt, die für die Windows Developer Preview zur Verfügung steht.

IE10 setzt noch stärker als alle vorherigen Versionen auf die Verwendung des gleichen Markups und Codes, die auch von anderen beliebten Browsers interpretiert werden (sobald alle herstellerspezifischen CSS-Präfixe „-ms-“ enthalten). Im Gegenzug bedeutet dies, dass durch den Verzicht auf diese beiden veralteten Funktionen für IE10 entwickelte Inhalte auch in anderen Browsern funktionieren.

Wenn alle Browser dieselben standardbasierten Inhalte verwenden, profitieren die Benutzer.

–Ted Johnson, Lead Program Manager, Internet Explorer Graphics