Skip to main content

Entwicklerhandbuch für Internet Explorer 9

14. März 2011

Das Entwicklerhandbuch für Internet Explorer 9 gibt Einblick in die Funktionen und Verbesserungen in Internet Explorer 9. Mithilfe dieses Handbuchs können Webentwickler und -designer diese Verbesserungen optimal nutzen. Entwickler können die Plattform zudem in der Internet Explorer-Testversion in Aktion erleben. Websites, auf die im vorliegenden Entwicklerhandbuch verwiesen wird, liegen möglicherweise in englischer Sprache vor.

Inhalt

Einführung

Vielseitige Browserleistung

Unterstützung von Webstandards für ein und dasselbe Markup

Neue Grafikfunktionen, die sich die Leistung von Windows-PCs zu Nutze machen

Liste der neuen Funktionen

Verbesserte Interoperabilität durch Unterstützung von Standards

Cascading Stylesheets, Ebene 3 (CSS3)

CSS3 2D Transforms

CSS3-Modul für Hintergründe und Rahmen

CSS3-Modul für Farben

CSS3-Modul für Schriftarten

CSS3-Modul für Medienabfragen

CSS3-Modul für Namespaces

CSS3-Modul für Werte und Einheiten

CSS3-Selektoren

Weitere CSS-Funktionen

CSSOM-Modul für die Anzeige

Daten-URI

Verbesserungen des Dokumentobjektmodells

Einführung in das erweiterte DOM

Analysieren von XML im DOM und Serialisieren von XML im und vom DOM

Dokumentobjektmodell (DOM) Level 2 und Level 3

DOM-Core (L2 und L3) und DOM-Ansichten (L2)

DOM-Elementdurchlauf

DOM-L2- und DOM-L3-Ereignisse

DOM-L2-HTML

DOM-L2-Format

DOM-L2-Durchlauf und -Bereich

Verarbeitung von Leerzeichen im DOM

ECMAScript 5

HTML5

HTML5 Geolocation

video- und audio-Elemente in HTML5

canvas-Element in HTML5

Verbesserungen bei der HTML-Analyse

Auswahl-APIs in HTML5

Semantische HTML5-Elemente

ICC-Farbprofile

Selectors API Level 2

Skalierbare Vektorgrafiken (Scalable Vector Graphics, SVG)

Grundlegende Formen

Beschneiden (Clipping), Maskieren (Masking) und Zusammensetzen (Compositing)

Koordinatensysteme, Transformationen und Einheiten

Dokumentstruktur

Farbverläufe und Muster

Interaktivität

Verknüpfungen und Ansichten

Malen und Farben

Pfade

Text

Neue Tools für Webentwickler

Angeheftete Sites

Versionsverwaltung für die Plattform

Neuer Dokumentmodus

Zeichenfolge des Benutzer-Agents

Entwicklertools

Registerkarte "Konsole"

Registerkarte "Netzwerk"

Umschaltungstool für den Benutzer-Agent

Messen der realistischen Leistung

Revisionsverlauf

Einführung

Willkommen bei Windows Internet Explorer 9. Sie als Entwickler möchten natürlich die neuesten Informationen zu den Browsern kennen, die Sie und Ihre Kunden verwenden. Internet Explorer 9 ist die aktuelle Version des weltweit verwendeten Webbrowsers. Mithilfe von Internet Explorer 9 soll die Community der Webentwickler einfacher umfangreiche, interoperable und standardkonforme Webanwendungen erstellen können. Zu diesem Zweck werden eine entsprechende Plattform, Tools und Funktionen für das Internet der Zukunft bereitgestellt.

Dieses Dokument zeigt Ihnen, also den Webentwicklern, deren Kunden auf Internet Explorer setzen, wie Sie die neuen Verbesserungen in Ihren Websites und Anwendungen nutzen können. Schauen Sie sich auf jeden Fall die zugehörige Website der Testversion an. Dort können Sie die Funktionen auch in Aktion erleben. Wenn Sie Feedback geben möchten und weitere Informationen zu den neuen Funktionen in Internet Explorer 9 wünschen, rufen Sie die Anmerkungen zu dieser Version sowie Das ist neu in Internet Explorer 9 auf MSDN auf. Aktuelle Neuigkeiten zu Internet Explorer 9 finden Sie im IE-Teamblog. Und die neuesten Informationen für Entwickler zu Internet Explorer finden Sie wie immer im Internet Explorer Developer Center auf MSDN.

Anhand von Internet Explorer 9 können sich Entwickler ein Bild davon verschaffen, in welchen Bereichen sich die Plattform weiterentwickelt hat:

  • Vielseitige Browserleistung
  • Unterstützung von Webstandards, sodass ein und dasselbe Markup browserübergreifend identisch funktioniert
  • Neue Grafikfunktionen, die sich die Leistung von Windows-PCs zu Nutze machen

Vielseitige Browserleistung

Mit der Browserleistung verknüpft sind viele verschiedene Subsysteme innerhalb des Browsers. Unterschiedliche Websites und innerhalb einer Website unterschiedliche Aktivitäten setzen den Browser unterschiedlichen Belastungen und Anforderungen aus. Eine Webanwendung wie Windows Live Mail oder Microsoft Office Web Apps belastet die Subsysteme des Browsers z. B. ganz anders als eine Website zur Nachrichtenaggregation wie Bing News oder Digg.

Einführung in "Chakra", das neue JavaScript-Modul

Die Leistung von Skriptmodulen ist nur ein Teil der Browserleistung insgesamt. Im Vergleich zu Internet Explorer 7 wurde die Skriptleistung in Internet Explorer 8 bereits deutlich verbessert, und "Chakra", das neue JavaScript-Modul in Internet Explorer 9, stellt eine weitere Steigerung dar. "Chakra" interpretiert und kompiliert Code nicht nur parallel, sondern führt diesen auch parallel aus und nutzt – sofern vorhanden – mehrere CPU-Kerne. Weitere Details finden Sie unter " Das neue JavaScript-Modul in Internet Explorer 9" im IE-Teamblog.

Natürlich untersucht das Internet Explorer-Team die Leistungsmerkmale aller Subsysteme des Browsers, schließlich werden diese von realen Websites verwendet. Es sollen nicht einfach nur Benchmarks erreicht werden, sondern allgemein die Leistung von realen Websites gesteigert werden.

Unterstützung von Webstandards für ein und dasselbe Markup

Internet Explorer stellt Webentwicklern umfangreiche, interoperable Funktionen zur Verfügung. Das Internet Explorer-Team ist sich bewusst, dass Sie kein Interesse daran haben, Ihre Websites wieder und wieder umzuschreiben und zu testen. Die Übernahme von Standards durch die Browseranbieter ist ein guter Weg in die richtige Richtung, um dieses Ziel zu erreichen.

Mit Internet Explorer 8 stellte das Internet Explorer-Team eine in hohem Maße interoperable Implementierung von CSS 2.1 zur Verfügung, und gleichzeitig wurde dem World Wide Web Consortium (W3C) eine Testsuite mit über 7200 Tests bereitgestellt. Dies ist wichtig, denn ohne Validierungstests wäre es viel schwieriger, Standards einheitlich umzusetzen, d. h., sie wären keine zuverlässige Grundlage für Websiteentwickler.

Internet Explorer 9 investiert in hohem Maße in die Unterstützung von Standards und die Interoperabilität. So sind z. B. Unterstützung für den neuen Standard HTML5, eine bessere Unterstützung einer Reihe von CSS3-Funktionen und – eine Neuheit in Internet Explorer – integrierte Unterstützung für SVG Bestandteil von Internet Explorer 9.

Neue Grafikfunktionen, die sich die Leistung von Windows-basierten PCs zu Nutze machen

Das Ökosystem von Windows ist in Bezug auf die Hardware erstaunlich innovativ. Mit Internet Explorer 9 können Webentwickler nun dank hardwaregestützter Darstellung von Grafiken und Text von dieser Innovation profitieren.

Internet Explorer 9 verwendet die DirectX-Familie der Windows-APIs (Application Programming Interfaces, Anwendungsprogrammierschnittstellen), damit Webentwickler in den Genuss zahlreicher Vorteile kommen. Die gesamte Grafik- und Textdarstellung wurde mithilfe von Direct2D und DirectWrite von der CPU auf die Grafikkarte übertragen. Eine Beschleunigung der Grafikhardware bedeutet, dass umfangreiche, grafiklastige Websites unter Windows schneller dargestellt werden können und dabei weniger CPU-Leistung in Anspruch genommen werden muss. Das Beste daran ist, dass Sie automatisch in den Genuss dieser Änderungen kommen, ohne andere als die gewohnten Standards beim Erstellen von Websites verwenden zu müssen.

Liste der neuen Funktionen

Diese Liste enthält alle in Internet Explorer 9 enthaltenen neuen Funktionen für Entwickler. Informationen zu Änderungen an den Vorabversionen der Builds von Internet Explorer 9 finden Sie im Revisionsverlauf.

  • Verbesserte CSS3-Unterstützung
    • Abgerundete Ecken mit der border-radius-Eigenschaft
    • Hintergrund- und Rahmenfunktionen in CSS3
    • Die opacity-Eigenschaft
    • RGBA-, HSL- und HSLA-Farbmodelle
    • Schriftarteneigenschaften und neue Formate für Webschriftarten in CSS3
    • CSS3-Modul für Medienabfragen
    • CSS3-Modul für Namespaces
    • CSS3-Modul für Werte und Einheiten
    • CSS3-Selektoren
  • Verbesserte Daten-URI-Unterstützung
  • Verbesserungen des Dokumentobjektmodells (DOM)
    • Erweiterte DOM-Funktionen
    • Analysieren von XML im DOM und Serialisieren von XML im und vom DOM
    • Unterstützung für neues DOM Level 2 (L2) und Level 3 (L3) und aktualisierte Verhaltensweisen
      • DOM-Core (L2 und L3) und DOM-Ansichten (L2)
      • DOM-Elementdurchlauf
      • DOM-Ereignisse (L2 und L3)
      • DOM-L2-HTML
      • DOM-L2-Format
      • DOM-L2-Durchlauf und -Bereich
    • Neues Verhalten bei der Verarbeitung von Leerzeichen
  • Verbesserte ECMAScript-Funktionen
  • Neue Unterstützung für HTML5
    • Geolokalisierung
    • Die video- und audio-Elemente
    • Das canvas-Element
    • Die Selection-Schnittstelle
    • Verbesserte Analyse von HTML-Elementen
    • Textauswahl-APIs
  • Farbprofilunterstützung für Bilder gemäß ICC, Version 2 und 4
  • Neue Unterstützung für Selectors API Level 2 für die msMatchesSelector-Methode
  • SVG-Funktionen
    • Grundlegende Formen: Rechtecke, Kreise, Ellipsen, Linien, Polylinien und Polygone
    • Beschneiden, Maskieren und Zusammensetzen
    • Koordinatensysteme, Transformationen und Einheiten
    • Dokumentstruktur, Metadaten und Erweiterbarkeitsfunktionalität
    • Farbverläufe und Muster
    • Interaktivität
    • Verknüpfungen und Ansichten
    • Malen und Farben
    • Pfade, einschließlich aller Funktionen des path-Elements und des d-Attributs
    • Text
  • Zusätzliche Funktionen für die Versionsverwaltung für die Plattform
    • Angeheftete Sites
    • Neuer Dokumentmodus
    • Neue Zeichenfolge des Benutzer-Agents
  • Zusätzliche Entwicklertools
    • Leistungsverbesserungen
    • Registerkarte Konsole
    • Registerkarte Netzwerk
    • Umschaltungstool für den Benutzer-Agent
    • Messen der realistischen Leistung

Verbesserte Interoperabilität durch Unterstützung von Standards

Wichtig   Damit die Unterstützung von neuen Standards in Internet Explorer 9 umfassend genutzt werden kann, muss sich der Browser im Internet Explorer 9-Standards-Modus ("IE9-Modus") befinden. Verwenden Sie dazu am besten eine standardmäßige !DOCTYPE-Richtlinie statt des Meta-Tags "X-UA-Compatible" oder HTTP-Headers. Die !DOCTYPE-Richtlinie zum Aufrufen des IE9-Modus lautet wie folgt:

<!DOCTYPE html>

Natürlich können Sie die !DOCTYPE-Richtlinie und das Meta-Tag "X-UA-Compatible" oder den HTTP-Header verwenden, um die Standardeinstellung individuell zu ändern.

Den aktuellen Dokumentmodus können Sie ermitteln, indem Sie durch Drücken von F12 die Internet Explorer-Entwicklertools öffnen und dann die Angabe auf der rechten Seite der Menüleiste überprüfen. Um den Dokumentmodus außer Kraft zu setzen, klicken Sie im Menü Dokumentmodus auf Internet Explorer 9-Standards.

Aktualisierungen zu den Verhaltensweisen des Dokumentmodus in Internet Explorer 9 finden Sie im Abschnitt Versionsverwaltung für die Plattform dieses Handbuchs.

Cascading Stylesheets, Ebene 3 (CSS3)

Internet Explorer 9 bietet mehr Unterstützung für Cascading Stylesheets (CSS) als jeder frühere Browser von Microsoft. Aufbauend auf der Arbeit, die in Version 8 von Internet Explorer umgesetzt wurde – Internet Explorer wurde vollständig kompatibel mit CSS2.1 – weist Internet Explorer 9 Unterstützung für viele Komponenten von CSS3 auf.

Hinweis Viele CSS3-Module befinden sich noch in der Phase "Working Draft" (Entwurf als Arbeitsgrundlage) bzw. "Last Call" (Letzter Aufruf). Bis sie die Phase "Candidate Recommendation" (Empfehlungskandidat) erreichen, werden an ihnen ggf. noch zahlreiche Änderungen vorgenommen. Weitere Informationen finden Sie in den aktuellen CSS3-Entwurfsmodulen.

