Was Entwickler über Internet Explorer 9 wissen sollten

Windows Internet Explorer 9 unterstützt die Webentwickler-Community darin, umfangreiche, interoperable und standardkonforme Webanwendungen zu erstellen, und bietet die für das Internet der Zukunft erforderlichen Tools und Funktionen. Die aktuellste Version von Internet Explorer demonstriert mit der Unterstützung von HTML5 und modernen Standards das Engagement für ein interoperables Internet. Sie ermöglicht es Entwicklern zudem, nur einen Markup-Code für alle Browser zu nutzen.

Internet Explorer 9 integriert mehr Ressourcen des Betriebssystems und nutzt die Leistung des gesamten Computers – und sorgt so dafür, dass den Webentwicklern die Vorteile der erheblichen Hardwareinnovationen aus dem Windows-Umfeld zur Verfügung stehen.

Schnell, übersichtlich, sicher und zuverlässig – auf diesen Grundsätzen basiert Internet Explorer 9. Der folgende Abschnitt beginnt mit einer kurzen Übersicht zur Umsetzung der Grundsätze in den für Entwickler wichtigen Funktionen. Danach erhalten Sie tiefergehende Informationen zu einigen Erweiterungen für Entwickler. Sehen Sie sich die entsprechenden Funktionen für Entwickler zusätzlich in Aktion an – auf der Internet Explorer Test Drive-Website (engl.).

Rundherum schnell

Durch von der GPU unterstütztes HTML5 ist Internet Explorer rundherum schnell und gibt Entwicklern die Möglichkeit, über Windows von der Leistungsfähigkeit des Computers zu profitieren. Leistungsverbesserungen auf Plattformebene, beispielsweise die neue JavaScript-Engine Chakra mit kompiliertem JavaScript und das neue Document Object Model (DOM), ermöglichen eine grafisch umfangreichere und ansprechende Umgebung.

Hardwarebeschleunigung für die Darstellung von Grafik und Text

Ein Beispiel für die Nutzung der Leistungsfähigkeit des gesamten Computers durch Internet Explorer 9 ist die Darstellung von Grafik und Text – sie wurde von der CPU auf die Grafikkarte (GPU - Graphics Processing Unit) ausgelagert und nutzt die Direct2D^®- und DirectWrite^®-Windows-APIs (Application Programming Interface). Hardwarebeschleunigung für Grafik und Text heißt, dass die Website die gleiche Leistung bietet wie lokal auf dem Windows-Computer installierte Anwendungen. Grafisch umfangreicher und reaktionsschneller, schärferer und klarerer Text und hochauflösende und flüssigere Videos – dies alles ermöglicht der Computer. Das Beste daran ist, dass sich die gesamten Änderungen intern im Browser ergeben können und die Entwickler diese Funktionen automatisch nutzen – und zwar mit den gleichen Standards, mit denen sie normalerweise arbeiten.

Lernen Sie Internet Explorer 9 und die verbesserte Grafikleistung auf der Internet Explorer Test Drive-Website (engl.) kennen. Klicken Sie auf eines der Beispiele unter „Graphics Demos.“

Neue und schnellere Layout- und Scripting-Engines

Die Layout- und Script-Leistung sind zwei für die Gesamtleistung des Browser sehr bedeutende Elemente. Mit dem neuen DOM, der optimierten Layout-Engine und der neuen JavaScript-Engine (Interpretation, Kompilierung und Ausführung von Code wird mit Mehrkernprozessoren parallel durchgeführt) werden Websites und Anwendungen erheblich schneller geladen.

Die Leistungsverbesserungen durch die neuen Layout- und Scripting-Engines in Internet Explorer 9 sind offensichtlich. Auf der Internet Explorer Test Drive-Website (engl.) finden Sie einige detaillierte Beispiele, die die volle Leistungsfähigkeit aufzeigen. Klicken Sie hierzu auf eines der Beispiele unter „Speed Demos.“

Verbesserte Entwicklertools

Mit Internet Explorer 8 wurden standardmäßig verfügbare Entwicklertools eingeführt – beispielsweise für das Prototyping, Testing und Debuggen von Webseiten. Die Entwickler konnten Quellcode-Änderungen im Browser testen, bevor sie diese im Back-End in die Seiten implementiert haben. Die Tools zur Bearbeitung und für das Debuggen von CSS und HTML, zum Testen und Debuggen von Scripts, zur Überprüfung der Script-Performance, zur Anzeige und Änderungen von DOM, zur Überprüfung angewandter Regeln und zur Nachverfolgung von Style-Werten sind für Entwickler für Internet Explorer unverzichtbar geworden. Internet Explorer 9 führt zusätzlich einige neue Funktionen ein – beispielsweise den verbesserten JavaScript-Profiler, ein Tool zum Wechseln des User-Agents und einige weitere Leistungsverbesserungen für die bestehenden Tools.

