zurück zum Artikel

Developer Preview auf Internet Explorer 9

Michael Jendryschik

Die ersten zwei Developer Previews des Internet Explorer 9 sehen vielversprechend aus und nähren die Hoffnung auf einen standardkonformen, schnellen Browser mit umfangreicher HTML5-, CSS3- und SVG-Unterstützung.

Die ersten zwei Developer Previews des Internet Explorer 9 sehen vielversprechend aus und nähren die Hoffnung auf einen standardkonformen, schnellen Browser mit umfangreicher HTML5-, CSS3- und SVG-Unterstützung.

Am 16. März 2010 stellte [1] Microsoft im Rahmen der hauseigenen Entwicklerkonferenz MIX10 in Las Vegas die erste Vorschauversion des Internet Explorer 9 (IE 9) vor. Noch handelt es sich um keinen vollwertigen Browser für Endnutzer, sondern um eine "Platform Preview" für Entwickler. Die IE-Entwickler wollen im 8-Wochen-Rhythmus solche Vorschauversionen veröffentlichen und Fehlermeldungen und Verbesserungsvorschläge stärker in die Entwicklung des Browsers einfließen lassen.

Am 5. Mai, etwa eine Woche vor dem eigenen Zeitplan, hatte Microsoft die zweite Platform Preview veröffentlicht [2]. Die Software steht auf der Seite ie.microsoft.com/testdrive [3] zum Download bereit. An den Anforderungen, die die Software an das System stellt, hat sich nichts geändert: Sie benötigt DirectX 2D (D2D), das Microsoft mit Windows 7 eingeführt hat und unter Windows Vista SP2 und Windows Server 2008 R2 mit einem Plattform-Update verfügbar ist – Nutzer von Windows XP schauen leider in die Röhre. Der Aufmacher oben zeigt "Fallende Bälle" (vor dem Fall), eine der grafischen Demos mit SVG und JavaScript.

Konfigurationsmöglichkeiten sieht die Installation nicht vor, sie ist in wenigen Sekunden beendet. Anschließend startet die Preview automatisch und öffnet die oben genannte Test-Drive-Website, auf der Microsoft unterschiedliche Tests und Demos bereitstellt, darunter zahlreiche neue, die unter anderem neue Fähigkeiten der zweiten Preview veranschaulichen sollen.

Die Preview hinterlässt in vielerlei Hinsicht einen guten Eindruck. Vor allem in Sachen Geschwindigkeit weiß sie zu überzeugen und hat im Vergleich zur ersten Vorschauversion wenig zugelegt. Die Preview greift für den Seitenaufbau, das Zoomen, das Rendering von Schrift sowie SVG und einige CSS3-Effekte mit DirectX/DirectWrite auf den Grafikprozessor zu, was die Ausführungsgeschwindigkeit enorm steigert und Animationen mit hohen Frame-Raten ermöglicht. Bilder werden flüssiger bewegt, Schriften sehen klarer aus und umfangreiche 3-D-Grafiken belasten die CPU nicht mehr.

In den von Microsoft veröffentlichten SunSpider-JavaScript-Benchmarks rangiert die Preview derzeit "einen Wimpernschlag" hinter Opera, Chrome und Safari, aber vor Firefox – und weit vor dem IE 8. Die zweite Preview ist rund 20 Prozent schneller als die erste – das macht neugierig auf die nächste Version. Beeindruckend sind die Speed- und Graphics-Demos auf der Test-Drive-Website: Alle Animationen laufen in der Preview flüssig – die meisten anderen Browser können da nicht mithalten.

Die IE-Entwickler haben mit der Version 8 ihres Browsers das Konzept des Version Targeting eingeführt, das mehrere Darstellungsmodi innerhalb eines Browsers vereint. Die jetzige Preview führt das Konzept weiter. Der Browser enthält vier Modi: Im IE5 Document Mode stellt er eine Webseite wie alte, inkompatible Versionen des IE dar, vergleichbar mit dem IE 5 oder der Darstellung im Quirks-Modus des IE 6. Der IE 7 Document Mode entspricht der Darstellung im IE 7, der IE 8 Document Mode entsprechend jener im IE 8. Hinzu gekommen ist der IE 9 Document Mode, die aktuelle Rendering-Engine mit ihren neuen Funktionen. Wie im IE 8 können Webentwickler per meta-Element steuern, welcher Modus auf die Webseite gelten soll:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Wahl des Darstellungsmodus: Der IE 9 wird sogar noch die Darstellung des IE 5 simulieren können (Abb. 1).