CSS3 2D Transforms

In Internet Explorer 9 wird CSS3 2D Transforms erstmals unterstützt. CSS 2D Transforms ermöglicht die zweidimensionale Transformation von Elementen, die mit CSS gerendert wurden.

Internet Explorer 9 unterstützt die folgenden 2D Transforms-Eigenschaften:

  • Die Eigenschaft  -ms-transform wendet mindestens eine zweidimensionale Transformationsfunktion auf ein Element an.
  • Die Eigenschaft -ms-transform-origin legt den Ursprung der Transformation für ein Element fest. Diese Eigenschaft ist hilfreich, wenn Sie den Standardursprung (die Mitte) ändern möchten.

Hinweis Da das Modul CSS 2D Transforms vom W3C noch nicht den Status "Candidate Recommendation" (Empfehlungskandidat) erhalten hat, müssen die Eigenschaften transform und transform-origin mit dem Präfix -ms- verwendet werden, damit sie von Internet Explorer 9 erkannt werden. Weitere Informationen zu anbieterspezifischen Präfixen finden Sie unter " IE9, Präfixe von Anbietern und Entwickler" im IE-Teamblog.

Internet Explorer 9 unterstützt die folgenden Transformationsfunktionen für die Verwendung mit der Eigenschaft "-ms-transform":

  • Die Funktion matrix(a,b,c,d,e,f) gibt eine 2D-Transformation als Transformationsmatrix mit sechs Werten an (a bisf). 
  • Die Funktion translate(tx,[ty]) gibt eine 2D-Übersetzung mit dem Vektor [tx,ty] an, wobei tx der erste "translation-value"-Parameter und ty der optionale zweite "translation-value"-Parameter ist. Wenn ty nicht angegeben ist, lautet der Wert Null. ("translation-value"-Parameter können Prozentsätze oder Längen sein.)
  • Die Funktion translateX(tx) gibt eine Übersetzung mit dem für die x-Richtung festgelegten Wert an.
  • Die Funktion translateY(ty) gibt eine Übersetzung mit dem für die y-Richtung festgelegten Wert an.
  • Die Funktion scale(sx,[sy]) gibt einen 2D-Skalierungsvorgang mit dem Skalierungsvektor [sx,sy] an, der durch die zwei Parameter beschrieben wird. Wenn der zweite Parameter nicht angegeben ist, übernimmt er den Wert des ersten Parameters.
  • Die Funktion scaleX(sx) gibt einen Skalierungsvorgang mit dem Skalierungsvektor [sx,1] an, wobei sx als Parameter festgelegt ist.
  • Die Funktion scaleY(sy) gibt einen Skalierungsvorgang mit dem Skalierungsvektor [sy1] an, wobei sy als Parameter festgelegt ist.
  • Die Funktion rotate(angle) gibt eine 2D-Drehung um den Winkel an, der im Parameter zum Ursprung des Elements angegeben ist, wie in der Eigenschaft transform-origin definiert.
  • Die Funktion skewX(ax) gibt eine Neigungstransformation entlang der x-Achse um den festgelegten Winkel an.
  • Die Funktion skewY(ay) gibt eine Neigungstransformation entlang der y-Achse um den festgelegten Winkel an.
  • Die Funktion skew(ax,[ay]) gibt eine Neigungstransformation entlang der x- und y--Achse an. Der erste Winkelparameter gibt die Neigung zur x-Achse an. Der zweite Winkelparameter gibt die Neigung zur y-Achse an. Wenn der zweite Parameter nicht festgelegt ist, wird für den y-Winkel der Wert Null verwendet (keine Neigung zur y-Achse).

Die Eigenschaft "-ms-transform-origin" akzeptiert einen oder zwei Werte. Jeder Wert kann ein Schlüsselwort, eine Länge oder ein Prozentsatz sein. Wenn die Eigenschaft -ms-transform-origin nicht festgelegt ist, beginnt die Transformation in der Mitte (dies entspricht einem -ms-transform-origin-Wert von 50 % 50 %).

  • Der erste Wert gibt die horizontale Position (die Position entlang der x-Achse) an und kann negativ sein. Dieser Wert kann eine Länge (in allen unterstützten Längeneinheiten), ein Prozentsatz (der Gesamtfeldlänge) oder eines der folgenden drei Schlüsselwörter sein: "left" (entspricht 0 % oder einer Länge von Null), "center" (entspricht 50 % oder der halben Feldlänge) oder "right" (entspricht 100 % oder der Gesamtfeldlänge).
  • Der zweite Wert gibt die vertikale Position (die Position entlang der y-Achse) an und kann negativ sein. Dieser Wert kann eine Länge (in allen unterstützten Längeneinheiten), ein Prozentsatz (der Gesamtfeldhöhe) oder eines der folgenden drei Schlüsselwörter sein: "top" (entspricht 0 % oder einer Höhe von Null), "center" (entspricht 50 % oder der halben Feldhöhe) oder "bottom" (entspricht 100 % oder der Gesamtfeldhöhe).

Wenn nur ein Wert angegeben ist, wird für den zweiten Wert "center" angenommen.

Betrachten Sie folgendes Markup:

div {
-ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
-ms-transform-origin: 60% 100%;
}

In Internet Explorer 9 wird durch Festlegen der Eigenschaft -ms-transform-origin auf 60 % 100 % der Ursprungspunkt der Transformation auf 60 % der Länge und 100 % der Höhe des zu transformierenden Elements festgelegt. Die Eigenschaft -ms-transform verschiebt das Element zunächst 200 Pixel in x-Richtung und dann 100 Pixel in y-Richtung. Dann wird das Element um 75 % skaliert. Zuletzt wird das Element um 40 Grad im Uhrzeigersinn um den Ursprungspunkt gedreht, der durch die Eigenschaft -ms-transform-origin festgelegt ist.

Weitere Informationen zu CSS3 2D Transforms finden Sie auf der MSDN-Website.

CSS3-Modul für Hintergründe und Rahmen

Internet Explorer 9 bietet Unterstützung für einige Funktionen des CSS3-Moduls für Hintergründe und Rahmen. Die wichtigste neue Funktion, die border-radius-Eigenschaften, ist gleichzeitig die gefragteste CSS-Rahmenfunktion. Internet Explorer 9 bietet zudem Unterstützung für die folgenden neuen CSS3-Eigenschaften:

Internet Explorer 9 erweitert außerdem die Funktionalität der folgenden vorhandenen CSS-Eigenschaften für Hintergründe und Rahmen:

Die border-radius-Eigenschaften

Mithilfe der border-radius-Eigenschaften können Sie Rahmenecken abrunden, indem die kantigen Ecken durch eine Viertelellipse "ersetzt" und die Radien der einzelnen Ellipsen angegeben werden. Die Eigenschaften bestehen aus folgenden Elementen:

Werfen Sie beispielsweise einen Blick auf das folgende Markup:

border-radius: 100px 66.66px 200px 50px;
border:
10px blue double;
padding: 24px;
width: 400px;height: 125px;

Dadurch wird bei Anwendung auf einen Textblock Folgendes erzeugt:

CSS3-Modul für Farben

Internet Explorer 9 bietet Unterstützung für das CSS3-Modul für Farben. Dieses Modul enthält Unterstützung für die Farbmodelle RGBA, HSL und HSLA, die "opacity"-Eigenschaft und das currentColor -Schlüsselwort. Internet Explorer 9 erweitert außerdem die Unterstützung für das transparent -Schlüsselwort.

RGBA-Farbmodell

Das RGB-Farbmodell wurde erweitert und enthält nun einen Alphakanal (Transparenz). Das Format eines RGBA-Werts lautet rgba(red,green,blue,alpha). Die Komponenten Rot, Grün und Blau sind mit denen des RGB-Farbmodells identisch und werden als ganze Zahl oder in Prozent angegeben. Die Komponente Alpha wird als Wert zwischen "0.0" (komplett durchsichtig) und "1.0" (komplett undurchsichtig) angegeben.

Wenn Sie z. B. die Hintergrundfarbe auf Rot mit einer Transparenz von 50 % festlegen möchten, können Sie in das Stylesheet sowohl die eine als auch die andere der beiden folgenden CSS-Deklarationen einfügen:

background-color: rgba(255,0,0,0.5);
background-color: rgba(100%,0%,0%,0.5);

RGB-Werte unterstützen die hexadezimale Schreibweise, RGBA-Werte hingegen nicht.

HSL-Farbmodell

Internet Explorer 9 unterstützt die HSL-Farbwerte (Hue, Saturation, Lightness; Farbton, Sättigung, Helligkeit) des CSS3-Moduls für Farben. Im HSL-Farbmodell ist "Hue" als der Winkel der angegebenen Farbe im Farbkreis definiert (Beispiel: Rot ist 0 oder 360, Grün ist 120, Blau ist 240). "Saturation" und "Lightness" werden in Prozent angegeben. Die folgende CSS-Deklaration definiert beispielsweise einen roten Hintergrund.

background-color: hsl(0,100%,50%);
HSLA-Farbmodell

Internet Explorer 9 erweitert auch das HSL-Farbmodell um einen Alphakanal. Wie beim RGBA-Modell wird der Alphakanal als Wert zwischen "0.0" und "1.0" angegeben. Die folgende CSS-Deklaration definiert beispielsweise einen roten Hintergrund mit einer Transparenz von 50 %.

background-color: hsla(0,100%,50%,0.5);
Die opacity-Eigenschaft

Internet Explorer 9 fügt die "opacity"-Eigenschaft des CSS3-Moduls für Farben hinzu, wodurch Sie in die Lage versetzt werden, die Transparenz auf Elementebene zu steuern. Ähnlich der Alphakomponente bei RGBA-Werten wird der opacity-Wert als Zahl zwischen "0.0" (komplett durchsichtig) und "1.0" (komplett undurchsichtig) angegeben. Die opacity-Eigenschaft ist für alle Elemente verfügbar.

Das folgende Beispiel zeigt die opacity-Eigenschaft für die Farbe Marineblau mit Durchlässigkeitswerten in 0,2-Schritten von 0 bis 1.

<div class="opacity_sample">
    <div style="background: navy; opacity: 0;"></div>
    <div style="background: navy; opacity: 0.2;"></div>
    <div style="background: navy; opacity: 0.4;"></div>
    <div style="background: navy; opacity: 0.6;"></div>
    <div style="background: navy; opacity: 0.8;"></div>
    <div style="background: navy; opacity: 1;"></div>
</div>

Dieses Beispiel generiert die folgende Ausgabe für ein 25 × 125-Pixel-div-Element.

Schlüsselwörter für Farben

Im CSS3-Modul für Farben ist die Liste der Schlüsselwörter für Farben für CSS identisch mit der für SVG 1.0. Die SVG-Unterstützung ist zwar eine Neuerung in Internet Explorer 9, aber die Änderung wurde bereits in Internet Explorer 8 implementiert.

Internet Explorer 9 führt das currentColor -Schlüsselwort des CSS3-Moduls für Farben ein, das den aktuellen Wert der color-Eigenschaft für jede Eigenschaft angibt, die color akzeptiert. Beim Festlegen auf die color-Eigenschaft selbst ist currentColor identisch mit color:inherit.

Internet Explorer 9 weitet zudem die Verwendung des transparent -Schlüsselworts über die Eigenschaften border-color und background-color hinaus aus. Es kann nun mit jeder Eigenschaft verwendet werden, die die color-Eigenschaft akzeptiert.

CSS3-Modul für Schriftarten

Die bessere typografische Kontrolle ist in jeder neuen Version von CSS ein fester Bestandteil gewesen. Dass kein interoperables Format für Webschriftarten vorhanden ist, kann manchmal frustrierend sein. Internet Explorer 9 verbessert die vorhandene Unterstützung für CSS-Schriftarten, um die mit dem CSS3-Modul für Schriftarten einhergehenden Anforderungen zu erfüllen. Zudem bietet der neue Browser Unterstützung für das Web Open Font Format (WOFF) und unformatierte TrueType-Schriftarten.

Font-Eigenschaften

Die font-weight-Eigenschaft wurde aktualisiert, sodass Internet Explorer 9 Schriftgewichte in Übereinstimmung mit dem CSS3-Modul für Schriftarten berechnet.

Die font-size-Eigenschaft wurde aktualisiert, sodass der Skalierungsfaktor jedes einzelnen Schlüsselworts der Definition im CSS3-Modul für Schriftarten entspricht. Zudem sind nun Schlüsselwörter und HTML-Überschriftengrößen in Übereinstimmung mit dem CSS3-Modul für Schriftarten zugeordnet.

Die font-stretch-Eigenschaft ist eine Neuerung in Internet Explorer 9; mit ihr wird eine Standard-, eine schmale oder eine breite Schriftart aus einer Schriftfamilie ausgewählt. Diese Eigenschaft ist auch als @font-face-Regeldeskriptor verfügbar.

Die @font-face-Regel

Mithilfe der @font-face-Regel können Schriftarten eingebunden werden, d. h., ein Stylesheet kann auf eine bestimmte Schriftartendatei verweisen, die vom Browser heruntergeladen und verwendet wird. Werfen Sie beispielsweise einen Blick auf das folgende Markup:

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf)
      format("embedded-opentype");
}
p {font-family: MyFont, serif;
}

In diesem Beispiel weist die @font-face-Regel den Browser an, zu der im src-Deskriptor angegebenen URL zu wechseln, um die Schriftartendatei herunterzuladen, in der sich die angegebene Schriftart befindet. In Internet Explorer 8 und früheren Versionen wurde der src-Deskriptor fälschlicherweise ignoriert, wenn er eine optionale format-Zeichenfolge wie die aus dem vorherigen Beispiel enthielt. In Internet Explorer 9 wird der src-Deskriptor wie vorgesehen analysiert.