Mit den F12-Entwicklertools in Internet Explorer 9 können die Entwickler nun mehr Aspekte der Leistung einer Website erfassen als in den bisherigen Versionen. Sie können jedoch trotzdem nicht feststellen, wie die Leistung für den Benutzer aussehen wird. Um dieses Problem zu lösen, entwickeln einige Sites eigene Bibliotheken zur Messung der Leistung von Webseiten. Dies kann jedoch zu Mehraufwand führen und die Seiten für die Benutzer verlangsamen. Wir sind der Meinung, dass die W3C WebTiming-Spezifikation – die sich zum Zeitpunkt der Erstellung dieses Dokuments noch im Status „Working Draft“ befindet – eine gute konzeptionelle Basis zur Lösung dieses Problems darstellt. Die WebTiming-Funktionalität kann in Internet Explorer 9 über die window.msPerformance-Schnittstelle (engl.) im DOM angesprochen werden. In den Developer Tools kann außerdem über die JavaScript-Konsole das Objekt window.msPerformance genutzt werden.

Das Internet im Fokus

Mit der übersichtlicheren, aufgeräumteren und schnelleren Benutzeroberfläche lenkt Internet Explorer 9 den Blick des Benutzers auf die Websites anstatt auf den Browser.

Klare und direkte Browseroberfläche

In Internet Explorer 9 lenkt die vereinfachte und doch erweiterte Benutzeroberfläche und -umgebung den Blick des Benutzers dahin, wo er hin soll: auf die Inhalte der jeweiligen Website.

Neue native Grafikfunktionalitäten

Internet Explorer 9 ermöglicht durch die Hardwarebeschleunigung für Grafiken eine grafisch umfangreiche und tiefgreifende Umgebung. Die native Unterstützung des video-Tags von HTML5 sorgt für flüssige und hochauflösende (HD – High-Definition) Videos. Das canvas-Tag von HTML5 ermöglicht interaktive Grafiken. Die SVG-Unterstützung sorgt außerdem für schärfere Grafiken – und zwar auf jeder Vergrößerungsstufe.

Die Dekodierung der Grafiken wird durch die WIC (Windows Imaging Component) erledigt. Diese arbeitet schneller als der alte Internet Explorer Image Dekoder und sorgt für die Unterstützung eingebetteter Farbprofile. Die neue native Unterstützung von ICC (International Color Consortium) v2 und v3 Farbprofilen ermöglicht Echtfarben und macht Internet Explorer 9 zu einem Browser mit Farbverwaltung.

Die Darstellung von Text wird von den DirectWrite^®-APIs übernommen. Diese sorgen für glatte und scharfe Texte und Animationen in allen Schriftgrößen und Vergrößerungsstufen des Browsers. Beispiele zur Textdarstellung von Internet Explorer 9 finden Sie in der Text Size Animated-Demo (engl.) auf der Internet Explorer Test Drive-Website (engl.).

Weitere Beispiele zu den neuen nativen Grafikfunktionalitäten finden Sie unter „Graphics Demos“ auf der Internet Explorer Test Drive-Website (engl.).

Anheften von Sites

Durch die Nutzung des Anheftens von Websites durch die Entwickler stärken sie die Bindung der Benutzer an ihre Websites. Beim Anheften von Sites wird dem Benutzer eine an die Website angepasste Benutzeroberfläche mit einem größeren Symbol sowie Navigationselemente, die an die Gestaltung der Website angepasst sind, angezeigt. Die Integration mit Windows 7 eröffnet neue Möglichkeiten, die Websites zu nutzen. Mit den aktuellsten Windows-APIs können die Entwickler Sprunglisten und Vorschau-Steuerelemente für ihre Websites erstellen.

Interoperabel mit einem Markup-Code

Durch die aktive Teilnahme an der Entwicklung von Standards in den CSS3 und SVG Working Groups (Scalable Vector Graphics), den Beisitz in der HTML5 Working Group und die Führung der HTML5 Testing Task Force sorgen wir aktiv für die Entwicklung moderner Webstandards im Internet. Da wir mehr Testfälle erstellen und an das W3C (World Wide Web Consortium) übermitteln als jeder andere Browser-Hersteller, hat die Standardkonsistenz höchste Priorität. So ist sichergestellt, dass sich Browser und Anwendungen bei der Implementierung moderner Webstandards und deren Nutzung durch Entwickler konsistent verhalten.