Nutzer der Preview haben über den Menüeintrag "Debug" die Möglichkeit, den Modus auszuwählen (siehe Abbildung 1).

Die Preview ermöglicht es nicht nur, sich wie eine ältere IE-Version zu verhalten, sondern auch, sich als solche auszugeben. Die erweiterten Entwicklerwerkzeuge, aufrufbar über die Taste F12, ermöglichen dem Browser über den Menüpunkt "Tools, Change User Agent String", sich mit einem beliebigen String auszuweisen. Entwickler können so testen, wie sich die Preview verhält, wenn sie sich beispielsweise als Firefox ausgibt. Daran kann man sehen, wie sich die Zeiten gewandelt haben: Noch vor einigen Jahren dominierte der Internet Explorer den Browsermarkt dermaßen, dass andere Browser sich als IE ausgeben mussten, um Zugang zu einigen Websites zu erlangen. Heute sieht das anders aus.

Runde Sache mit Webstandards

Runde Ecken sind in modernen Screendesigns fast schon Pflicht, und obwohl der Trend mittlerweile dahin geht, runde Ecken dezent einzusetzen, werden sie für die nächsten Jahre ein wichtiges Stilmittel bleiben. Das umso mehr, da IE 9 künftig mit der CSS-Eigenschaft border-radius umzugehen versteht und damit auch runde Ecken ohne den Einsatz entsprechender Grafiken erlaubt. Die im Testing Center [4] veröffentlichten Tests zeigen, dass Microsoft es mit der border-radius-Unterstützung ernst meint: Die mehr als 30 Tests zeigen im direkten Vergleich, dass die Preview besser abschneidet als aktuelle Browser anderer Hersteller. Darüber hinaus hat Microsoft angekündigt, weitere Teile des CSS Backgrounds and Borders Module [5] zu unterstützen.

IE 9 als Preview unterstützt jetzt die Eigenschaft opacity, sodass Webautoren für Transparenzeffekte nicht mehr auf den proprietären Alpha-Filter oder transparente PNGs zurückgreifen müssen. Eine weitere Neuerung ist die Unterstützung des RGBA-Farbmodells, den das W3C im CSS Color Module [6] definiert. Dabei handelt es sich um kein Farbmodell im engeren Sinn, sondern um eine Erweiterung des bekannten RGB-Modells durch einen (vierten) Alphawert. Dieser bestimmt die Transparenz der angegebenen Farbe und liegt wie bei opacity zwischen 0.0 (völlige Transparenz) und 1.0 (völlige Deckkraft). Ein Element E mit der Deklaration

E { background-color: rgba(255, 255, 255, 0.6); }

hat einen weißen Hintergrund mit 60 Prozent Deckkraft. Im Gegensatz zur Eigenschaft opacity ist nicht das komplette Element mitsamt seinem Inhalt inklusive aller Nachfahren transparent, sondern – in diesem Fall – nur die Hintergrundfarbe. Genauso ist es möglich, teiltransparente Schrift oder Rahmen zu erzeugen.

Aufgeholt haben die IE-Entwickler hinsichtlich der Unterstützung der CSS3-Selektoren. Den CSS3-Selectors-Test auf CSS3.Info [7] besteht die Preview mit Bravour: Alle 578 Tests durchläuft sie erfolgreich. Damit können Webautoren bald browserübergreifend mit Struktur-Pseudoklassen wie E:first-child und E:last-child (E als erstes beziehungsweise letztes Kind seines Elternelements) arbeiten, was mittelfristig Auszeichnungen wie <li class="first"> überflüssig machen dürfte. Selbst der "mathematische Selektor" :nth-child(n) funktioniert in der Preview. Wenn man das n durch einen Zähler ersetzt, kann man alle Kinder an ungerader (E:nth-child(2n+1)) beziehungsweise gerader (E:nth-child(2n)) Position herausfinden – die Schlüsselwörter odd und even bewirken dasselbe.