Internet Explorer 9 bietet zudem Unterstützung für den unicode-range-Deskriptor, mit dem Sie einen Bereich von Unicode-Zeichen angegeben können, die von einer bestimmten Schriftart unterstützt werden. Das folgende Codebeispiel gibt beispielsweise den Bereich der ASCII-Basiszeichen an.

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf);
   unicode-range: U+0-7F;
}
Formate für Webschriftarten

Microsoft entwickelte Internet Explorer 9, um die Auswahl an Webschriftarten zu vergrößern. Zu diesem Zweck wurden folgende Aufgaben ausgeführt:

  • Es wurde die Abwärtskompatibilität mit weiterhin bestehender Unterstützung für Embedded OpenType (EOT) sichergestellt.
  • Es wurde Unterstützung für das Web Open Font Format (WOFF) hinzugefügt, mit dem sfnt-basierte Schriftartendateien (TrueType-, OpenType- und Open Font Format-Schriftarten) neu gepackt werden, indem jede Tabelle einzeln unter Verwendung eines ZIP-Komprimierungsformat komprimiert wird.
  • Es wurde Unterstützung für installierbare (ohne Festlegung von Berechtigungsbits für die Schriftarteinbettung) unformatierte TrueType-Schriftarten hinzugefügt.

Ein Beispiel der Webschriftarten in Internet Explorer 9 finden Sie in den Demos " Webschriftarten" oder " Mehr Webschriftarten" in der Internet Explorer-Testversion

Weitere Informationen zu den CSS3-Schriftarten in Internet Explorer 9 finden Sie auf MSDN.

CSS3-Modul für Medienabfragen

Das CSS3-Modul für Medienabfragen spezifiziert Methoden, mit denen Webentwickler ein Stylesheet auf eine Reihe bestimmter Gerätemerkmale festlegen. Beispiel: Sie möchten Seiten für Benutzer von Mobilgeräten (mit sehr kleinem Bildschirm, begrenzter Farbpalette, niedriger Auflösung usw.) anders entwerfen als für Benutzer von Netbooks (mit kleinem Bildschirm, vollständiger Farbpalette, hoher Auflösung usw.) oder Standardcomputern (mit großem Bildschirm, vollständiger Farbpalette, hoher Auflösung usw.). Die vollständige Liste der vom CSS3-Modul für Medienabfragen unterstützten media-Eigenschaften umfasst "width", "height", "device-width", "device-height", "orientation", "aspect-ratio", "device-aspect-ratio", "color", "color-index", "monochrome" und "resolution".

Bei der folgenden Deklaration handelt es sich um eine typische Medienabfrage mit der @media-Regel.

@media screen and (max-width:400px) {div {border:none;}}

In diesem Fall gibt screen den Zielmedientyp an, und max-width ist die Eigenschaft für das Zielmedium. Die Deklaration gibt an, dass die angegebenen Regeln (kein Rahmen bei div Elementen) nur anzuwenden sind, wenn die Seite auf einem Bildschirm mit einer Breite von mindestens 400 Pixeln agezeigt wird. Sie können media-Eigenschaften kombinieren, um noch genauere Abfragen wie die folgende zu erstellen.

@media screen and (max-width:400px) and (max-height:600px) {…}

Dies Deklaration wendet die angegebenen Regeln an, wenn es sich bei dem Medium um einen Bildschirm handelt, dessen Breite höchstens 400 Pixel und dessen Höhe höchstens 600 Pixel beträgt.

Auf der Website der Internet Explorer-Testversion können Sie Medienabfragen in Aktion erleben.

Internet Explorer 9 bietet Unterstützung für Medienabfragen in CSS, HTML, XML und XHTML. Weitere Informationen zu Medienabfragen in Internet Explorer 9 finden Sie auf MSDN.

CSS3-Modul für Namespaces

Internet Explorer 9 unterstützt einen Großteil des CSS3-Moduls für Namespaces. Mithilfe von CSS-Namespaces können Entwickler einen Standardnamespace für eine CSS-Datei deklarieren. Dabei handelt es sich standardmäßig um jede Element- oder Attributauswahl, die den Namespace auch verwendet.

CSS-Namespaces ermöglichen dem Entwickler zudem die Erstellung von Namespacepräfixen, die später in der CSS-Datei verwendet werden können. Außerdem können Sie in Internet Explorer 9 einen Namespace für SVG-Elemente deklarieren.

Die "@namespace"-At-Regel

Die @namespace-At-Regel deklariert einen XML-Namespace (und optional das zugehörige Präfix) und ordnet diesen einer Zeichenfolge zu, die einen Namespacenamen darstellt. Die folgende Regel deklariert z. B. einen Standardnamespace.

@namespace "http://www.w3.org/1999/xhtml";

Der Standardnamespace wird auf Namen angewendet, die keine explizite Namespacekomponente aufweisen.

Wenn eine @namespace-Regel mit einem Präfix deklariert wird, kann das Präfix in namespacequalifizierten Namen verwendet werden. Beispiel: In der folgenden Namespacedeklaration für den Namespace prfx

@namespace prfx "http://prfx.contoso.com";

…entspricht der folgende Selektor E-Elementen in dem Namespace, auf den durch das Präfix prfx verwiesen wird.

prfx|E

Das folgende Beispiel ist noch etwas komplexer.

@namespace prfx "http://prfx.contoso.com";
@namespace msft "http://msft.example.com";

p {background-color:red;}
prfx|p {background-color:blue;}
msft|p {background-color:green;}

In diesem Beispiel werden zwei Namespacepräfixe erstellt. Zunächst werden die p-Elemente in einem Namespace mit der Farbe Rot versehen. Alle p-Elemente im prfx -Namespace werden dann mit der Farbe Blau und p-Elemente im msft -Namespace werden wieder mit der Farbe Grün versehen.

Im folgenden Beispiel wird ein SVG-Element formatiert.

@namespace svg "http://www.w3.org/2000/svg";
svg|circle {fill:red;}

Bei Verwendung des Namespaces und der Deklaration aus diesem Beispiel erhalten alle mit SVG erstellten Kreise eine rote Füllung.

Weitere Informationen finden Sie auf der Referenzseite für die @namespace-Regel in MSDN.

CSS3-Modul für Werte und Einheiten

Internet Explorer 9 bietet Unterstützung für viele der neuen Werte und Einheiten, die im CSS3-Modul für Werte und Einheiten beschrieben sind. Die meisten dieser neuen Werte und Einheiten müssen die anderen in diesem Dokument beschriebenen CSS3-Funktionen unterstützen.

Internet Explorer 9 unterstützt die folgenden neuen Werte und Einheiten:

  • deg: Grad (Winkeleinheit)
  • grad: Grad (Winkeleinheit)
  • rad: Bogenmaß (Winkeleinheit)
  • turn: Umdrehungen (Winkeleinheit)
  • ms: Millisekunden (Zeiteinheit)
  • s: Sekunden (Zeiteinheit)
  • rem: Schriftgrad des Stammelements (relative Längeneinheit)
  • vw: Viewportbreite (relative Längeneinheit)
  • vh: Viewporthöhe (relative Längeneinheit)
  • vm: Viewportbreite oder -höhe; abhängig davon, welcher der kleinere Wert der beiden ist (relative Längeneinheit)
  • ch: Nullbreite (Breite der Glyphe für Null in der wiedergebenden Schriftart; relative Längeneinheit)

Zudem aktualisiert Internet Explorer 9 die attr()-Funktion für generierten Inhalt. Sie kann nun auf jede Eigenschaft angewendet werden und akzeptiert mehrere Argumente.

Die folgende CSS3-Funktion ist eine Neuheit in Internet Explorer 9:

  • calc(): berechnet Werte mithilfe arithmetischer Operatoren und kann überall dort eingesetzt werden, wo Längenwerte zulässig sind.

Weitere Informationen zu CSS-Funktionen finden Sie unter Referenz zu CSS-Werten und -Einheiten auf MSDN.

CSS3-Selektoren

Internet Explorer 9 unterstützt die Erweiterungen der CSS-Selektorsyntax, die in der vorgeschlagenen Empfehlung für CSS3-Selektoren angegeben ist. Nachfolgend werden die Selektoren aufgeführt, die in Internet Explorer 9 neu sind. (Alle Details zur Unterstützung von Selektoren in Internet Explorer finden Sie unter CSS-Kompatibilität und Internet Explorer auf MSDN.)

Weitere Informationen finden Sie in der Referenz zu CSS-Selektoren auf MSDN.

Ein praktisches Beispiel für CSS3-Selektoren finden Sie auf der Website mit der Internet Explorer-Testversion.

Strukturelle Pseudoklassen

Strukturelle Pseudoklassen ermöglichen die Auswahl basierend auf Zusatzinformationen in der Dokumentstruktur, die mit einfachen Selektoren oder Kombinatoren nicht ausgewählt werden können.

Mit dem folgenden Codebeispiel wird ein E-Element ausgewählt, bei dem es sich um den Stamm des Dokuments handelt.

E:root 

Mit dem folgenden Codebeispiel wird ein E-Element ausgewählt, bei dem es sich um das n-te untergeordnete Element des zugehörigen übergeordneten Elements handelt.

E:nth-child(n)

Mit dem folgenden Codebeispiel wird ein E-Element ausgewählt, bei dem es sich um das n-te untergeordnete Element des zugehörigen übergeordneten Elements handelt, gezählt ab dem letzten.

E:nth-last-child(n) 

Mit dem folgenden Codebeispiel wird ein E-Element ausgewählt, bei dem es sich um das n-te gleichgeordnete Element seines Typs handelt.

E:nth-of-type(n) 

Mit dem folgenden Codebeispiel wird ein E-Element ausgewählt, bei dem es sich um das n-te gleichgeordnete Element seines Typs handelt, gezählt ab dem letzten.

E:nth-last-of-type(n)

Mit dem folgenden Codebeispiel wird ein E-Element ausgewählt, bei dem es sich um das letzte untergeordnete Element des zugehörigen übergeordneten Elements handelt.

E:last-child 

Mit dem folgenden Codebeispiel wird ein E-Element ausgewählt, bei dem es sich um das erste gleichgeordnete Element seines Typs handelt.

E:first-of-type 

Mit dem folgenden Codebeispiel wird ein E-Element ausgewählt, bei dem es sich um das letzte gleichgeordnete Element seines Typs handelt.

E:last-of-type 

Mit dem folgenden Codebeispiel wird ein E-Element ausgewählt, bei dem es sich um das einzige untergeordnete Element des zugehörigen übergeordneten Elements handelt.

E:only-child

Mit dem folgenden Codebeispiel wird ein E-Element ausgewählt, bei dem es sich um das einzige gleichgeordnete Element seines Typs handelt.

E:only-of-type

Mit dem folgenden Codebeispiel wird ein E-Element ausgewählt, das keine untergeordneten Elemente (einschließlich Textknoten) aufweist.

E:empty
Die "target"-Pseudoklasse