Bessere Unterstützung von Standards ermöglichen „gleichen Markup-Code” für alle Browser

Webbrowser sollten ein und denselben Markup-Code – HTML, CSS und Scripte – gleich darstellen. Dies ist heute in vielen Browsern und mit vielen Elementen des Markup-Codes ganz einfach nicht der Fall. Windows^® Internet Explorer^® 9 nutzt die aktuellsten Webstandards. Diese werden sich nicht über Nacht ändern. Unsere Investitionen in Standards und in die Interoperabilität sorgen dafür, dass der gleiche Markup-Code in allen Browsern funktioniert. Wenn Entwickler weniger Zeit dafür aufwenden müssen, ihre Websites für die verschiedenen Browser umzuschreiben, dann haben sie mehr Zeit, fantastische Anwendungen zu erstellen.

Internet Explorer 9 führt die Unterstützung moderner Webstandards ein:

• CSS3
• DOM L2 und L3
• ECMAScript 5
• HTML5
• Scalable Vector Graphics (SVG)
• International Color Consortium (ICC) Farbprofile

In diesem Abschnitt erhalten Sie einen Überblick zu den Standards in Internet Explorer 9. Eine tiefgreifendere Besprechung finden Sie im Internet Explorer 9 Developer Guide (engl.) und im Internet Explorer Developer Center (engl.) im MSDN. Auf der Internet Explorer Test Drive-Website (engl.) können Sie die neuen Standards in Aktion sehen.

Internet Explorer 9 unterstützt mehr CSS als alle bisherigen Versionen des Microsoft-Browsers. Aufbauend auf der Arbeit an Internet Explorer 8, die zur vollständigen Unterstützung der CSS2.1-Spezifikationen führte, implementiert Internet Explorer 9 die Unterstützung vieler CSS3-Komponenten. Viele CSS3-Module befinden sich im Moment noch im Status Working Draft oder Last Call. Bis zum Erreichen des Status Candidate Recommendation können sich erhebliche Veränderungen ergeben. Weitere Informationen finden Sie in den aktuellsten CSS3-Draft-Modulen (engl.). Im Rest dieses Abschnitts finden Sie Beschreibungen einiger der wichtigeren CSS-Neuerungen. Detaillierte Informationen zu allen neuen CSS-Funktionen finden Sie im Internet Explorer 9 Developer Guide (engl.) und im Internet Explorer Developer Center (engl.) des MSDN.

CSS3 Backgrounds & Borders-Modul

Internet Explorer 9 unterstützt eines der am meisten geforderten CSS-Border-Funktionen: die Eigenschaft border-radius (engl.). Um abgerundete Ecken für Layout-Boxen zu erstellen, waren bisher komplizierte Techniken erforderlich. Mit den border-radius-Eigenschaften werden die Ecken durch eine Viertel-Ellipse mit einem festgelegten Radius ersetzt. In Aktion sehen Sie das Funktionen auf der Internet Explorer Test Drive-Website (engl.).

Ein weiteres wichtiges Element aus diesem Modul ist die Unterstützung der Eigenschaften background-clip (engl.), background-origin (engl.), background-size (engl.) und box-shadow (engl.).

Weitere Informationen finden Sie in der Color and Background-Referenz (engl.) im MSDN.

CSS3 Color-Modul

Internet Explorer 9 unterstützt verschiedene, durch das CSS3 Color-Modul definierte Farbmodelle – inklusive der neuen Alpha-Modelle (Transparenz). Des Weiteren unterstützt Internet Explorer 9 die opacity-Eigenschaft des CSS3 Color-Moduls, mit dem die Entwickler die Transparenz auf Elementebene festlegen können. Ein Beispiel finden Sie auf der Internet Explorer Test Drive-Website (engl.).

Internet Explorer 9 bietet außerdem eine erweiterte Unterstützung für die transparency-Eigenschaft (engl.). Weitere Informationen finden Sie in der Color and Background-Referenz (engl.) im MSDN.

CSS3 Fonts-Modul

Jede neue CSS-Version sorgte regelmäßig für bessere typografische Kontrollen. Das CSS3 Fonts-Modul weitet die Möglichkeiten von CSS2.1 aus und definiert das Verhalten bestimmter Funktionen neu. Internet Explorer 9 erweitert die bestehende Unterstützung für CSS und ist vollständig mit dem CSS3 Fonts-Modul konform – inklusive der interoperablen Implementierungen für die @font-face-Regel (engl.), für das font-weight-Mapping (engl.) und das font-size-Mapping (engl.) und die font-stretch-Eigenschaft (engl.).