Endlich könnten Webautoren auf einfache Weise Tabellenzeilen unterschiedlich einfärben:

/* Zeilen mit ungerader Nummer */
tr:nth-child(odd) {
  color: black;
  background-color: white;
}
/* Zeilen mit gerader Nummer */
tr:nth-child(even) {
  color: black;
  background-color: #ddd;
}

Solche Regeln finden sich seit Jahren in den Stylesheets zahlreicher Websites (Stichwort: Progressive Enhancement). Bald können IE-Nutzer ebenfalls davon profitieren.

IE 9 unterstützt jetzt auch die Elementstatus-Pseudoklassen :enabled, :disabled und :checked, über die Webentwickler Formularelemente wie Schaltflächen, Optionsfelder oder Kontrollkästchen abhängig von ihrem Status gestalten können.

Anders als die erste Preview kann die zweite Vorschauversion mit CSS3 Media Queries [8] umgehen. Hier zieht Microsoft lediglich nach und implementiert eine CSS-Funktion, mit dem aktuelle Versionen der Konkurrenten Firefox, Opera, Safari und Chrome seit einziger Zeit umzugehen wissen. Media Queries beschränken die Einbindung von CSS auf Fälle, die sogenannte "Media Features" bestimmen. Es handelt sich um Ausdrücke, die CSS-Eigenschaften ähneln und die Ausgabe eines Stylesheets oder die Anwendung einer Regel davon abhängig machen, ob das Gerät oder der Browser die Einschränkung erfüllt oder nicht.

Das über das folgende link-Element eingebundene Stylesheet wird nur dann berücksichtigt, wenn das Ausgabemedium ein Computerbildschirm ist, dessen Breite maximal 300 Pixel beträgt:

<link rel="stylesheet" type="text/css" href="style.css"
      media="screen and (max-width: 300px)" />

Auch Regeln innerhalb eines style-Elements können Webautoren per Media Queries einschränken. Im folgenden Beispiel ändert sich die Hintergrundfarbe des body-Elements abhängig davon, wie ein Nutzer das Ausgabegerät, beispielsweise ein iPad, in der Hand hält.

<style type="text/css">
  @media all and (orientation: portrait) {
    body { background-color: white; }
  }
  @media all and (orientation: landscape) {
    body { background-color: black; }
  }
</style>

Microsoft demonstriert die Anwendung von Media Queries am Beispiel einer Bildergalerie [9], deren Darstellung von der Breite des Browserfensters abhängig ist. Abbildung 2 zeigt, dass sich die Anzahl der Bilder pro Zeile sowie die Menge der dargestellten Elemente ändern. Dafür sorgen unter anderem folgende Media Queries, die die Wirkungsbereiche der darin enthaltenen Regeln entsprechend einschränken:

@media (min-width: 950px) {
  /* Regeln für die Darstellung in breiten Browserfenstern */
}
@media (min-width: 450px) and (max-width: 950px) {
  /* Regeln für die Darstellung auf Netbooks */
}
@media (max-width:450px) {
  /* Regeln für die Darstellung auf mobilen Geräten */
}

Die Darstellung und Menge der angezeigten Elemente wird abhängig von der Fensterbreite angegeben (Abb. 2).

HTML5 künftig inbegriffen

HTML5 sorgt seit einiger Zeit für Bewegung im Web. Elemente wie header, nav, article, section, aside und footer geben Webautoren neue Möglichkeiten an die Hand, den Aufbau von Webseiten zu standardisieren. Leider bremste der Internet Explorer den Einsatz dieser Elemente bisher aus, da er unbekannte Elemente in sämtlichen Versionen ignorierte und der Einsatz von JavaScript notwendig ist, damit HTML5-Webseiten im IE funktionieren (siehe den Webkrauts-Artikel [10]). Die Preview ist nun in der Lage, mit unbekannten Elementen umzugehen, das heißt sie als "vollständige" Elemente zu behandeln, die Webentwickler per Skript ansprechen oder über CSS gestalten können.