Die target-Pseudoklasse wählt das Zielelement des verweisenden URI aus. Eine Fragment-ID identifiziert eine Stelle auf einer Seite; sie besteht aus einem Nummernzeichen (#) gefolgt von einer Anker-ID, z. B. "http://www.example.com/mypage.html#section_3".

Mit dem folgenden Codebeispiel wird das div-Element der Klasse important ausgewählt, bei dem es sich um das Zielelement des verweisenden URI handelt. Wenn der Dokument-URI keine Fragment-ID aufweist, ist kein Zielelement vorhanden.

div.important:target
Pseudoklassen für Benutzerelementstatus

Die Pseudoklassen für Benutzerelementstatus werden zum Auswählen von Benutzeroberflächenelementen (Formularsteuerelemente wie Optionsfelder oder Kontrollkästchen) verwendet, die sich in einem bestimmten Zustand befinden, z. B. aktiviert oder deaktiviert sind.

Mit dem folgenden Codebeispiel wird ein Formularsteuerelement E ausgewählt, das aktiviert ist.

E:enabled

Mit dem folgenden Codebeispiel wird ein Formularsteuerelement E ausgewählt, das deaktiviert ist.

E:disabled 

Mit dem folgenden Codebeispiel wird ein Formularsteuerelement E ausgewählt, das aktiviert ist.

E:checked 

Die : indeterminate-Pseudoklasse wählt Optionsfelder und Kontrollkästchen aus, deren Umschaltstatus nicht ermittelt werden können, d. h., sie sind weder aktiviert noch deaktiviert. Mit dem folgenden Codebeispiel wird ein Formularsteuerelement E ausgewählt, dessen Status nicht ermittelt werden kann.

E:indeterminate

Hinweis   Die :indeterminate-Pseudoklasse ist in der aktuellen CSS3-Spezifikation nicht mehr definiert, wird aber in vielen häufig verwendeten Browsern unterstützt.

Die "negation"-Pseudoklasse

Die negation-Pseudoklasse verwendet einen einfachen Selektor als Argument, um Elemente auszuwählen, die von diesem Argument nicht ausgewählt werden. Mit dem folgenden Codebeispiel wird ein E-Element ausgewählt, das nicht mit dem einfachen Selektor s übereinstimmt:

E:not(s)
Das Pseudoelement für Elementfragmente

Das Pseudoelement für Elementfragmente, ::selection, wird zum Auswählen eines beliebigen Bereichs einer Seite verwendet, der vom Benutzer markiert wurde, einschließlich Text in einem bearbeitbaren Textfeld. Dieses Pseudoelement kann auf die Eigenschaften color und background-color angewendet werden. Mit dem folgenden Codebeispiel wird ein vom Benutzer markierter Text in einem E-Element ausgewählt.

E::selection 

Hinweis   Das ::selection-Pseudoelement ist in der aktuellen CSS3-Spezifikation nicht mehr definiert, wird aber in vielen häufig verwendeten Browsern unterstützt.

Weitere CSS-Funktionen

In Internet Explorer 9 wurde in begrenztem Umfang Unterstützung für das sich in der Phase "Working Draft" (Entwurf als Arbeitsgrundlage) befindliche CSSOM-Modul für die Anzeige implementiert.

CSSOM-Modul für die Anzeige

Das CSSOM-Modul für die Anzeige definiert APIs, mit denen Webentwickler die visuellen Eigenschaften eines Dokuments und seiner Inhalte (einschließlich Positionierung von Layoutfeldern, Viewportbreite und Bildlauf von Elementen) untersuchen und programmgesteuert ändern können. In Internet Explorer 8 wurde eine begrenzte Unterstützung für dieses Modul eingeführt. Internet Explorer 9 erweitert die Unterstützung auf weitere APIs dieses Moduls:

Daten-URIs

Mithilfe von Daten-URIs können Daten direkt in den Kontext einer Webseite eingebettet werden. Das gängigste Beispiel hierfür ist ein winziges, in eine Webseite eingebettetes Bild, wie im folgenden Codebeispiel dargestellt:

data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP

Bei der Platzierung in das src-Attribut eines img-Elements wird das Bild tatsächlich im Markup der Seite eingebettet. In Internet Explorer 8 wurden Daten-URIs für Internet Explorer eingeführt.

Mit Internet Explorer 9 können Entwickler nun einen Daten-URI im src-Attribut eines script-Elements verwenden. Des Weiteren wurde die Größenbeschränkung für Daten-URIs von 32 Kilobyte (KB) in Internet Explorer 8 auf 4 Gigabyte (GB) in Internet Explorer 9 angehoben.

Verbesserungen des Dokumentobjektmodells (DOM)

Internet Explorer 9 bietet Unterstützung für ein deutlich verbessertes Dokumentobjektmodell (DOM). Neben der erweiterten Unterstützung für W3C (World Wide Web Consortium)-DOM Level 2 (L2) und Level 3 (L3) weist Internet Explorer 9 ein erweitertes DOM sowie eine verbesserte Verarbeitung von Leerzeichen auf.

Einführung in das erweiterte DOM

Das erweiterte DOM in Internet Explorer 9 steigert die Gesamtleistung des Internet Explorer 9-Standards-Modus (IE9-Modus) durch Beschleunigung der Schicht für die Skriptausführung zwischen "Chakra", dem neuen JavaScript-Modul, und dem Layoutmodul "Trident" sowie durch Verschieben der Einstiegspunkte des DOM in das Modul "Chakra". Weitere Informationen zum IE9-Modus finden Sie in diesem Dokument unter Verbesserte Interoperabilität durch Unterstützung von Standards. Das erweiterte DOM stellt zudem gleichzeitig die richtige Vererbungshierarchie der DOM-Objekte bereit wie durch die Spezifikationen für W3C-DOM L2 und L3 angegeben.

Den verbesserten DOM-Objekttypen wird nun in den Entwicklertools (F12) Rechnung getragen, wenn Seiten im Internet Explorer 9-Standards-Modus ausgeführt werden. (Weitere Informationen zu den neuen Entwicklertools (F12) in Internet Explorer 9 finden Sie in diesem Dokument unter Entwicklertools (F12).) Statt COM-basierte Legacytypen (bestehend aus einer Reihe von Schnittstellen und Disp-Objekten) anzuzeigen, melden Seiten im IE9-Modus die eigentlichen erweiterten Namen der DOM-Objekttypen, die vom Modul "Chakra" verwendet werden, das auf die W3C-DOM L2 und L3-Standards ausgerichtet ist (z. B. NodeList, DocumentType, HTMLBodyElement usw.).

Das erweiterte DOM in Internet Explorer 9 stellt einen bedeutenden Fortschritt hinsichtlich der Interoperabilität zwischen Internet Explorer 9 und anderen Browsern dar. Zudem ermöglicht es gleichzeitig Leistungssteigerungen in vielen Szenarien, die hauptsächlich auf DOM-Objekte zurückzuführen sind, die als systemeigene JavaScript-Objekte dargestellt werden.

Das verbesserte DOM weitet zahlreiche neue Funktionen des neuen JavaScript-Moduls "Chakra" auf die Objekte und APIs aus, die vom DOM bereitgestellt werden, u. a.:

  • Selektive DOM-Objekterweiterbarkeit (über Object.preventExtensions)
  • DOM-API-Änderbarkeit (durch Ändern der Eigenschaftendeskriptoren der DOM-API oder Löschen der Eigenschaften insgesamt)
  • JSON-Unterstützung für DOM-Objekte
  • Systemeigene JavaScript-Objektfeatures mittels Vererbung (hasOwnProperty, toString usw.)
  • Systemeigene JavaScript-Funktionsfeatures mittels Vererbung (call, apply, bind)

Durch diese Features werden die Programmierfunktionen für die systemeigenen Objekte des JavaScript-Moduls und das DOM vereinheitlicht. Zudem wurden die folgenden neuen DOM-Funktionen hinzugefügt:

  • W3C-DOM-Ausnahmen: DOM-Ausnahmen sind neue Typen von Fehlerobjekten, die bei DOM-API-Fehlern ausgelöst werden. Die Fehlercodes für diese Ausnahmen entsprechen Konstanten, die in der Ausnahme selbst definiert sind.
  • W3C-DOM-Eigenschaften für Konstanten (z. B. Node.ELEMENT_NODE): Die Eigenschaften für Konstanten bestehen aus einfachen Feldern, in denen Namen für viele allgemeine numerische Rückgabewerte von anderen DOM-APIs angegeben sind. Die Zahl, die von der DOM-API nodeType zurückgegeben wird, kann z. B. mit der Konstante verglichen werden, um besser lesbaren Code zu erstellen: if (myElement.nodeType == Node.ELEMENT_NODE)

Analysieren von XML im DOM und Serialisieren von XML im und vom DOM

Obwohl in Internet Explorer bereits Unterstützung für das Analysieren von XML im DOM sowie das Serialisieren von XML im und vom systemeigenen DOM bereitgestellt wurde, gab es bislang keine einfache Möglichkeit für Skripts, von HTML-Dokumenten aus auf diese Funktion zuzugreifen. Aus diesem Grund bietet Internet Explorer 9 Unterstützung für die Schnittstellen DOMParser und XMLSerializer. Diese Schnittstellen werden auch von anderen beliebten Browsern häufig unterstützt.

Das folgende Skriptbeispiel zeigt, wie eine Zeichenfolge mithilfe der Schnittstelle DOMParser in ein XML-Dokument analysiert wird:

var parser = new DOMParser();
var doc = parser.parseFromString("<test>Some XML</test>", "text/xml");

Das folgende Skriptbeispiel zeigt, wie ein DOM-Knoten (einschließlich Knoten aus HTML-Dokumenten) mithilfe der Schnittstelle XMLSerializer in eine XML-Zeichenfolge serialisiert wird:

var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(doc);

Dokumentobjektmodell (DOM) Level 2 und Level 3

Internet Explorer 9 bietet Unterstützung für mehr Bereiche des Dokumentobjektmodells Level 2 (DOM-L2) und Level 3 (DOM-L3) und verbessert die Unterstützung für DOM-L2 bei vorhandenen Implementierungen in Internet Explorer. Zudem bietet der Browser Unterstützung für die WebIDL Working Draft-Spezifikation.

Internet Explorer 9 unterstützt die folgenden DOM-Funktionen:

DOM-Core (L2 und L3) und DOM-Ansichten (L2)

Internet Explorer 9 bietet Unterstützung für viele neue DOM-L2-Core-APIs, u. a. die folgenden:

Zudem bietet der Browser interoperable Unterstützung für DOM-Namespaces, z. B. Unterstützung für *NS-Methoden und namespacebezogene Eigenschaften (createElementNS, namespaceURI, localName, prefix und weitere). Internet Explorer 9 bietet auch Unterstützung für viele der am häufigsten verwendeten DOM-L3-Core-Methoden und -Eigenschaften:

  • adoptNode
  • compareDocumentPosition
  • CDATASection
  • importNode
  • inputEncoding
  • isDefaultNamespace
  • isEqualNode
  • isSameNode
  • isSupported
  • lookupNamespaceURI
  • lookupPrefix
  • replaceWholeText
  • textContent
  • xmlEncoding
  • xmlStandalone
  • xmlVersion
  • wholeText

Internet Explorer 9 unterstützt vollständig beide Eigenschaften für DOM-L2-Ansichten.

Weitere Informationen finden Sie in der Referenz zu DOM-Core und -Ansichten auf MSDN.

DOM-Elementdurchlauf

Die Spezifikation zum Elementdurchlauf definiert die ElementTraversal-Schnittstelle. Diese Schnittstelle ermöglicht die Navigation per Skript durch die Elemente in einer DOM-Struktur, z. B. Elementknoten in HTML-, XML- oder SVG-Dokumenten. Internet Explorer 9 bietet Unterstützung für die ElementTraversal-Schnittstelle und die fünf zugehörigen Eigenschaften.

DOM-L2- und DOM-L3-Ereignisse

Die Spezifikationen zu DOM-Ereignissen beschreiben das DOM-Ereignissystem, das die Registrierung von Ereignishandlern ermöglicht, den Fluss von Ereignissen durch eine Dokumentstruktur beschreibt und Kontextinformationen für Ereignisse definiert. Weitere Informationen zu diesem Ereignismodell finden Sie unter Grundlegendes zum Ereignismodell auf MSDN.

Eines der Ziele des Ereignissystems in Internet Explorer 9 ist die Ausrichtung am vom W3C spezifizierten interoperablen System. Dadurch können Sie vom proprietären attachEvent-Modell von Internet Explorer abrücken, d. h., es ist nicht länger erforderlich, im Code Verzweigungen für unterschiedliche Browser vorzusehen.

Hinweis   DOM-Mutationsereignisse sind der Vollständigkeit halber enthalten, sind im W3C-Standard aber veraltet.

DOM-L2-HTML

Internet Explorer 9 bietet Unterstützung für DOM-L2-HTML-APIs, die in früheren Versionen von Internet Explorer nicht verfügbar waren, z. B. APIs in HTML5 wie getElementsByClassName und characterSet. Internet Explorer 9 hat das Objektmodell in Tabellen verbessert, insbesondere in Bezug auf DOM-Vorgänge zum Hinzufügen oder Entfernen von Elementen.

getElementsByClassName

Die getElementsByClassName-Methode gibt alle Elementknoten zurück, die Klassenattribute aufweisen, die der Eingabezeichenfolge entsprechen. Die Methode funktioniert ähnlich wie die getElementsByTagName-Methode.

characterSet

Das characterSet-Attribut gibt den bevorzugten MIME-Namen der Zeichencodierung des aktuellen Dokuments zurück.

DOM-L2-Format

Die Spezikation zum DOM-L2-Format definiert APIs für das programmgesteuerte Zugreifen auf und das Ändern der Formate einzelner Elemente sowie ganzer Stylesheets durch Entfernen oder Ändern von Regeln. Frühere Versionen von Internet Explorer konnten diese Tasks mithilfe proprietärer Methoden ausführen; Internet Explorer 9 bietet Unterstützung für in der Spezifikation zu DOM-L2-Format definierte standardisierte APIs. Zudem bietet der Browser Unterstützung für standardisierte APIs, für die es keine Entsprechung in Internet Explorer gibt, z. B. die getComputedStyle-Methode. Ein praktisches Beispiel für die getComputedStyle-Methode finden Sie auf der Website mit der Internet Explorer-Testversion.

Weitere Informationen finden Sie unter DOM-Format auf MSDN.

DOM-L2-Durchlauf und -Bereich

Der Abschnitt Range der Spezifikation zu DOM-L2-Durchlauf und -Bereich definiert eine allgemeine Methode der Auswahl von Dokumentinhalt zwischen einem Paar von Grenzpunkten. Grenzpunkte werden von einem Container (dem übergeordneten Element, das den Punkt enthält) und einem Offset (der Stelle im Container, an der sich der Punkt befindet) angegeben. Zusammen mit der Selection-Schnittstelle in HTML5 werden über DOM Range Funktionen wie zum programmgesteuerten Abrufen eines Bereichs, zum Auswählen untergeordneter Elemente und zum Löschen einer Auswahl bereitgestellt.

Internet Explorer 9 bietet Unterstützung für alle DOM-L2-Range-APIs sowie alle Auswahl-APIs in HTML5 wie die bereits häufig verwendete setSelectionRange-Methode.

Weitere Informationen finden Sie unter DOM-Bereich auf MSDN.

Der Abschnitt Traversal der Spezifikation zu DOM-L2-Durchlauf und -Bereich definiert eine Methode zum Navigieren in einem Dokument und bei Bedarf zum Filtern von Knoten. Internet Explorer 9 bietet Unterstützung für beide Methoden des Durchlaufens des DOM (NodeIterator und TreeWalker) sowie für die beiden Methoden zum Filtern von Knoten (whatToShow und NodeFilter), die in der W3C-Spezifikation definiert sind.

Weitere Informationen finden Sie unter DOM-Durchlauf auf MSDN.

Verarbeitung von Leerzeichen im DOM

Die Darstellung von Leerzeichen im DOM wurde bisher in Internet Explorer anders verarbeitet als in anderen Browsern. Die fehlende Interoperabilität in diesem Bereich wurde von Webentwicklern als frustrierend empfunden. In früheren Versionen wurden Leerzeichen in Internet Explorer reduziert und nicht in Textknoten im DOM eingefügt. In Internet Explorer 9 bleiben Leerzeichen erhalten und werden in Textknoten im DOM platziert. Dies entspricht den Erwartungen. Dieses Verhalten ist mit dem anderer verbreiteter Browser konsistent.

ECMAScript 5

In Internet Explorer 9 werden Erweiterungen der Funktion für die Sprache JavaScript eingeführt, und die Leistung von JavaScript wurde verbessert. Im Dezember 2009 hat ECMA die fünfte Ausgabe von ECMA-262 als Nachfolger der dritten Ausgabe genehmigt (eine vierte Ausgabe wurde nicht veröffentlicht). Im selben Jahr hat Microsoft Unterstützungselemente für ECMAScript 5 (ES5) eingeführt, indem die systemeigene JSON-Unterstützung und Accessor-Unterstützung Support für DOM-Objekte zu Internet Explorer 8 hinzugefügt wurde. ES5 enthält jedoch nicht nur Unterstützung für JSON und DOM-Accessor, sondern auch Standards für zahlreiche wesentliche Erweiterungen der Sprache JavaScript.

In Internet Explorer 9 wurden zahlreiche wichtige Funktionen gemäß ECMAScript 5 implementiert, darunter die folgenden:

In Internet Explorer 9 werden außerdem mehrere Probleme behoben, die in den vorherigen Implementierungen von JavaScript in Internet Explorer vorhanden waren. Weitere Informationen finden Sie im Internet Explorer-Teamblog. Eine praktische Demo der ECMAScript 5-Unterstützung finden Sie auf der Website mit der Internet Explorer-Testversion.

HTML5

In Internet Explorer 8 wurde die Unterstützung einiger Funktionen der HTML5 Working Draft-Spezifikation eingeführt. Dazu gehört Folgendes:

Internet Explorer 9 baut auf der Arbeit hinsichtlich der Einhaltung von HTML5 auf, die in Internet Explorer 8 geleistet wurde, und umfasst die folgenden neuen Funktionen:

Hinweis  Beachten Sie, dass sich die HTML5-Spezifikation zum Erstellungszeitpunkt dieses Dokuments noch in der Phase "Working Draft" (Entwurf als Arbeitsgrundlage) befindet. Bis sie die Phase "Candidate Recommendation" (Empfehlungskandidat) erreicht, werden ggf. noch zahlreiche Änderungen vorgenommen. Weitere Informationen finden Sie im aktuellen HTML5 Working Draft.

HTML5 Geolocation

In Internet Explorer 9 wird erstmals die Geolokalsierung unterstützt. Mithilfe der Geolocation-API kann eine Webanwendung den aktuellen geografischen Standort des PCs mit Internet Explorer abrufen. Die Webseite kann dann an den Standort des Benutzers angepasst werden, z. B. können seine Position auf einer Karte oder aktuelle lokale Informationen wie Wetter oder Nachrichten angezeigt werden. Standortdaten werden in Längen- und Breitenangaben zurückgegeben. Die Geolocation-APIs in Internet Explorer 9 entsprechen den Standards der Geolocation-API-Spezifikation.

Auf der Website Internet Explorer 9-Testversion können Sie die Geolokalisierung in Aktion erleben.

Weitere Informationen zur Geolokalisierung finden Sie auf MSDN.

"video"- und "audio"-Elemente in HTML5

Zwei der am sehnlichsten erwarteten HTML5-Funktionen, die jetzt von Internet Explorer 9 unterstützt werden, sind die neuen video- und audio-Elemente. Die Elemente video und audio sind im Abschnitt Embedded Content (Eingebettete Inhalte) der HTML5-Spezifikation definiert.

Im Wesentlichen ermöglichen die Elemente video und audio das Einbetten von Video- und Audioinhalten in eine HTML-Seite. Webentwickler können für die beiden Elemente außerdem mehrere Attribute angeben. Werfen Sie beispielsweise einen Blick auf das folgende Markup:

<video width="400"
    height="300"
    src="video.mp4"
    poster="frame.png"
    autoplay
    controls
    loop>
    This content appears if the video tag or the codec is not supported.
</video>

In Internet Explorer 9 wird hiermit in einem Bereich der Größe 400×300 (definiert durch die Attribute width und height) die Bilddatei "frame.png" (angegeben durch das Attribut poster) angezeigt, während der Videoinhalt geladen wird. Die Videodatei "video.mp4" (Attribut src) wird beim Laden der Seite automatisch wiedergegeben (Attribut autoplay), und es werden Steuerelemente für die Videoausgabe angezeigt (Attribut controls). Wenn das Video zu Ende ist, wird es wiederholt (Attribut loop). Wenn das Videoformat nicht unterstützt wird, wird stattdessen der Text im Element video ("This content appears …") angezeigt. Das Element video unterstützt außerdem das Element preload, das dem Browser die Information bereitstellt, wie nach Ansicht des Webentwicklers die Benutzerfreundlichkeit optimiert werden kann.

Ein praktisches Beispiel für das Element video finden Sie in der Demo Videopanorama auf der Website mit der Internet Explorer-Testversion.

Internet Explorer 9 unterstützt außerdem das Element video mit mehreren Quellen, die jeweils durch das untergeordnete Element source angegeben werden. Werfen Sie beispielsweise einen Blick auf das folgende Markup:

<video width="400" height="300" poster="frame.png" autoplay controls loop>
    <source src="video.ogv" type='video/ogg; codecs="theora,
     vorbis"'>
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,
     mp4a.40.2"'>
</video>

Hier wählt Internet Explorer 9 das erste unterstützte Format in der Auflistung aus (in diesem Fall das zweite source-Element) und gibt die zugeordnete Quelldatei wieder.

Das Element audio ist ähnlich definiert wie das Element video, jedoch ohne die Attribute width, height und poster. Ein praktisches Beispiel für das Element audio finden Sie auf der Website mit der Internet Explorer-Testversion.

Internet Explorer 9 unterstützt die folgenden Inhaltsformate:

ElementnameUnterstützte Formate
video

MP4-Container, H.264-Video, Audio für alle Profile in AAC oder MP3

WebM-Video, sofern der VP8-Codec installiert ist

audioAAC oder MP3

Weitere Informationen finden Sie im Thema zu Video und Audio in HTML5 in MSDN.

canvas-Element in HTML5

Ein weiteres sehnlich erwartetes Element von HTML5 in Internet Explorer 9 ist das Element canvas, das in Verbindung mit der Canvas 2D-API verwendet wird. Das Element canvas, das in der HTML5-Spezifikation definiert ist, ermöglicht das Rendering von Grafiken auf einem von der Auflösung abhängigen Bitmaphintergrund (Canvas). Zum Zeichnen auf die Canvas werden "Kontexte" verwendet, z. B. der Canvas 2D-Kontext, der in der Spezifikation für die Canvas 2D-API des W3C beschrieben wird. In Internet Explorer 9 wird die Unterstützung für das Element canvas eingeführt, wobei die 2D Canvas Drawing-API als Kontext verwendet wird. (In Internet Explorer 9 wird der Canvas 2D-Kontext durch das CanvasRenderingContext2D-Objekt oder die ICanvasRenderingContext2D-Schnittstelle dargestellt.) Wie alle Grafikfunktionen in Internet Explorer 9 bezieht sich canvas auf Hardware, die durch Verwendung von Windows und dem Grafikprozessor (Graphics Processing Unit, GPU) beschleunigt wird.

Die Canvas ermöglicht Szenarien zum Zeichnen von Rechtecken, Pfaden, Linien, Füllungen, Bögen sowie Bézierkurven und Kurven anhand quadratischer Gleichungen. Außerdem unterstützt das Element canvas in Internet Explorer 9 die Attribute width und height. (Der Standardwert für "width" beträgt 300 Pixel, der für "height" 150 Pixel, und die Standardfarbe ist transparentes Schwarz.)

Die Canvas stellt eine Möglichkeit zum Programmieren von Grafiken im Web dar. Das Tag canvas stellt eine zweidimensionale Fläche, auf die gezeichnet werden kann, im "unmittelbaren Modus" dar (Zeichnungsbefehle werden direkt an die Grafikhardware gesendet). Auf dieser Fläche können Sie Echtzeitgraphen, Animationen oder interaktive Spiele darstellen, ohne ein separates Plug-In herunterladen zu müssen. Mithilfe der APIs, die im CanvasRenderingContext2D-Objekt definiert sind, ermöglicht die Canvas Szenarien für das Zeichnen, die Folgendes umfassen:

Mit JavaScript können Sie Canvaszeichnungen animieren oder interaktive Benutzeroberflächen erstellen, die auf Tastatureingaben, Mausklicks oder beliebige Browserereignisse reagieren können. So werden in diesem Beispiel auf der Website mit der Internet Explorer-Testversion mit wenigen Zeilen JavaScript-Code zufällig platzierte und eingefärbte leuchtende Linien erzeugt.

Das Element "canvas" in Internet Explorer 9 unterstützt die Attribute "width" und "height". (Der Standardwert für "width" beträgt 300 Pixel, der für "height" 150 Pixel, und die Standardfarbe ist transparentes Schwarz.)

Internet Explorer 9 unterstützt die folgenden Canvas 2D Context-APIs (vom CanvasRenderingContext2D-Objekt verfügbar gemachte Elemente):

Eine detailliertere Einführung in die HTML5-Canvas in Internet Explorer 9 finden Sie auf MSDN. Besuchen Sie außerdem die Website mit der Internet Explorer-Testversion, um weitere Demos des Elements canvas anzuzeigen. Technische Informationen zum canvas-Element in Internet Explorer 9 finden Sie auf der Referenzseite für das Element canvas auf MSDN.

Verbesserungen bei der HTML-Analyse

Die HTML-Analyse wurde in Internet Explorer 9 verbessert, um stärker dem Verhalten zu entsprechen, das in der HTML5 Draft-Spezifikation beschrieben wird.

Analysieren von SVG in HTML

Internet Explorer 9 unterstützt SVG mit direkter Einbettung in HTML. Weitere Informationen zu SVG finden Sie unter Skalierbare Vektorgrafiken (Scalable Vector Graphics, SVG) in diesem Handbuch.

Analysieren von XHTML

In Internet Explorer 9 werden Dokumente mit dem MIME-Typ application/xhtml+xml als XHTML analysiert.

Generische Elemente

In früheren Versionen von Internet Explorer wurden nicht erkannte Elemente als "unbekannte" Elemente analysiert. Diese Elemente wurden flach dargestellt, sodass die normalen CSS-Formatregeln nicht auf sie angewendet wurden. Dies entsprach nicht der HTML5 Draft-Spezifikation. In Internet Explorer 9 ist dieses Verhalten anders: Nicht erkannte Elemente werden als "generische" Elemente analysiert, sodass sie wie normale Elemente funktionieren können. Damit erübrigen sich Problemumgehungen seitens der Entwickler, z. B. das Aufrufen von document.createElement, um die Erkennung eines Elements durch Internet Explorer zu erzwingen.

Es folgt ein einfaches Beispiel für ein generisches Element, hier ein undefiniertes Element mit dem Namen mydiv.

<style type="text/css">
mydiv {
     color: blue;
     font-weight: bold;
}
</style>

...

<p>I am using a <mydiv>generic element</mydiv> in this sentence.</p>

Internet Explorer 8 ignoriert das mydiv-Tag und die zugehörigen CSS-Regeln. Dieser Satz wird wie folgt gerendert.

Internet Explorer 9 analysiert das mydiv-Tag erwartungsgemäß und rendert den Satz wie folgt.

Überlappende Tags

Wenn Ihr HTML-Code überlappende Tags enthält, werden diese in Internet Explorer 8 und früheren Versionen nicht beim Analysieren aufgelöst. Dieses Verhalten entspricht nicht der HTML5 Draft-Spezifikation. Wenn Sie Elementüberlappungen zu Skriptzwecken verwenden (wie hier veranschaulicht), können verwirrende Skriptfehler das Ergebnis sein. Internet Explorer 9 entspricht der HTML5 Draft-Spezifikation und löst überlappende Tags beim Analysieren auf.

Es folgt ein einfaches Beispiel für ein Skript, in dem Text zwischen überlappenden i-und b-Tags rot dargestellt wird.

<script type="text/javascript">
function load()
{
     var elms = document.getElementsByTagName("i");
     for(var i = 0; i < elms.length; i++)
     {
          var elm = elms[i];
           if(elm.parentNode.tagName.toLowerCase() == "b")
                elm.style.color = "red";
     }
}
</script>

...

<body onload="load();">
You should be aware of how <b>this <i>affects</b> script</i>.
</body>

In Internet Explorer 8 und früher wird dieses Markup nicht wie erwartet gerendert.

In Internet Explorer 9 hingegen wird das Markup wie erwartet gerendert.

Änderungen der Analyse von Skript- und Formatblöcken

In Internet Explorer 8 und früheren Versionen wird Text in einem script- oder style-Block nicht dauerhaft in Textknoten im DOM geschrieben. In Internet Explorer 9 wird Text in script- oder style-Blöcken dauerhaft als Textknoten in das DOM geschrieben. Dies entspricht den Erwartungen. Somit wird Quellcode im DOM in Form eines Textknotens verfügbar gemacht, und Sie können ihn mit Skripts bearbeiten.

Auswahl-APIs in HTML5

In Internet Explorer 9 werden drei Textauswahl-APIs in HTML5 erstmals unterstützt. Das Selection-Objekt stellt eine Liste von Range-Objekten dar, die durch die neue Unterstützung für DOM-L2-Range in Internet Explorer 9 möglich werden. Weitere Informationen finden Sie unter Verbesserungen des Dokumentobjektmodells (DOM) an früherer Stelle in diesem Dokument.

getSelection-Methode

Die getSelection-Methode gibt das Selection-Objekt für das Fenster zurück. Dieses stellt den aktuell ausgewählten Text dar.

Eigenschaft "selectionStart"

Die Eigenschaft selectionStart ruft den Offset bis zum Anfang des aktuell ausgewählten Texts ab und kann außerdem den Anfang der Auswahl festlegen.

Eigenschaft "selectionEnd"

Die Eigenschaft selectionEnd ruft den Offset bis zum Ende des aktuell ausgewählten Texts ab und kann außerdem das Ende der Auswahl festlegen.

Semantische HTML5-Elemente

Internet Explorer 9 verbessert die Unterstützung für verschiedene semantische HTML5-Elemente. Ein "semantisches" Element ist in diesem Kontext als Element definiert, dessen Tag-Name den Inhalt beschreibt. Es weist jedoch keine besonderen Verhaltensweisen auf. Semantische Tags sind besonders für die Barrierefreiheit hilfreich.

Internet Explorer 9 ändert die Unterstützung für semantische Elemente wie folgt:

  • Die Elemente erben jetzt von der HTMLElement-Schnittstelle und nicht mehr von der HTMLUnknownElement-Schnittstelle, wie in der HTML5-Spezifikation festgelegt.
  • Standardmäßig werden die Elemente jetzt entsprechend den Angaben in der HTML5-Spezifikation formatiert.

Folgende semantische Elemente werden jetzt erkannt:

  • section
  • nav
  • article
  • aside
  • hgroup
  • header
  • footer
  • figure
  • figcaption
  • mark

ICC-Farbprofile

Das International Color Consortium (ICC) veröffentlicht Farbprofile, in denen Farbattribute von Software und Hardware beschrieben werden.

In Internet Explorer 9 wird die Unterstützung für Farbprofile gemäß ICC v2 und v4 für Bilder eingeführt, wie in den ICC-Spezifikationen beschrieben.

Selectors API Level 2

In der Selectors API Level 2-Spezifikation wird ein Satz von Anwendungsprogrammierschnittstellen (APIs) definiert, mit dem Sie Selektoren im Dokumentobjektmodell (DOM) auswerten können.

In Internet Explorer 8 sind die Selektor-APIs querySelector und querySelectorAll implementiert. In Internet Explorer 9 wurde die Unterstützung für die Methode msMatchesSelector hinzugefügt.

Skalierbare Vektorgrafiken (Scalable Vector Graphics, SVG)

Die Unterstützung skalierbarer Vektorgrafiken (SVG) ist eine der Funktionen, deren Implementierung in Internet Explorer besonders häufig angefragt wurde. Sie bietet eine leistungsstarke Möglichkeit, originalgetreue, leicht skalierbare visuelle Elemente zu einer Website hinzuzufügen (von kleinen einfachen Elementen bis hin zu großen komplexen Elementen), ohne dass ein Plug-In oder separater Viewer erforderlich ist.

In Internet Explorer 9 führt Microsoft die Unterstützung des grundlegenden Satzes von SVG-Funktionen ein. Die SVG-Unterstützung in Internet Explorer 9 basiert auf der Spezifikationsempfehlung SVG 1.1 (Second Edition) (für Desktopbrowser). Folgende Funktionalität wurde implementiert:

  • Die meisten Aspekte der SVG-Dokumentstruktur, Interaktivität (Skriptereignisse) und Formate (inline und über CSS)
  • Viele Präsentationselemente und die zugehörigen Attribute und DOM-Schnittstellen, einschließlich folgender:
    • Grundlegende Formen
    • Füllungen, Umrandungen (Stroking), Marker und Farbe
    • Farbverläufe und Muster
    • Pfade
    • Text

Internet Explorer 9 unterstützt die folgenden Anzeigemethoden für SVG-Markup:

  • SVG-Fragmente in HTML5-Einbettung ohne Verwendung eines fremden Objekts (d. h. einfaches Einschließen eines <svg>-Tags in den HTML-Code)
  • SVG als vollständiger Dokumenttyp (mit Dateierweiterung SVG)
  • SVG in XML oder XHTML (ähnlich der HTML5-Methode, aber mit XML- oder XHTML-Dateien)
  • SVG als CSS-Bild
  • SVG mit dem Element object, wie im folgenden Beispiel (beachten Sie die Attribute type, height und width):
    <object data="rect2.svg" width="100%" height="400px"
        type="image/svg+xml"></object>

  • SVG mit den Elementen img, embed, iframe oder frame, wie im folgenden Beispiel:
    <embed id="Smiley" src="smiley.svg" type="image/svg+xml">

Weitere Informationen zu SVG-Unterstützung in Internet Explorer 9 finden Sie auf MSDN.

Weitere Informationen zu SVG finden Sie auf der Referenzseite für das Element svg in MSDN.

Grundlegende Formen

In Internet Explorer 9 wird die Unterstützung für das Analysieren und Rendern aller grundlegenden Formelemente, ihrer Attribute und der zugehörigen DOM-Schnittstellen eingeführt, wie im Modul zu grundlegenden Formen der Spezifikation SVG 1.1 (Second Edition) beschrieben. Der von Internet Explorer 9 unterstützte Satz grundlegender Formen umfasst die folgenden Formelemente:

Internet Explorer 9 unterstützt auch die zugehörigen DOM-Schnittstellen dieser Elemente.

Es folgen Beispiele für oben genannten Elemente. Nach dem Markup folgt ein Screenshot des entsprechenden Ergebnisses in Internet Explorer 9.

Rechtecke: Element "rect"
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<rect fill="orange"
    stroke="black"
    width="150"
    height="75"
    x="50"
    y="25" />


</svg>

<rect fill="orange"
    stroke="black"
    width="150"
    height="100"
    x="50"
    y="25"
    rx="10"
    ry="50"/>

Weitere Informationen finden Sie auf der Referenzseite für das Element rect auf MSDN.

Kreise: Element "circle"
<circle fill="orange"
    stroke="black"
    stroke-width="3"
    cx="40"
    cy="25"
    r="20"/>

Weitere Informationen finden Sie auf der Referenzseite für das Element circle auf MSDN.

Ellipsen: Element "ellipse"
<ellipse stroke="orange"
    cx="100"
    cy="60"
    rx="75"
    ry="50"/>

Weitere Informationen finden Sie auf der Referenzseite für das Element ellipse auf MSDN.

Linien: Element "line"
<!-- vertical -->
<line x1="0.7cm"
    y1="1cm"
    x2="0.7cm"
    y2="2.0cm"
    style="stroke:
    blue;"/>


<!-- diagonal -->
<line x1="30"
    y1="30"
    x2="150"
    y2="85"
    stroke="red"
    stroke-width="4"/>


<!-- horizontal -->
<line x1="50pt"
    y1="25pt"
    x2="150pt"
    y2="25pt"
    stroke="yellow"
    stroke-width="3"/>

Weitere Informationen finden Sie auf der Referenzseite für das Element line auf MSDN.

Polylinien: Element "polyline"

Eine Polylinie wird in SVG definiert als eine Form, die aus mehreren miteinander verbundenen Linien besteht. Sie bildet häufig eine offene Form oder ein Polygon mit mindestens einer fehlenden Seite oder nicht konvexen Formen.

<polyline points="15, 5, 100 8,3 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

Weitere Informationen finden Sie auf der Referenzseite für das Element polyline auf MSDN.

Polygone: Element "polygon"

Ein Polygon bildet eine geschlossene Form.

<polygon points="15, 5, 100 8,6 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

Weitere Informationen finden Sie auf der Referenzseite für das Element polygon auf MSDN.

Beschneiden (Clipping), Maskieren (Masking) und Zusammensetzen (Compositing)

Internet Explorer 9 unterstützt Beschneidungen, Beschneidungspfade, Maskierungen und Deckkraft gemäß SVG, wie im Modul zu Beschneiden, Maskieren und Zusammensetzen der Spezifikation SVG 1.1 (Second Edition) beschrieben. (SVG-Pfade werden im Abschnitt Pfade dieses Dokuments erörtert.)

Beschneiden

Ein Beschneidungspfad begrenzt oder "beschneidet" den Bereich, in den eine Farbe, ein Muster oder ein Bild gezeichnet werden kann. Alle Teile des grafischen Elements, die sich außerhalb des Beschneidungspfads befinden, werden nicht gezeichnet. Beschneidungspfade sind komplett undurchsichtig. Der Teil des grafischen Elements, der sich außerhalb des Beschneidungspfad befindet, ist nicht sichtbar.

In SVG werden mit den Eigenschaften overflow und clip anfängliche Beschneidungspfade eingerichtet, d. h. Formen, in denen Inhalt angezeigt werden soll. Standardmäßig ist der anfängliche Beschneidungspfad als SVG-Viewport definiert, d. h. als der rechteckige Bereich der Seite, in dem SVG-Inhalt angezeigt wird.

Mit dem Element clipPath wird ein Beschneidungspfad definiert. Auf den Beschneidungspfad wird dann mithilfe der Eigenschaft clip-path verwiesen. Die Eigenschaft clip-rule gilt für grafische Elemente innerhalb eines clipPath-Elements, und mit dem Attribut clipPathUnits wird ein Koordinatensystem für den Inhalt von clipPath definiert. Beschneidungspfade können auf Text sowie auf Farben, Muster und Bilder angewendet werden.

Auf die Beschneidungsfunktionalität kann programmgesteuert mit der DOM-Schnittstelle SVGClipPathElement zugegriffen werden.

Es folgt ein einfaches Beispiel für einen SVG-Beschneidungspfad.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="100">
<clipPath id="clip1">
    <circle id="clipShape" cx="60" cy="60" r="50" />
</clipPath>
<rect x="20" y="20" width="100" height="100" fill="blue"
    clip-path="url(#clip1)" />
</svg>

In diesem Beispiel wird das Element clipPath verwendet, um einen kreisförmigen Beschneidungspfad zu definieren. Dann wird die Eigenschaft clip-path verwendet, um den Beschneidungspfad auf ein Rechteck anzuwenden. Dies erzeugt in Internet Explorer 9 die folgende Ausgabe:

Maskieren

Eine Maske ähnelt einem Beschneidungspfad, ist jedoch halbtransparent. Masken werden häufig verwendet, um Vordergrundobjekte mit dem aktuellen Hintergrund zusammenzusetzen.

Eine Maske wird mit dem Element mask definiert. Auf die Maske wird dann mithilfe der Eigenschaft mask verwiesen.

Es folgt ein einfaches Beispiel für eine SVG-Maske.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 800 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example mask01 - three different colored circles used to mask the color of a rectangle
  </desc>
     <defs>
     <g id="circles">
            <g stroke="white" stroke-width="2" >
                <circle cx="100" cy="50" r="50" fill="rgb(255,0,0)" />
                <circle cx="50" cy="135" r="50" fill="rgb(0,255,0)" />
                <circle cx="150" cy="135" r="50" fill="rgb(0,0,255)" />
            </g>
        </g>       
        <mask id="myMask" >
            <use xlink:href="#circles" />
        </mask>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" fill="purple"
          mask="url(#myMask)" />
 </svg>

In diesem Beispiel wird die Eigenschaft mask verwendet, um eine Maske in Form von drei einander benachbarten Kreisen mit unterschiedlichen Farben zu definieren. Die Maske wird dann mithilfe der Eigenschaft mask auf ein violettes Rechteck angewendet. Dies erzeugt in Internet Explorer 9 die folgende Ausgabe:

Koordinatensysteme, Transformationen und Einheiten

In Internet Explorer 9 wird die Unterstützung für Koordinatensysteme, Transformationen und Einheiten gemäß SVG eingeführt, wie im Modul zu Koordinatensystemen, Transformationen und Einheiten des Spezifikationsentwurfs SVG 1.1 (Second Edition) beschrieben. Internet Explorer 9 unterstützt folgende Funktionen:

  • Einheiten und Prozentsätze.
  • Beliebige Transformationen für jedes Element sowie das Attribut transform.
  • Die Eigenschaften viewBox und preserveAspectRatio (einschließlich Interaktion mit der Eigenschaft overflow).
  • Unterstützung für Transformationen und Transformationslistentypen.

Internet Explorer 9 unterstützt auch die DOM-Schnittstellen für Koordinatensysteme und Transformationen gemäß SVG.

Dokumentstruktur

In Internet Explorer 9 wird die Unterstützung für die grundlegende Dokumentstruktur, Metadaten und Erweiterbarkeitsfunktionalität gemäß SVG eingeführt, wie in den Modulen zu Dokumentstruktur, Metadaten und Erweiterbarkeit der Spezifikation SVG 1.1 (Second Edition) beschrieben. Internet Explorer 9 unterstützt folgende Elemente:

Internet Explorer 9 unterstützt auch die zugehörigen DOM-Schnittstellen dieser Elemente.

Farbverläufe und Muster

SVG sieht die Möglichkeit vor, Formen und Texte mit Farben, Farbverläufen oder Mustern zu malen (Painting) oder zu umranden (Stroking). Internet Explorer 9 unterstützt Farbverläufe und Muster gemäß SVG, wie im Modul zu Farbverläufen und Mustern der Spezifikation SVG 1.1 (Second Edition) beschrieben.

Farbverläufe

Farbverläufe werden mithilfe der entsprechenden Elemente ( linearGradient und radialGradient) und Attribute ( gradientUnits und gradientTransform) unterstützt. Die Farben für einen Farbverlauf werden mit dem Element stop definiert. Die Elemente für Farbverläufe können in den Eigenschaften fill und stroke von SVG-Formen verwendet werden. Betrachten Sie beispielsweise das folgende Markup:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="MyGradient">
        <stop offset="10%" stop-color="yellow" />
        <stop offset="90%" stop-color="blue" />
      </linearGradient>
    </defs>

    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" 
          x="20" y="20" width="300" height="100"/>
</svg>

Durch dieses Markup wird ein Rechteck mit einem linearen Farbverlauf definiert. Mit jedem der beiden stop-Elemente wird ein Punkt auf einem Vektor festgelegt, an dem die jeweilige Farbe dargestellt werden soll: die gelbe Farbe bei dem Punkt, der sich bei 10 % des Vektors (von links gesehen) befindet und die blaue Farbe bei dem Punkt, der sich bei 90 % befindet. Der Vektor stellt den Farbübergang dar. Dies wird in Internet Explorer 9 wie folgt angezeigt:

Muster

Muster werden mithilfe des Elements pattern und seiner Attribute unterstützt. Wie Farbverläufe können die Elemente für Muster in den Eigenschaften fill und stroke von SVG-Formen verwendet werden. Betrachten Sie beispielsweise das folgende Markup.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="mycircleandsquare" patternUnits="userSpaceOnUse"
        x="0" y="0" width="150" height="100">
      <circle cx="50" cy="50" r="10" fill="yellow" stroke="blue"
        />
      <rect x="100" y="0" width="50" height="50" fill="blue"   
        stroke="yellow" />
    </pattern>
  </defs>
  <ellipse fill="url(#mycircleandsquare)" stroke="black"
     stroke-width="5" cx="400" cy="200" rx="350" ry="150" />
</svg>

In diesem Beispiel wird mit dem Element pattern ein Muster definiert, das aus abwechselnd kleinen blauen Quadraten und sehr kleinen gelben Kreisen besteht. Dann wird eine Ellipse angegeben und mit dem Muster gefüllt. Das folgende Bild zeigt, wie dies in Internet Explorer 9 angezeigt wird.

Interaktivität

Inhalte gemäß SVG können interaktiv sind, können also als Reaktion auf Benutzereingaben geändert werden. Internet Explorer 9 unterstützt Interaktivitätsfunktionen gemäß SVG, wie im Modul zu Interaktivität der Spezifikation SVG 1.1 (Second Edition) beschrieben. Dazu gehören folgende Funktionen:

Internet Explorer 9 unterstützt außerdem die DOM-Schnittstelle SVGCursorElement des Interaktivitätsmoduls.

Außerdem unterstützt Internet Explorer 9 das Attribut focusable, das im Modul zur Interaktivität der SVG Tiny 1.2-Spezifikation beschrieben wird. 

Das folgende Markup zeigt ein sehr einfaches praktisches Beispiel für die Interaktivität gemäß SVG.

<svg xmlns=http://www.w3.org/2000/svg
    xmlns:xlink="http://www.w3.org/1999/xlink" width="600"
    height="600">
  <script type="text/ecmascript">
    <![CDATA[

           // object representing circle
           var redcircle;

           // variable representing circle's radius
           var r;
    
           window.onload = function() {
                redcircle = document.getElementById('redcircle');
            r = parseInt(redcircle.getAttribute("r"));
           }
    
           var grow = function() {
            r = 2*r;
                redcircle.setAttribute("r",r);
           }

           var shrink = function() {
            r = r/2;
                redcircle.setAttribute("r",r);
           }
     
    ]]>
  </script>
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
        onmousedown="grow()" onmouseup="shrink()"/>
</svg>

Wenn dieser Codeausschnitt geladen wird, wird ein kleiner roter Kreis angezeigt.

Wenn der Benutzer auf den Kreis klickt, wird seine Größe verdoppelt.

Das gleiche Ergebnis kann mit den Ereignissen mouseover und mouseout erreicht werden; in diesem Fall wird der Kreis größer oder kleiner angezeigt, wenn der Mauszeiger einfach darüber bewegt und wieder wegbewegt wird.

...
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
    onmouseover="grow()" onmouseout="shrink()"/>
...

Verknüpfungen und Ansichten

Laut SVG können in SVG-Inhalten Verknüpfungen auf andere Seiten sowie auf vordefinierte Ansichten von SVG-Dokumenten enthalten sein. Ansichten sind beispielsweise hilfreich, wenn Sie eine direkte Verknüpfung auf eine vergrößerte Darstellung eines Diagramms bereitstellen möchten.

Internet Explorer 9 unterstützt Verknüpfungen und Ansichten gemäß SVG, wie im Modul zu Verknüpfungen der Spezifikation SVG 1.1 (Second Edition) beschrieben. Dies schließt die Unterstützung der Elemente a und view ein.

Auch die zum Modul zu Verknüpfungen gehörenden DOM-Schnittstellen, SVGAElement und SVGViewElement, werden unterstützt.

Verknüpfungen

Wie in HTML wird in SVG das Element a verwendet, um einen Hyperlink zu erstellen. Beispielsweise stellt das folgende Markup einen Hyperlink bereit, der einem Rechteck zugeordnet ist.

<svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

<a xlink:href="http://www.bing.com" target="_blank">
    <rect x="20" y="20" width="250" height="250"/>
</a>

</svg>
Ansichten

Mithilfe von Ansichten kann ein SVG-Bild auf eine angegebene Weise im Browser dargestellt werden. Beispielsweise definiert das folgende Markup eine Verknüpfung zu einer Ansicht.

...
<a xlink:href="#rect-view">
    <text x="320" y="70" style="fill:red">Go to Rectangle</text>
</a>
<view id="rect-view" viewBox="280 245 135 85" />
<rect id="rect-object" style="fill:red" x="280" y="245"
  width="135" height="85"/>
...

In diesem Beispiel ist die Ansicht rect-view definiert als viewBox-Objekt mit den angegebenen Koordinaten. Wenn der Benutzer auf die Verknüpfung (den Text "Go to Rectangle") klickt, wird die Ansicht rect-view angezeigt, in der das rote Rechteck sichtbar wird.

Das folgende Markup definiert ebenfalls eine Verknüpfung zu einer Ansicht.

...
<a xlink:href="#circle-view">
    <text x="250" y="70" style="fill:blue">Go to Circle</text>
</a>
<view id="circle-view" viewBox="5 36 128 115"
  preserveAspectRatio="none"/>
<circle id="circle-object" style="fill:blue" cx="70" cy="85"
  r="45"/>
...

In diesem Beispiel ist für die Ansicht circle-view das Attribut preserveAspectRatio festgelegt auf none. Dies bedeutet, dass die Form zwar ein Kreis ist, aber beim Aufrufen der Ansicht nicht einheitlich skaliert wird, um das angegebene viewBox-Rechteck zu füllen. Vielmehr wird sie uneinheitlich gestreckt, sodass ihr Begrenzungsrahmen genau in das viewBox-Rechteck passt. Dieses Markup wird direkt nach dem Laden der Seite in Internet Explorer 9 wie folgt angezeigt.

Wenn Sie auf "Go to Circle" klicken, wird die Ansicht circle-view aufgerufen, und der Kreis wird so gestreckt, dass er das viewBox-Rechteck füllt. Dann sieht der Kreis aus wie eine Ellipse.

Malen und Farben

Malen und Farben sind wesentliche Komponenten von SVG. Das Konzept des Malens umfasst Füllungen (einfarbig, mit Farbverläufen, mit Mustern), Umrandungen (Linien, die entlang Pfaden gezeichnet sind) und Markersymbole (an den Enden von Liniensegmenten, z. B. als Pfeilspitzen) und kann auch die Deckkraft umfassen. Füllungen und Umrandungen können auf Pfade, Texte und Formen angewendet werden.

In Internet Explorer 9 wird die Unterstützung für Malen und Farben gemäß SVG eingeführt, wie im Modul zum Malen: Füllungen, Umrandungen und Markersymbole und im Modul zu Farben der Spezifikation SVG 1.1 (Second Edition) beschrieben. Dies schließt die Unterstützung für Folgendes ein:

Auch die zum Modul zum Malen gehörenden DOM-Schnittstellen, SVGPaint und SVGMarkerElement, werden unterstützt.

Mehrere Beispiele für Füllungen und Umrandungen in SVG finden Sie im Abschnitt Pfade dieses Dokuments.

Pfade

SVG-Pfade sind Umrisse von Formen. Sie können mit Füllungen oder Umrandungen (bei einer Umrandung wird eine Linie um den Pfad gezeichnet) versehen oder als Beschneidungspfade (zum Ausschneiden anderer Formen) verwendet werden.

In Internet Explorer 9 wird die Unterstützung für Pfade gemäß SVG eingeführt, wie im Modul zu Pfaden der Spezifikation SVG 1.1 (Second Edition) beschrieben. Dies schließt die Unterstützung des Elements path sowie der Eigenschaft d ein, die das Analysieren von Pfaddaten ermöglicht.

Auch die zum Modul zu Pfaden gehörenden DOM-Schnittstellen werden unterstützt.

Das Element path unterstützt zahlreiche unterschiedliche Entwicklungsszenarien. Es folgen einige einfache Beispiele. Nach dem Markup folgt ein Screenshot des entsprechenden Ergebnisses in Internet Explorer 9.

Geschlossene Form mit geraden Linien und Füllung
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

<path d="M 20 20 L 60 20 L 40 60 z"
   fill="green"
    fill-opacity="0.5"
    stroke="red"
    stroke-width="3" />

</svg>

Bézierpfad (quadratische Gleichung)
<path d="M20,30 Q40,50 60,30 T100,30"
   fill="none"
    stroke="red"
    stroke-opacity="0.2"
    stroke-width="3" />

Linie mit Bogen
<path d="M30,60 l 50,0 a25,45 0 0,1 50,0 l 50,0"
    fill="green"
    stroke="blue"
    stroke-width="4" />

Text

SVG-Dokumente können Text einschließen. Text wird genauso gerendert wie andere grafische Elemente in SVG. Dies bedeutet, dass Koordinatensystemtransformationen, Malen, Beschneiden und Maskieren auch für Text möglich sind.

Internet Explorer 9 unterstützt das Rendering von Text, wie im Modul zu Text der Spezifikation SVG 1.1 (Second Edition) beschrieben.

Das Element text gibt die zu zeichnenden Zeichen an. Da SVG keine automatischen Zeilenumbrüche vorsieht, müssen Sie diese vorher bestimmen. Um Texteigenschaften (z. B. Schriftart, Schriftbreite, Farbe, Kerning und viele andere) innerhalb einer Textzeile anzupassen, stellt SVG das Element tspan bereit.

Internet Explorer 9 unterstützt außerdem die DOM-Schnittstellen, die zum Textmodul gehören.

Neue Tools für Webentwickler

In diesem Abschnitt werden zuerst angeheftete Sites beschrieben, eine neue Möglichkeit, die Verbindung zwischen Ihrer Website und den Benutzern zu intensivieren. Danach wird die neue Möglichkeit beschrieben, in Internet Explorer 9 Versionen zuzuweisen, um etwaige Kompatibilitätsprobleme bei der Migration zur aktuellen Internet Explorer-Version zu lösen. Dann folgen Informationen zu Verbesserungen der Entwicklertools, die zuerst in Internet Explorer 8 direkt in den Browser integriert wurden.

Angeheftete Sites

Wenn Sie angeheftete Sites nutzen, können Sie für Benutzer Ihrer Website das Surferlebnis noch intensivieren. Angeheftete Sites sind eine neue Gruppe von Tools, die eine jeweils für die angezeigte Website optimierte Benutzeroberfläche mit einem größeren Favoritensymbol (Favicon) sowie Schaltflächen für "Zurück" und "Vorwärts" und anderen Benutzeroberflächenelementen aufweisen, die entsprechend der Marke und der Gesamtdarstellung der Website vereinheitlicht werden können. Durch die Integration in Windows 7 eröffnen sich mithilfe der neuesten APIs zum Erstellen von Sprunglisten zu Websites, von Miniaturansicht-Symbolleisten und Benachrichtigungen neue Möglichkeiten der Verwendung von Entwicklerwebsites. (Angeheftete Sites werden nur mit der Windows 7-Taskleiste unterstützt.)

Anheften von Sites an die Taskleiste

Zum Anheften einer Site an die Taskleiste stehen folgende Möglichkeiten zur Verfügung:

  • "Abreißen" einer Registerkarte durch Klicken auf die Registerkarte und Ziehen der Registerkarte auf die Taskleiste
  • Ziehen des Favoritensymbols (Favicon) von der Adressleiste auf die Taskleiste
  • Ziehen eines benutzerdefinierten Bilds mit der "msPinSite"-Klasse (einem "Drag-to-Pin"-Bild) auf die Taskleiste

Wenn eine Site angeheftet ist, wird sie mit benutzerdefinierten Verbesserungen gerendert, z. B. mit an das Farbschema der Website angepassten Schaltflächen für "Zurück" und "Vorwärts". Sites können auch an das Menü Start angeheftet werden.

Sprunglisten

Sprunglistentasks sind anwendungsspezifische Aktionen, die auf eine angeheftete Website zugeschnitten sind. Sie basieren auf derselben Funktion für Anwendungen unter Windows 7. Mithilfe von Sprunglistentasks kann eine Website die am häufigsten verwendeten Befehle für Benutzer sichtbar machen. Sie können Sprunglistentasks basierend auf den Funktionen Ihrer Website und den Hauptaktionen definieren, die erwartungsgemäß ausgeführt werden. Über die Tasks wird eine Gruppe von Links bereitgestellt, auf die Benutzer jederzeit zugreifen können, auch wenn Internet Explorer nicht ausgeführt wird. Weitere Informationen zu Sprunglistenaufgaben finden Sie unter Erstellen von dynamischen Sprunglisten auf MSDN.

Miniaturansicht-Symbolleisten

Eine Miniaturansicht-Symbolleiste ist wie eine "Fernbedienung" für Ihre Website. Die Symbolleiste wird unter der Miniaturbildansicht angezeigt, wenn Sie den Mauszeiger über die Taskleistenschaltfläche einer angehefteten Site bewegen. Diese Funktion ist besonders für Websites hilfreich, die die Video- oder Audiowiedergabe implementieren, aber Miniaturansicht-Symbolleisten bieten vielfältige Einsatzmöglichkeiten. Schaltflächen für die Miniaturansicht-Symbolleiste können Steuerelemente für die Steuerung der Wiedergabe, für das Hinzufügen oder Freigeben von Favoriten, für Suchläufe, für die Änderung des Onlinestatus, für Sofortkäufe oder für die Bewertung von Webseiten umfassen. Weitere Informationen zum Erstellen von Miniaturansicht-Symbolleisten finden Sie unter Erstellen von Miniaturansicht-Symbolleisten auf MSDN.

Benachrichtigungen

Wie Anwendungen unter Windows 7 können angeheftete Sites Benachrichtigungen und Statusangaben an den Benutzer übermitteln. Dazu wird die Schaltfläche für die Website auf der Taskleiste mit einem Symbol überlagert. Solche Überlagerungssymbole lenken die Aufmerksamkeit auf eine Website, wenn die Sicht auf das Fenster der angehefteten Site versperrt ist, z. B. wenn das Browserfenster minimiert oder die Sicht durch ein anderes Fenster versperrt ist. Mithilfe von Überlagerungssymbolen können Sie wichtige Statusinformationen oder Benachrichtigungen, z. B. den Netzwerkstatus, den Onlinestatus oder den Eingang einer neuen E-Mail, bereitstellen. Weitere Informationen zu Benachrichtigungen finden Sie unter Bereitstellen von Benachrichtigungen auf MSDN.

Entdecken von angehefteten Sites

Benutzer werden von Internet Explorer 9 nicht darüber benachrichtigt, ob die Site angeheftet werden kann. Für die Bekanntgabe dieser Funktionen ist der Entwickler zuständig. Es gibt viele Möglichkeiten, um die Benutzer auf die Funktionen Ihrer Website für angeheftete Sites hinzuweisen: Einfliegen, Dropdown, Banner und verschiedene Effekte, Drag-to-Pin-Symbole und -Bilder sowie das Bereitstellen einer Anpassung für das erste Ausführen, die auf die Funktionen Ihrer angehefteten Site hinweist, nachdem der Benutzer die Site erstmalig angeheftet hat. Weitere Informationen zur Erkennbarkeit finden Sie unter Verbessern der Erkennbarkeit auf MSDN.

Weitere Informationen zu Vorgehensweisen und Codebeispielen für angeheftete Sites finden Sie im MSDN Developer Center zu angehefteten Sites.

Eine Demonstration des Anheftens von Sites finden Sie auf der Website Internet Explorer 9-Testversion.

Versionsverwaltung für die Plattform

In Internet Explorer 8 wurden Dokumentkompatibilitätsmodi eingeführt. Dabei handelt es sich um eine Erweiterung des in Microsoft Internet Explorer 6 eingeführten Kompatibilitätsmodus. Dokumentmodi ermöglichen Ihnen die Auswahl des spezifischen Renderingmodus, in dem Internet Explorer Ihre Webseiten anzeigt. Sie werden detailliert unter Definieren der Dokumentkompatibilität in MSDN beschrieben.

Neuer Dokumentmodus

In Internet Explorer 9 wurde ein neuer Dokumentmodus hinzugefügt: der Internet Explorer 9-Standards-Modus. Er bietet die schnellste Leistung, ist entsprechend den Anforderungen heutiger Webanwendungen skalierbar und unterstützt die aktuellen Standards.

Internet Explorer 9 wird standardmäßig im IE9-Standards-Modus ausgeführt, sofern nicht auf der Seite oder vom Webserver ein anderer Modus angegeben ist.

Verwenden Sie eine standardmäßige !DOCTYPE-Richtlinie anstelle des Meta-Tags "X-UA-Compatible" oder eines HTTP-Headers, um sicherzustellen, dass Internet Explorer 9 Ihre Seite im aktuellen Dokumentmodus rendert. Die !DOCTYPE-Richtlinie zum Aufrufen des IE9-Standards-Modus lautet wie folgt:

<!DOCTYPE html>

Natürlich können Sie die !DOCTYPE-Richtlinie und das Meta-Tag "X-UA-Compatible" oder den HTTP-Header verwenden, um die Standardeinstellung individuell zu ändern.

Den aktuellen Dokumentmodus können Sie ermitteln, indem Sie durch Drücken von F12 die Internet Explorer-Entwicklertools (F12) öffnen und dann die Angabe auf der rechten Seite der Menüleiste überprüfen. Um den Dokumentmodus außer Kraft zu setzen, klicken Sie im Menü Dokumentmodus auf Internet Explorer 9-Standards.

Zeichenfolge des Benutzer-Agents

Mit der Zeichenfolge des Benutzer-Agents wird der Browser von Hostservern identifiziert, und es werden bestimmte Systemdetails bereitgestellt. (Weitere Informationen zu Zeichenfolgen des Benutzer-Agents finden Sie unter Grundlegendes zu Zeichenfolgen des Benutzer-Agents in MSDN.) Anders als frühere Versionen von Internet Explorer sendet Internet Explorer 9 standardmäßig die kurze Zeichenfolge des Benutzer-Agents. Diese Änderung verbessert die Gesamtleistung, die Interoperabilität und die Kompatibilität. Internet Explorer 9 sendet keine Zusatzinformationen zu der Zeichenfolge des Benutzer-Agents, die von anderer auf dem Benutzercomputer installierter Software stammen, z. B. von .NET und anderen Programmen.

Internet Explorer 9 sendet die neue Zeichenfolge des Benutzer-Agents von Internet Explorer 9. Gegenüber der Zeichenfolge des Benutzer-Agents in Internet Explorer 8 wurden vier Änderungen vorgenommen, die für Entwickler relevant sind:

  1. Die Anwendungsversion wurde von "Mozilla/4.0" auf "Mozilla/5.0" erhöht, um eine Übereinstimmung mit anderen Browsern zu erzielen. Diese Änderung signalisiert, dass es sich bei Internet Explorer 9 um einen interoperablen Browser handelt.
  2. Das Versionstoken wurde von "MSIE 8.0" auf "MSIE 9.0" erhöht.
  3. Das Trident-Token wurde von "Trident/4.0" auf "Trident/5.0" erhöht.
  4. Internet Explorer 9 sendet die folgende kurze Zeichenfolge des Benutzer-Agents ohne Zusatzinformationen, die von anderer auf dem Benutzercomputer installierter Software stammen:

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

Die Kompatibilitätsansicht in Internet Explorer 9 ist wie in Internet Explorer 8 dem IE7-Standards-Modus zugeordnet. (Weitere Informationen zur Kompatibilitätsansicht finden Sie unter Grundlegendes zur Kompatibilitätsansichtsliste in MSDN.) In der Kompatibilitätsansicht sendet Internet Explorer 9 die folgende Zeichenfolge des Benutzer-Agents:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)