Internet Explorer 9 unterstützt außerdem das Web Open Font Format (WOFF) für das Repackaging Spline Font-basierter (sfnt) Font-Dateien (TrueType, OpenType und Open Font Format) durch das Komprimieren jeder einzelnen Tabelle mithilfe des ZIP-Komprimierungsformats. Raw-Fonts (Fonts, bei denen das Embedded-Permission-Bit nicht gesetzt ist) werden nicht unterstützt.

Beispiele finden Sie auf der Internet Explorer Test Drive-Website (engl.). Weitere Informationen finden Sie in der Font and Text-Referenz (engl.) im MSDN.

CSS3 Media Queries-Modul

Das CSS3 Media Queries-Modul definiert Methoden, mit denen Entwickler Bereiche eines Style-Sheets für bestimmte Gerätefunktionalitäten festlegen können. Ein Entwickler möchte beispielsweise die Seiten für die Benutzer mit mobilen Geräten (kleinerer Bildschirm, eingeschränkte Farbpalette, geringe Auflösung usw.) anders gestalten als die Seiten für kompakte Notebooks (kleiner Bildschirm, vollständige Farbpalette, hohe Auflösung usw.) und die Seiten für ganz normale Computer (großer Bildschirm, vollständige Farbpalette, hohe Auflösung usw.). Zu den von CSS3-Media-Queries unterstützten Media-Eigenschaften gehören unter anderem width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome und resolution.

Internet Explorer 9 führt die Unterstützung für Media-Queries in CSS, HTML, XML und XHTML ein. Entwickler können ihre Designs so besser an die Anforderungen und Geräte der Benutzer anpassen. Beispiele zu Media-Queries in Aktion finden Sie Internet Explorer Test Drive-Website (engl.). Weitere Informationen finden Sie in der @media-Referenz (engl.) im MSDN.

CSS3 Namespaces-Modul

Internet Explorer 9 führt die Unterstützung von XML-Namespaces in CSS-Selektoren ein. Selektoren ermöglichen es Entwicklern, Style-Regeln auf ein oder mehrere Elemente eines Dokumentes anzuwenden. Über @namespace (engl.) deklarierte Namespaces (entweder für den Default-Namespace oder einen angepassten Namespace) erweitern die Funktionalität der Selektoren für XML-Dokumente (inklusive in XHTML eingebettetes SVG). Weitere Informationen finden Sie in der CSS Namespaces-Referenz (engl.) im MSDN.

CSS3 Selectors-Modul

Das CSS3 Selectors-Modul spezifiziert verschiedene zusätzliche Elemente zum CSS-Selector-Syntax. Diese werden von Internet Explorer 9 vollständig unterstützt. Die neuen Selektoren in Internet Explorer 9 ermöglichen es Entwicklern, Style-Regeln genauer auf Elemente eines Dokumentes anzuwenden. Sie umfassen strukturelle Pseudoklassen, die Pseudoklasse :target (engl.), Pseudoklassen für den Zustand von UI-Elementen, die Negation-Pseudoklasse und die UI Pseudoelement. Ein Beispiel zu den CSS3-Selektoren in Aktion finden Sie auf der Internet Explorer Test Drive-Website (engl.). Weitere Informationen finden Sie in der CSS Selector-Referenz (engl.) im MSDN.

DOM L2 und L3

Internet Explorer 9 unterstützt mehr Elemente des Document Object Model Level 2 (DOM L2) und Level 3 (DOM L3) und verbessert die Unterstützung der bestehenden Implementierungen in Internet Explorer.

In diesem Abschnitt finden Sie die DOM-Spezifikationen, die entweder vollständig oder teilweise in Internet Explorer 9 unterstützt werden. Detaillierte Informationen zu allen neuen DOM-Funktionen finden Sie im Internet Explorer 9 Developer Guide (engl.) und im Internet Explorer Developer Center (engl.) des MSDN.

DOM Core (L2 und L3) und Views (L2)

Internet Explorer 9 unterstützt viele neue DOM L2 Core-APIs (engl.). Des Weiteren werden interoperable DOM-Namespaces, beispielsweise die *NS-Methoden, und Namespace-bezogene Eigenschaften unterstützt. Internet Explorer 9 unterstützt außerdem viele der am häufigsten genutzten DOM L3 Core-Methoden (engl.) und -Eigenschaften und beide DOM L2 Views-Eigenschaften (engl.) komplett. Weitere Informationen finden Sie in der DOM Core and Views-Referenz (engl.) im MSDN.

DOM Element Traversal