Von der Unterstützung des in HTML5 eingeführten video-Elements ist bislang noch nicht viel zu sehen, dabei war sie für die zweite Preview angekündigt. In der dritten Version soll es aber so weit sein; auf der Entwicklerkonferenz zeigten die IE-Entwickler bereits, wie mehrere HD-Videos flüssig in einem Fenster auf Basis von HTML5 laufen, ohne den Prozessor stark zu belasten. Angekündigt sind die video-Unterstützung auf Basis des Codecs H.264, die derzeit übliche Codierung für hochauflösende Videos im Web, sowie die Audioformate MP3 und AAC.

Hoffnung für canvas

Keine Unterstützung gibt es bislang für das canvas-Element, das ebenfalls ein Bestandteil von HTML5 ist und ein dynamisches Rendern von Grafiken innerhalb eines definierten Bereichs auf der Webseite ermöglicht. canvas gilt unter Webentwicklern als Alternative zu Flash und Silverlight, daher liegt die Vermutung nahe, dass Microsoft, das noch immer auf den Durchbruch seiner RIA-Technik hofft, canvas zugunsten Silverlights auszubremsen versucht. Ähnlich war die Vorgehensweise bei SVG: Microsoft unterstützte in seinen Anwendungen lange Zeit nur die Vektorsprache VML. Erst jetzt, wo klar ist, dass VML keine Zukunft mehr hat, wendet Microsoft sich SVG zu.

Die IE-9-Vorschau kann SVG-Dokumente anzeigen oder per object-Element in (X)HTML-Dokumente einbetten und versteht darüber hinaus Inline-SVG, also den Einsatz von SVG-Elementen direkt innerhalb von HTML oder XHTML. In diesem Rahmen wird der IE endlich XHTML-fähig: Die Preview kann mit dem für XHTML-Dokumente vorgesehenen MIME-Typ application/xhtml+xml umgehen und zeigt derart ausgelieferte Dokumente endlich im Browser an, statt sie – wie bisherige Versionen – zum Download anzubieten.

Die derzeitige Preview versteht die wesentlichen SVG-Strukturelemente, Grundformen wie circle, ellipse, rect, line, polyline und polygon sowie deren Attribute und zugehörige DOM-Interfaces. Einige Demos, die auch einen Eindruck von der Darstellungsgeschwindigkeit des kommenden IE 9 geben, stellt Microsoft auf der Test-Drive-Website bereit und darüber hinaus zahlreiche Tests im Internet Explorer Testing Center.

Selbst wenn die von Microsoft angebotenen Tests einen anderen Eindruck hinterlassen, zeigen die aktuellen von Jeff Schiller [11], dass Microsoft viel Arbeit vor sich hat: Die aktuelle Preview erreicht gerade einmal 30,55 Prozent – nur 2,19 Prozent mehr als die erste Vorschau. Damit liegt der IE 9 noch weit hinter Firefox (über 60 %), Safari und Chrome (über 80 %) und Opera (über 90 %) zurück. Derzeit ist aber nur ein geringer Teil des Sprachumfangs implementiert. Die Roadmap im IEBlog [12] stellt in Aussicht, dass die Lücken in kommenden Vorschauversionen geschlossen werden.

Um den aktuellen Entwicklungsstand besser einordnen zu können, empfiehlt sich ein Blick auf den Acid3-Test des Web Standard Project (WaSP). Er analysiert Browser hinsichtlich ihrer Fähigkeiten zur Darstellung interaktiver Anwendungen. Dementsprechend werden primär DOM2- und ECMAScript-Fähigkeiten untersucht. Zusätzlich zu den 100 Einzeltests muss die Acid3-Testseite visuell dem Referenz-Rendering entsprechen. Dazu muss der Browser fit sein in CSS3 und herunterladbare Schriftarten sowie Base64-codierte Bilder in Form von Data-URLs und Farbdarstellungen im HSLA-Farbraum unterstützen. Aktuelle Safari-, Opera- und Chrome-Versionen bestehen den Test vollständig. Firefox 3.6 schafft 95 von 100 Punkten. Die Preview erreicht nur 68 Punkte. Das sind zwar 13 Punkte mehr als die erste Vorschauversion schaffte, aber ist noch weit von der Referenzdarstellung entfernt (siehe Abbildung 3).