Weitere Informationen zur neuen Zeichenfolge des Benutzer-Agents für Internet Explorer 9 finden Sie im Internet Explorer-Teamblog unter Einführung in die Zeichenfolge des Benutzer-Agents in IE9.

Entwicklertools (F12)

Um auf die Entwicklertools (F12) in Internet Explorer 9 zuzugreifen, drücken Sie F12, oder klicken Sie im Menü Extras auf F12 Entwicklertools. Wenn Sie zuvor die Entwicklertools in Internet Explorer 8 verwendet haben, werden Sie sofort Funktions- und Leistungsverbesserungen bemerken.

Registerkarte "Konsole"

In den Entwicklertools (F12) in Internet Explorer 9 wird eine Registerkarte Konsole eingeführt, auf der Skriptereignisse verfügbar gemacht werden. Beim Überprüfen von Skripts werden mehrere Umschaltflächen angezeigt: Sie beziehen sich auf Fehler, Warnungen und Nachrichten. Auf jeder Schaltfläche wird die Anzahl der Nachrichten des jeweiligen Typs angezeigt.

Registerkarte "Netzwerk"

In Internet Explorer 9 wurde den Entwicklertools ein Tool für die Netzwerkinspektion hinzugefügt. Klicken Sie auf die Registerkarte Netzwerk, um auf das Tool zuzugreifen. Sie können dann folgende Aktionen durchführen:

  • Erfassen von HTTP- und HTTPS-Netzwerkverkehr.
  • Anzeigen (und Speichern) des Inhalts erfasster Anforderungen und Antworten.
  • Anzeigen zusätzlicher Details zu erfassten Daten, z. B. Cookies, Größen, Zeiten und Cacheinformationen.