Die Element Traversal-Spezifikation (engl.) definiert die ElementTraversal-Schnittstelle. Diese Schnittstelle ermöglicht die Navigation im DOM-Baum (beispielsweise Elementknoten in HTML, XML oder SVG-Dokumenten) über Skripte. Internet Explorer 9 führt die Unterstützung der ElementTraversal-Schnittstelle und ihrer fünf Eigenschaften ein.

DOM L2 und L3 Events

Die DOM Events-Spezifikationen (Level 2 und Level 3 – beide engl.) beschreiben das DOM-Event-System zur Registrierung von Event-Handlern.

Primäres Ziel für das Event-System in Internet Explorer 9 ist die Ausrichtung an dem durch die W3C spezifizierten interoperablen Modell. Entwickler können so vom proprietären attachEvent-Modell (engl.) von Internet Explorer wechseln und brauchen keinen Code für verschiedene Browser schreiben. Weitere Informationen finden Sie in der DOM Events-Referenz (engl.) im MSDN.

DOM L2 HTML

Internet Explorer 9 unterstützt die DOM L2 HTML-APIs (engl.), die in den vorherigen Versionen von Internet Explorer noch nicht verfügbar waren – inklusive HTML5-APIs wie getElementsByClassName (engl.) und characterSet (engl.). Internet Explorer 9 hat das Objektmodell in Tabellen verbessert (besonders in Bezug auf DOM-Operationen zum Hinzufügen und Entfernen von Elementen).

DOM L2 Style

Die DOM L2 Style-Spezifikationen definieren APIs für den programmgesteuerten Zugriff und das Ändern der Styles einzelner Elemente und ganzes Style-Sheets durch das Hinzufügen oder Verändern von Regeln. In den vorherigen Versionen von Internet Explorer war es möglich, diese Aufgaben über proprietäre Methoden durchzuführen. Internet Explorer 9 unterstützt nun die standardisierten APIs der DOM L2 Style-Spezifikationen. Darüber hinaus werden standardisierte APIs unterstützt, für die es keine Entsprechungen in Internet Explorer gab (zum Beispiel getComputedStyle – engl.). Ein Beispiel zur getComputedStyle-Methode in Aktion finden Sie auf der Internet Explorer Test Drive-Website (engl.). Weitere Informationen finden Sie in der DOM Style-Referenz (engl.) im MSDN.

DOM L2 Traversal and Range

Der DOM Range-Teil (engl.) der DOM L2 Traversal and Range-Spezifikation (engl.) definiert eine allgemeine Möglichkeit, Dokumentinhalte über zwei Bereichsangaben auszuwählen. Diese beiden Bereichsangaben werden durch einen Container (das übergeordnete Element, in dem sich der Punkt befindet) und einen Offset (der Ort im Container, an dem der Endpunkt liegt) definiert. Gemeinsam mit der HTML5-Selection-Schnittstelle (engl.) ermöglicht DOM-Range Funktionalitäten wie das programmgesteuerte Abrufen eines Bereiches, die Auswahl untergeordneter Elemente und das Löschen einer Auswahl. Die Selection-API wurde bereits weiter oben in diesem Dokument besprochen.

Internet Explorer 9 unterstützt alle DOM L2 Range-APIs sowie alle HTML5-Selection-APIs – beispielsweise die schon heute häufig genutzte Methode setSelectionRange (engl.). Weitere Informationen finden Sie in der DOM Range-Referenz (engl.) im MSDN.

Der DOM-Traversal-Teil (engl.) der DOM L2 Traversal and Range-Spezifikation (engl.) definiert eine programmgesteuerte Möglichkeit, Informationen aus dem aktuellen Dokument abzurufen. Internet Explorer 9 unterstützt beide DOM-Zugriffsmöglichkeiten (NodeIterator und TreeWalker, beide engl.) und beide Möglichkeiten zur Filterung von Knoten (whatToShow und NodeFilter, beide engl.) aus der W3C-Spezifikation. Weitere Informationen finden Sie in der DOM Traversal-Referenz (engl.) im MSDN.

Handhabung von Whitespace-Zeichen

Der Umgang mit Whitespace-Zeichen im DOM war in Internet Explorer bislang anders als in anderen Browsern. Diese fehlende Interoperabilität war für die Entwickler sehr frustrierend. In den bisherigen Versionen von Internet Explorer wurden Whitespace-Zeichen verborgen. Sie wurden im DOM nicht in Textknoten dargestellt. In Internet Explorer 9 bleiben Whitespace-Zeichen erhalten und werden, wie erwartet, in Textknoten im DOM platziert. Dies Verhalten entspricht dem anderer Browser.

ECMAScript 5