Das Rendering des Acid3-Tests unterscheidet sich in der Preview stark von der Referenzdarstellung, allerdings sind die IE-Entwickler auf einem guten Weg (Abb. 3).

IE 9 befindet sich in einer frühen Entwicklungsphase, daher verwundert es nicht, dass viele der angekündigten Funktionen noch nicht implementiert sind, und der aktuelle Stand ist noch weit davon entfernt, zu den qualitativ führenden Browsern aufzuschließen. Dennoch ist Microsoft ist auf einem guten Weg.

Laut Dean Hachamovitch, General Manager für den Internet Explorer, ist es Microsofts Ziel, einen Browser zu entwickeln, der vollständig kompatibel zu HTML5 ist. In seinem Blogeintrag [13] zur neuen Vorschauversion beantwortet er die Frage eines GMail-Entwicklers, ob sich IE 9 eher so wie die Open-Source-Engines Gecko und WebKit verhalten werde als wie seine Vorgänger, mit einem nachdrücklichen "JA". Die aktuelle Preview lässt in der Tat hoffen, auch die Art und Weise, wie Microsoft die Arbeit an dem neuen Brower angeht. Die Firma baut die Testsuite zu HTML5, CSS3, SVG 1.1 und DOM stetig weiter aus; 88 neue Tests sind im Zuge der zweiten Preview hinzugekommen und lassen die Gesamtzahl auf 192 steigen.

Der IE 9 wird ein besserer Browser werden als der IE 8. Das nehmen Webentwickler zwar zur Kenntnis, zu Jubelarien führt es jedoch nicht. Das liegt daran, dass sicherlich niemand erwartet, dass der neue Browser schlechter wird. Die Implementierung von SVG, die HTML5- sowie die bessere CSS3-Unterstützung sind erfreulich, allerdings müssen Anwender noch mehr als ein halbes Jahr darauf warten. Wie schön wäre es, wenn Microsoft aktuelle Verbesserungen schon jetzt für den IE 8 veröffentlichen könnte. Am Beispiel Firefox sieht man, dass ein solches Modell funktioniert: Regelmäßig erscheinen Updates, die den Browser auf dem neusten Stand halten und nicht nur Sicherheits-Patches einspielen, sondern auch die Rendering Engine aktualisieren. Würde Microsoft ein ähnliches Modell fahren, konnte die Entwicklung des Word Wide Web stetig voranschreiten und nicht in Zyklen von zwei bis drei Jahren.

Michael Jendryschik
leitet den Bereich Webentwicklung bei der itemis AG. Er ist Buchautor (Einführung [14] in XHTML, CSS und Webdesign), schreibt Fachartikel und spricht auf Konferenzen. Nicht nur als Webkraut [15] setzt er sich für Webstandards ein und verfolgt mit Interesse die Entwicklung des Webs. (ane [16])

URL dieses Artikels:
https://www.heise.de/-998855

Links in diesem Artikel:
[1] https://www.heise.de/news/Erste-oeffentliche-Vorschau-auf-Internet-Explorer-9-Update-956425.html
[2] https://www.heise.de/news/Zweite-Vorschauversion-von-Internet-Explorer-9-994235.html
[3] http://ie.microsoft.com/testdrive/
[4] http://samples.msdn.microsoft.com/ietestcenter/
[5] http://www.w3.org/TR/css3-background/
[6] http://www.w3.org/TR/css3-color/
[7] http://www.css3.info/selectors-test/
[8] http://www.w3.org/TR/css3-mediaqueries/
[9] http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/Default.html
[10] http://www.webkrauts.de/2009/09/24/das-endoskelett-einer-webseite/
[11] http://www.codedread.com/svg-support.php
[12] http://blogs.msdn.com/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx
[13] http://blogs.msdn.com/ie/archive/2010/05/05/html5-and-same-markup-second-ie9-platform-preview-available-for-developers.aspx
[14] http://jendryschik.de/wsdev/einfuehrung/
[15] http://www.webkrauts.de/
[16] mailto:ane@heise.de

Copyright © 2010 Heise Medien