Umschaltungstool für den Benutzer-Agent

Mit dem neuen Umschaltungstool für den Benutzer-Agent können Sie die Zeichenfolge des Benutzer-Agents ändern, mit der der Browsertyp und die Version für den Webserver identifiziert werden. (Weitere Informationen zur neuen Zeichenfolge des Benutzer-Agents in Internet Explorer 9 finden Sie unter Zeichenfolge des Benutzer-Agents in diesem Dokument.) Die ausgewählte Zeichenfolge des Benutzer-Agents wird in jeder Anforderung als Header über das Netzwerk gesendet. Um die Zeichenfolge des Benutzer-Agents für den Browser zu ändern, zeigen Sie in den Entwicklertools im Menü Extras auf Zeichenfolge des Benutzer-Agents ändern, und wählen Sie dann den Browser aus, dessen Zeichenfolge des Benutzer-Agents Sie senden möchten.

Messen der realistischen Leistung

Mithilfe der Entwicklertools (F12) in Internet Explorer 9 können Sie jetzt sogar noch mehr Aspekte der Websiteleistung messen als in früheren Versionen von Internet Explorer. Sie können jedoch nicht die Leistung messen, die die Benutzer tatsächlich wahrnehmen. Um dieses Problem zu lösen, werden für einige Websites eigene Bibliotheken entwickelt, mit denen die Leistung für Webseiten live gemessen werden soll. Dies kann jedoch zu Mehraufwand führen, der die Anzeige der Seiten für die Benutzer wieder verlangsamt. Wir sind der Ansicht, dass die W3C WebTiming-Spezifikation (die sich zum Erstellungszeitpunkt dieses Dokuments in der Phase "Working Draft" (Entwurf als Arbeitsgrundlage) befindet) eine gute konzeptionelle Grundlage für die verantwortungsvolle Lösung dieses Problems darstellt. Auf die WebTiming-Funktionalität können Sie in Internet Explorer 9 über die DOM-Schnittstelle window.msPerformance zugreifen. Entwickler können außerdem das Skriptdebugging in den Entwicklertools (F12) aktivieren und dann auf das Objekt window.msPerformance zugreifen.