Internet Explorer 9 führt Erweiterungen für JavaScript ein und verbessert die Leistung von JavaScript. Im Dezember 2009 gab ECMA die fünfte ECMA-262-Edition (engl.) heraus. Im selben Jahr führte Microsoft mit der Unterstützung von JSON in Internet Explorer 8 (engl.) ECMAScript 5-Elemente (ES 5) ein. ES 5 standardisiert darüber hinaus viele wichtige Erweiterungen für JavaScript.

Zu den vielen wichtigen, von Internet Explorer 9 implementierten ECMAScript 5-Funktionen gehören:

• Neue Methoden für Arrays
• Ein erweitertes Objektmodell
• Methoden und Funktionen für Rechenoperationen

Internet Explorer 9 behebt außerdem verschiedene Probleme aus vorherigen JavaScript-Implementierungen. Weitere Informationen finden Sie im Internet Explorer Team-Blog (engl.).

HTML5

In Internet Explorer 9 wurden einige Funktionen aus der HTML5 Working Draft-Specification (engl.) eingeführt. Diese waren unter anderem:

• DOM Storage (engl.) – als Teil der HTML5-Web Storage-Spezifikation (engl.) definiert.
• Ajax Navigation (engl.) – über die Eigenschaft window.location.hash (engl.) und das Ereignis onhashchange (engl.) implementiert (beide im Abschnitt History Traversal (engl.) der HTML5-Spezifikation definiert).
• Cross-Document-Messaging – über die Methode postMessage (engl.) und das Ereignis onmessage (engl.) definiert (beide als Teil des HTML5-Web Messaging-Modul (engl.) spezifiziert.

Internet Explorer 9 baut auf diesen in Internet Explorer 8 implementierten HTML5-Funktionen auf und fügt die folgenden neuen Funktionen hinzu:

• HTML5-Elemente video und audio
• HTML5-Element canvas
• HTML5 Selection-APIs
• Verbesserungen beim HTML-Parsen
• Verschiedene neue DOM-APIs (wurde bereits weiter oben besprochen)
• Scalable Vector Graphics (SVG) (wird in einem gesonderten Abschnitt weiter unten besprochen)

Anmerkung: Sie sollten bedenken, dass sich die HTML5-Spezifiktion noch immer im Status Working Draft befindet. Bis zum Erreichen des Status Candidate Recommendation können sich erhebliche Veränderungen ergeben. Weitere Informationen finden Sie im aktuellsten HTML5 Working Draft (engl.).

HTML5-Elemente video und audio

Zwei der am sehnlichsten erwarteten HTML5-Funktionen werden nun in Internet Explorer 9 unterstützt: die Elemente video (engl.) und audio (engl.). Diese beiden Elemente werden im Abschnitt Embedded Content (engl.) der HTML5-Spezifikationen definiert und dort ohne ein bestimmtes Videoformat beschrieben. Internet Explorer 9 unterstützt das Abspielen von H.264-Videos über das HTML5-Tag video sowie das Abspielen von VP8-Videos, wenn der Benutzer einen VP8-Codec unter Windows installiert hat.

Die Elemente video und audio betten Video- und Audioinhalte in HTML-Seiten ein – ohne dass ein Plug-in erforderlich ist. Entwickler können für die beiden Elemente verschiedene Attribute angeben. Ein entsprechender Markup-Code könnte beispielsweise so aussehen:

<video width="400" height="300" src="video.avi" poster="frame.png" autoplay controls loop>

Dieser Text wird angezeigt, wenn das Video-Tag oder der Codec nicht unterstützt wird.

</video>

In Internet Explorer 9 wird mit diesem Markup-Code ein Bereich von 400 x 300 Pixeln (Attribute width und height) angezeigt. Während das Video geladen wird, ist das Bild "frame.png" zu sehen (Attribut poster). Die Videodatei "video.avi" (Attribut src) wird beim Laden der Seite automatisch abgespielt (Attribut autoplay), und es werden Steuerelemente für das Video angezeigt (Attribut controls). Wenn das Video sein Ende erreicht, wird es wiederholt (Attribut loop). Wenn das Videoformat nicht unterstützt wird, dann wird der Text innerhalb des video-Elements („Dieser Text wird …“) statt des Videos angezeigt. Das video- Element unterstützt außerdem das Element preload. Dieses Element teilt dem Browser mit, wie sich der Entwickler die bestmögliche Anzeige vorstellt. Ein Beispiel zum video- Element in Aktion finden Sie auf der Internet Explorer Test Drive-Website (engl.).

Internet Explorer 9 unterstützt außerdem video- Elemente mit mehreren Quellen. Die Quellen werden jeweils durch das Unterelement source angegeben. Dies kann besonders bei der Entwicklung für mehrere Browser oder Dateiformate hilfreich sein. Das audio-Element ist genau wie das video-Element definiert. Die Attribute width, height und poster fehlen jedoch. Ein Beispiel zum audio- Element in Aktion finden Sie auf der Internet Explorer Test Drive-Website (engl.).

Internet Explorer 9 unterstützt die folgenden Formate:

Weitere Informationen finden Sie auf der Seite HTML5-Video und -Audio (engl.) im MSDN.

HTML5-Element canvas

Eine weitere lang erwartete HTML5-Funktion ist das neue canvas-Element (engl.). Es wird zusammen mit der Canvas 2D-API genutzt. Das canvas-Element wird in der HTML5-Spezifizikation (engl.) definiert und ermöglicht die Darstellung von Grafiken über auflösungsabhängige Bitmap-Canvas. Zur Darstellung im Canvas werden „Kontexte“ genutzt – beispielsweise der Canvas 2D-Kontext aus der W3C Canvas 2D API-Spezifikation (engl.). Internet Explorer 9 führt die canvas-Elemente mit der 2D Canvas-API als einzigen unterstützten Kontext ein. Wie für alle Grafiken in Internet Explorer 9 wird auch für das canvas-Element die Hardwarebeschleunigung über Windows und die GPU genutzt.

Canvas-Elemente bieten eine Möglichkeit, Grafiken im Internet zu programmieren. Das canvas-Tag stellt eine sofort umgesetzte, zweidimensionale Zeichenoberfläche dar, mit der Entwickler Dinge wie Echtzeit-Kurven, Animationen oder interaktive Spiele realisieren können – und zwar ohne dass ein separates Plug-in heruntergeladen werden muss. Über die in der HTML Canvas 2D Context-Spezifikation (engl.) definierten APIs ermöglichen Canvas-Elemente unter anderem die folgenden Szenarien: 

• Rechtecke (engl.)
• Linien (engl.)
• Füllen (engl.)
• Kurven (engl.)
• Schatten (engl.)
• Bézier-Kurven (engl.)
• Komplexe Kurven (engl.)
• Bilder (engl.)
• Videos (engl.)

Entwickler können JavaScript zur Animation von Canvas-Elementen oder für interaktive Umgebungen, die auf Tastendrucke, Mausklicks oder ein beliebiges Browser-Ereignis reagieren, einsetzen. In diesem Beispiel (engl.) der Internet Explorer Test Drive-Website werden beispielsweise mit nur ein paar Zeilen JavaScript zufällig platzierte farbige Linien platziert.

Eine tiefere Einführung in das canvas-Element von HTML5 in Internet Explorer 9 finden Sie im Internet Explorer Team-Blog (engl.). Sehen Sie sich außerdem die verschiedenen Demos auf der Internet Explorer Test Drive-Website (engl.) an. Technische Informationen zum canvas-Element in Internet Explorer 9 finden Sie auf der Referenzseite zum Canvas-Element (engl.) im MSDN.

HTML5 Selection-APIs

Internet Explorer 9 unterstützt die HTML5-APIs zur Auswahl von Text (engl.). Das Selection-Objekt (engl.) stellt eine Liste von Range-Objekten (engl.) bereit (das Range-Objekt und das Konzept der programmgesteuerten Textauswahl wird im Abschnitt DOM L2 Traversal und Range dieses Dokuments besprochen). Das Selection-Objekt bietet eine deutlich zuverlässigere Möglichkeit, Inhalte auszuwählen, als die bisher verfügbare und proprietäre Lösung in Internet Explorer (document.selection, engl.).

Verbesserungen beim HTML-Parsen

Das Parsen von HTML in Internet Explorer 9 wurde verbessert und verhält sich nun exakt so wie in der HTML5 Draft Specification beschrieben. Speziell die folgenden Bereiche werden in Internet Explorer 9 interoperabel gehandhabt:

• Parsen von SVG in HTML: Internet Explorer 9 unterstützt das direkte Einbetten von SVG in HTML. Weitere Informationen finden Sie im folgenden Abschnitt.
• Parsen von XHTML. Internet Explorer 9 führt das Parsen von Dokumenten mit dem Mime-Typ application/xhtml+xml als XHTML durch.
• Generische Elemente: Bisherige Versionen von Internet Explorer haben generische Elemente als unerkannte HTML-Elemente behandelt. Nicht standardkonform genutzte div-Elemente mit CSS-Klassennamen wurden von Internet Explorer daher einfach ignoriert. Internet Explorer 9 handhabt diese Elemente nun wie erwartet und konsistent mit anderen wichtigen Browsern.
• Überlappende Tags: In Internet Explorer 8 und den Vorgängern wurden überlappende HTML-Tags nicht entsprechend der HTML5-Spezifikation behandelt. Entwickler nutzten oftmals Scripts, die bei überlappenden HTML-Tags ausgelöst wurden. Internet Explorer 9 führt das Parsen von überlappenden Tags nun wie erwartet und konsistent mit anderen wichtigen Browsern aus.
• Änderungen beim Parsen von script- und style-Blöcken: Internet Explorer 9 übergibt Text in einem script- oder style-Block im DOM an Textknoten. Diese Technik wird oft zur Anzeige von Quellcode genutzt.

Scalable Vector Graphics (SVG)

Eines der wichtigsten neuen Funktionen von Internet Explorer ist die Unterstützung von SVG (Scalable Vector Graphics). SVG bietet die Möglichkeit, optisch hervorstechende Elemente jeder Größe zu Websites hinzuzufügen – ohne dass ein Plug-in oder ein separater Viewer erforderlich ist.

Mit Internet Explorer 9 führen wir die Unterstützung für die SVG-Elemente ein. Sie basiert auf der SVG 1.1 (Second Edition) Draft-Spezifikation (engl.) für Desktop-Browser. Wie die neuen HTML5-Funktionen nutzt auch SVG die Hardwarebeschleunigung.

In Internet Explorer 9 wurden die folgenden Funktionalitäten implementiert:

• SVG-Dokumentstruktur, Interaktivität (Scripting-Events) und Styles (inline und über CSS)
• Präsentationselemente und die entsprechenden Attribute und DOM-Schnittstellen:
  • Basisformen
  • Fill-, stroke-, marker- und color-Eigenschaften
  • Gradient- und pattern-Eigenschaften
  • Pfade
  • Text

SVG ermöglicht viel mehr unterschiedliche Szenarien, als hier beschrieben werden könnten. Die folgende Liste enthält ein paar Beispiele zum Einsatz der SVG-Technologien, die nun mit Internet Explorer 9 möglich sind:

• Kleine statische Vektorgrafiken für Logos, Listenzeichen (über das list-style-image CSS-Attribut, engl.), Rahmen (über das border-image CSS-Attribut, engl.) oder andere kleine Grafiken, für die bisher das img-Tag (engl.) von HTML genutzt wurde. In solchen Szenarien wird die Downloadgröße kleiner, die Grafiken werden umfangreicher, die Qualität von Ausdrucken steigt, und die Details auf vergrößerten Seiten sehen besser aus.
• Große statische Vektorgrafiken für Hintergründe (über das background-image CSS-Attribut, engl.) oder andere große Grafiken, für die bisher das img-Tag von HTML genutzt wurde. In solchen Szenarien werden die Grafiken umfangreicher, die Qualität von Ausdrucken steigt, und die Details auf vergrößerten Seiten sehen besser aus.
• Komplexe Zeichnungen mit hoher Genauigkeit in Software wie beispielsweise Microsoft Visio, Adobe Illustrator und CAD. Durch die SVG-Unterstützung in Internet Explorer 9 ist es nicht länger notwendig, die entsprechenden Elemente herunterzuladen und in einem separaten Viewer anzuzeigen.
• Interaktive Vektorgrafiken wie beispielsweise Landkarten, Diagramme, Benutzeroberflächen für Websites und andere vektorbasierte Interaktivitätsvarianten. Entsprechende Umgebungen konnten bisher oft nur durch Plug-ins realisiert werden.
• Dynamisch zusammengestellte interaktive Vektorgrafiken wie beispielsweise Diagramme und Kurven, die sich durch die Eingaben des Benutzers verändern. Auch dies war bisher oft nur durch Plug-ins möglich.

Aktualisierter Kompatibilitätsmodus

Internet Explorer 8 führte einen Kompatibilitätsmodus für Dokumente ein, über den die Entwickler einen bestimmten Darstellungsmodus festlegen konnten – Internet Explorer 7 oder Internet Explorer 8. Internet Explorer 9 fügt einen neuen Modus hinzu: Den Standardmodus des Internet Explorer 9, über den die höchstmöglichste Leistung zur Verarbeitung moderne Webanwendungen und die aktuellsten Standards verfügbar sind. Dieser aktualisierte Kompatibilitätsmodus bietet Entwicklern mehr Flexibilität bei der Anwendungsmigration und -aktualisierung. Solange durch die Website oder den Webserver kein anderer Modus angegeben wurde, wird Internet Explorer 9 standardmäßig im Internet Explorer 9 Dokument-Modus ausgeführt.