Eine Demonstration der Verwendung des Objekts window.msPerformance finden Sie auf der Website mit der Internet Explorer-Testversion.

Revisionsverlauf

16.03.10: Erstellt für Internet Explorer Platform Preview.

15.04.10: Aktualisiert mit Informationen zu:

  • Unterstützung des CSS3-Moduls für Namespaces
  • Unterstützung für zusätzliche CSS3-Selektoren
  • Weitere Details zur DOM-Unterstützung
  • Weitere Details zur SVG-Unterstützung, einschließlich Einschränkungen bei der Einbettung
  • Unterstützung für ICC-Farbprofile

05.05.10: Aktualisiert für Internet Explorer Platform Preview, Build 2, mit Informationen zu:

  • Weitere Details zur DOM-Unterstützung
  • Neue DOM-Funktionen:
    • Neue DOM-Core-APIs
    • DOM-HTML
    • DOM-Durchlauf
    • Neue DOM-L3-Ereignisse:
      • Ereignis DOMAttrModified
      • Ereignis DOMContentLoaded
      • Zusammensetzungsereignisse
  • Neue Zeichenfolge des Benutzer-Agents
  • Daten-URI-Änderungen
  • Zusätzliche Entwicklertools: Registerkarte Konsole und Umschaltungstool für den Benutzer-Agent

23.06.10: Aktualisiert für Internet Explorer Platform Preview, Build 3, mit Informationen zu:

  • Neue CSS3-Funktionen:
    • Neue Funktionen für Hintergrund und Rahmen
    • HSL- und HSLA-Farbmodelle
    • Unterstützung für CSS3-Schriftarten
    • Unterstützung für CSS3-Werte und -Einheiten
    • Neue Eigenschaftswerte für display
  • Neue Unterstützung für den DOM-Elementdurchlauf
  • Neue HTML5-Funktionen:
    • Elemente video, audio und canvas
    • Schnittstelle Selection
  • Neue Unterstützung für Selectors API Level 2:
    • Methode matchesSelector
  • Neue SVG-Funktionen:
    • Beschneiden, Maskieren und Zusammensetzen
    • Farbverläufe und Muster
    • Interaktivität
    • Verknüpfungen und Ansichten
    • Malen und Farben
    • Text

04.08.10: Aktualisiert für Internet Explorer Platform Preview, Build 4, mit Informationen zu:

  • "Chakra", das neue JavaScript-Modul
  • Erweiterte DOM-Funktionen
  • Neue Unterstützung für die WebIDL-Spezifikation
  • Objekt window.msPerformance
  • Ergänzung des Abschnitts zu canvas mit Verknüpfungen zu Beispielen

15.09.2010: Aktualisiert für Internet Explorer 9 Beta mit neuen Verknüpfungen und Informationen zu:

  • DOMParser und XMLSerializer
  • Angeheftete Sites

28.10.2010: Aktualisiert für Internet Explorer Platform Preview, Build 6, mit Informationen zu:

  • CSS 2D Transforms
  • Semantische HTML5-Elemente
  • Korrigierte Versionsnummern der unterstützten ICC-Farbprofile

10.02.2011: Aktualisiert für Internet Explorer 9 mit Informationen zu:

  • HTML5 Geolocation
  • Angeheftete Sites (aktualisiert)
  • Kompatibilitätsmodus (aktualisiert)
  • Weitere Dokumentberichtigungen

18.02.2011: Aktualisiert mit weiteren Informationen zu:

  • Angeheftete Sites
  • HTML5-Canvas

14.03.2011: Aktualisiert für Internet Explorer 9 (RTW):

  • aktualisierter Versionstext
  • ECMAScript 5 (Links hinzugefügt)
Microsoft führt eine Onlineumfrage durch, um Ihre Meinung zur -Website zu erfahren. Wenn Sie sich zur Teilnahme entscheiden, wird Ihnen die Onlineumfrage angezeigt, sobald Sie die -Website verlassen.

Möchten Sie teilnehmen?