zurück zum Artikel

Internet Explorer 9 Beta: volle Aufmerksamkeit auf die Website

Michael Jendryschik

Die Beta-Version des Internet Explorer 9 gewährt erstmals einen Blick auf die neue Benutzeroberfläche des Browsers. Sie bringt zahlreiche Neuerungen mit sich und folgt dem Motto, die Internetseite in den Mittelpunkt zu setzen.

Am 15. September erschien die Beta-Version des Internet Explorer 9 (IE9 [1]). Sie gewährt erstmals einen Blick auf die neue Benutzeroberfläche des Browsers, die zahlreiche Neuerungen mit sich bringt und dem Motto folgt, das Microsoft-Evangelist Daniel Melanchthon bei der Präsentation in Hamburg auf den Punkt brachte: "Der Browser soll sich nicht so wichtig nehmen. Im Mittelpunkt steht das, was wirklich wichtig ist – die Internetseite."

Im März 2010 veröffentlichte Microsoft die erste "Platform Preview" des IE9, eine Vorschauversion mit reduzierter Benutzeroberfläche, die Entwicklern einen ersten Eindruck des neuen Browsers vermitteln sollte und einige der neuen Funktionen demonstrierte. Alle sechs bis sieben Wochen folgten weitere Vorschauversionen, mit denen Microsoft sich Schritt für Schritt dem fertigen Browser annäherte. Parallel dazu stellten die Entwickler die Test-Drive-Website [2] mit einigen Dutzend zum Teil beeindruckenden Demos sowie mit dem Internet Explorer Testing Center [3] eine umfangreiche Testsuite bereit, die den Fortschritt demonstrieren und dokumentieren sollen.

Den Browser gibt es auf der offiziellen IE9-Website [4] zum Download. An den oft kritisierten Systemanforderungen hat sich mit der Beta nichts geändert: Da der IE9 für die Darstellung von Grafiken und Text die Direct2D-Schnittstelle nutzt, die mit Windows Vista eingeführt wurde, ist mindestens Windows Vista SP2 oder Windows 7 für den Einsatz erforderlich – Nutzer älterer Windows-Versionen bleiben außen vor. Anders als die Platform Previews lässt sich die Beta nicht parallel zum IE8 installieren, sondern ersetzt diesen [5].

Die Benutzeroberfläche des IE9 beschränkt sich auf das Wesentliche (Abb. 1).

Die Website im Mittelpunkt

Die Benutzeroberfläche ist übersichtlich und aufgeräumt. Der Browser hat sich aller Symbolleisten entledigt; wer auf die Favoriten- oder Statusleiste nicht verzichten möchte, muss sie explizit wieder aktivieren. Auf eine separate Suchleiste haben die IE-Entwickler verzichtet und sie stattdessen – wie von Googles Chrome bekannt – zusammen mit der Adressenleiste in eine "kombinierte Eingabeleiste" integriert. Die ist deutlich schmaler als bei Googles Browser, um Platz zu schaffen für die Tabs, die rechts daneben angeordnet sind und bei Microsoft "Registerkarten" heißen.

Websites als Applikationen samt Logo und Farbschema (Abb. 2)

Nutzer können die Karten aus der Registerleiste herausziehen, um eine neue Instanz des Browsers zu öffnen. Damit folgt Microsoft dem Verhalten der Konkurrenz, geht aber einige Schritte weiter: Das Fenster bleibt beim Ziehen und Ablegen in Originalgröße; die Website wird ohne Unterbrechung weiter dargestellt. Dadurch lassen sich auch Videos beim Ziehen der Registerkarte weiter abspielen, ohne dass es zu Verzögerungen kommt.

Die Navigationselemente müssen Webentwickler selbst anlegen (Abb. 3 ).

Eine echte Neuerung ist es, die Website an der Windows-Taskleiste oder im Startmenü anzuheften. Dazu müssen Nutzer die Registerkarte an die gewünschte Stelle der Taskleiste oder auf die Start-Schaltfläche ziehen. Das Ergebnis lässt sich sehen: Die Websites wirken wie herkömmliche Programme samt eigenem, aus dem Favicon abgeleitetem Logo, passendem Farbschema und zusätzlichen Navigationselementen (siehe Abb. 2 und 3).

Microsoft hat einige neue Werte für das name-Attribut von Meta-Elementen eingeführt, über die Webentwickler das Aussehen und Verhalten angehefteter Website bestimmen [6] können. Die Tabelle 1 zeigt diese Werte.

Wert Beschreibung
application-name Name der Website. Fehlt diese Angabe, wird der Inhalt des title-Elements verwendet.
msapplication-tooltip Tooltipp, der angezeigt wird, wenn der Nutzer das Icon mit der Maus berührt.
msapplication-starturl Homepage der Website. Fehlt diese Angabe, wird angeheftete Seite als Homepage verwendet.
msapplication-navbutton-color Farbe der Vor- und Zurück-Schaltflächen, die sonst auf Basis des Favicons ermittelt wird.
msapplication-window Fenstergröße der angehefteten Webseite, mindestens 800 x 600 Pixel.
msapplication-task Name, URI und Icon eines Navigationselements. Es sind bis zu fünf Elemente erlaubt.

Das folgende Listing zeigt wiederum deren Einsatz am Beispiel der Facebook-Website. Alternativ steht eine JavaScript-API zur Verfügung.

<meta name="application-name" content="Facebook"/>
<meta name="msapplication-tooltip" content="Start the Facebook App"/>
<meta name="msapplication-starturl" content="/"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-task" 
      content="name=Nachrichten;action-uri=/home.php?sk=
             nf;icon-uri=/images/icons/app/news.ico"/>
<meta name="msapplication-task" 
      content="name=Nachrichten;action-uri=/home.php?sk=
             inbox;icon-uri=/images/icons/app/messages.ico"/>
<meta name="msapplication-task" 
      content="name=Veranstaltungen;action-uri=/home.php?sk=
             events;icon-uri=/images/icons/app/events.ico"/>
<meta name="msapplication-task" 
      content="name=Freunde;action-uri=/home.php?sk=
             ru;icon-uri=/images/icons/app/friends.ico"/>

Es besteht kein Zweifel daran, dass die IE-Entwickler mit dem Schnellzugriff auf häufig verwendete Websites eine nützliche Funktion geschaffen haben, allerdings lässt sich darüber streiten, ob die technische Umsetzung gelungen ist. Kroc Camen ist nicht der Ansicht und schlägt in seinem Artikel "Microsoft, Please Stop This Madness [7]" eine deutlich elegantere Lösung vor, die auf das HTML5-Element menu setzt.

Vorsprung durch Webstandards

Schon die ersten Platform Previews waren in Sachen Webstandards im Vergleich zum IE8 ein Meilenstein und gaben Grund zur Hoffnung, dass der Browser endlich zur enteilten Konkurrenz würde aufschließen können. Die Beta-Version bringt ihn fast auf Augenhöhe.

Der Artikel konzentriert sich auf die Neuerungen, die der Beitrag "Bälle in Bewegung [8]" nicht schon erwähnt hat. Wirft man einen Blick auf die aktuellen Designtrends im Web, kommt der IE mit seiner umfassenden Unterstützung der Eigenschaft border-radius wohl einige Monate zu spät – runde Ecken sind offenbar auf dem Rückzug. Aktuell ist allerdings der Umgang mit Transparenz, und da hat der Browser enorm aufgerüstet. Er unterstützt die Eigenschaft opacity für transparente Elemente sowie die Farbmodelle RGBA und HSLA zur Angabe von transparenten Farben.

Anders als der RGB-Farbraum, der eine Farbe aus ihren Werten für Rot, Grün und Blau mischt, definiert der HSL-Farbraum eine Farbe über ihren Farbton (engl. hue), der Farbsättigung (saturation) und der relativen Helligkeit (lightness).

Ein sattes, leuchtendes Rot entspricht der Angabe hsl(0, 100%, 50%), ein helles Grün ergibt hsl(120, 90%, 25%), ein Pastellgrün hsl(120, 50%, 50%). Unter Designern gilt der HSL-Farbraum – anders als RGB – als gut nachvollziehbar und intuitiv einsetzbar.

RGB- und HSL-Farbangaben bestehen aus drei Teilen. RGBA und HSLA erweitern die Modelle durch einen Alphawert, der die Transparenz der angegebenen Farbe bestimmt und zwischen 0.0 (völlige Transparenz) und 1.0 (völlige Deckkraft) liegt.

Während die Eigenschaft opacity die Transparenz des gesamten Elements und seines Inhalts festlegt, definiert eine Farbangabe über RGBA oder HSLA nur die Transparenz der definierten Farbe. Dadurch können Webdesigner teiltransparente Schriften, Farbflächen oder Rahmen erzeugen. Ein Element E mit der Regel E { background-color: hsla(0, 100%, 50%, 0.5) } hat beispielsweise einen roten Hintergrund mit 50 Prozent Deckkraft – die Inhalte des Elements sind nicht transparent.

Hintergründige Neuerungen

Das "CSS3 Backgrounds and Borders Module [9]" erweitert die background-Eigenschaften um die Möglichkeit, einem Element mehrere Hintergrundbilder zuzuweisen, indem Webautoren mehrere Werte durch Kommata getrennt notieren.

Der "Multiple background test [10]" der Website CSS3.Info weist einem div-Element über folgende Regel drei Hintergrundbilder zu. Das erste zeigt den Rahmen oben und den Banner, das zweite den Rahmen unten und das dritte schließlich sorgt für die Darstellung des Rahmens links und rechts. Bislang mussten Webentwickler mehrere div-Elemente ineinander verschachteln und jedem einzelnen ein Hintergrundbild zuweisen, um einen solchen Effekt zu realisieren.

div.example { 
  height: 200px;
  width: 720px;
  padding: 150px 20px 20px 20px;
  background: url(body-top.gif) top left no-repeat,
    url(banner_fresco.jpg) 11px 11px no-repeat,
    url(body-bottom.gif) bottom left no-repeat,
    url(body-middle.gif) left repeat-y;
}

Abbildung 4 zeigt den Unterschied zwischen IE8 und der neuen Beta.

Im Gegensatz zu ihrem Vorgänger kann die IE9 Beta mit multiplen Hintergrundbildern umgehen (Abb. 4).

Neu ist ebenfalls die Unterstützung der Eigenschaften background-clip, background-origin und background-size:

E {
  background-image: url(hintergrundbild.png);
  background-size: 100% 100%;
}

Die folgende zeigt ein weiteres Beispiel und darüber hinaus einige CSS3-Neuerungen, die der IE9 allesamt unterstützt. Für die Eigenschaft background-repeat erlaubt CSS3 nicht nur einen, sondern auch zwei Werte; in diesem Fall bezieht sich der erste auf die horizontale Richtung, der zweite auf die vertikale. Neu ist zudem der Wert round, der für eine derartige Skalierung des Hintergrundbilds sorgt, dass es am Rand des Elements nicht abgeschnitten wird. background-size soll das Hintergrundbild in dem Beispiel auf 20 Prozent der zur Verfügung stehenden Breite und 30 Prozent der Höhe skalieren. Hinsichtlich der Breite ist das problemlos umsetzbar, da das Hintergrundbild horizontal nicht wiederholt werden soll (no-repeat). Vertikal würde der Browser es jedoch dreimal vollständig und einmal nur teilweise anzeigen. Der Wert skaliert das Bild auf 25 Prozent herunter, sodass es vier Mal vollständig angezeigt wird.

p {
 background-image: url(hintergrundbild.png);
 background-repeat: no-repeat round;
 background-size: 20% 30%;
}

Schriften, HTML5 & Tempo

Einbettung von Schriften

Für Designer, die aus der Drucksachengestaltung kommen und gewohnt sind, die typographischen Eigenheiten moderner Satzsysteme auszureizen, muss das Word Wide Web wirken wie ein Rückschritt ins Mittelalter. Von typographischer Vielfalt kann keine Rede sein, was aber kein Wunder ist, wenn man bedenkt, dass Browser seit Anbeginn des Webs auf Systemschriften angewiesen sind. Das heißt auf Fonts, die auf dem Rechner des Nutzers installiert sind. Von Times New Roman über Arial hin zu Verdana und Georgia, hin und wieder etwas Courier oder Courier New – lange Zeit waren es fast ausschließlich diese Schriften, die Webnutzer zu sehen bekamen.

Zwar kann man mit der At-Regel @font-face seit langem beliebige Schriftarten in Webseiten einbetten, und sowohl Netscape 4 als auch der Internet Explorer 4 verstanden damit umzugehen, jedoch gab es kaum Schriften im richtigen Format und in angemessener Qualität, sodass die Einbettung von Schriften zu keiner Zeit richtig funktionierte und zudem nicht eingesetzt wurde. Das W3C entfernte @font-face im Rahmen von CSS 2.1 folgerichtig aus dem Standard.

Im "CSS3 Fonts Module [11]" erlebt @font-face seine Wiederauferstehung. Das hat mehrere Gründe: zum einen die gute Bildschirmdarstellung moderner Flachbildschirme und die verbesserte Kantenglättung aktueller Betriebssysteme, zum anderen, dass die meisten Browserhersteller die Unterstützung für @font-face wieder implementierten, allen voran Safari, kurz danach auch Firefox, Opera und Chrome.

Als Standardformat für eingebettete Schriften hat sich das Web Open Font Format (WOFF) durchgesetzt. Firefox unterstützt das Format seit Version 3.6, Chrome seit Version 6. Andere Browserhersteller werden in kommenden Versionen nachziehen, und auch der IE9 unterstützt das WOFF-Format, wovon man sich auf einer Testseite [12] überzeugen kann. Folgende Regel weist den Browser an, die entsprechende Fontdatei herunterzuladen und unter dem Namen "FelbridgeOTSCondensed" zur Verfügung zu stellen.

@font-face {
  font-family: FelbridgeOTSCondensed;
  src: url('fonts/FelbridgeOTS-Condensed.woff');
}

Anschließend können Webentwickler den Font wie gewohnt verwenden:

p { font-family: FelbridgeOTSCondensed, sans-serif; }

Die Neuerungen sind lobenswert, allerdings schafft Microsoft es damit nicht, bei CSS3 vollends zur Browserkonkurrenz aufzuschließen. findmebyip [13] deckt auf, wo die IE-Entwickler noch nachlegen müssen. Unter anderem auf die Unterstützung des lang erwarteten Spaltenmoduls [14] oder CSS3 Transitions [15] – einem Modul, das beschreibt, wie ein Element sich verhält, wenn seine CSS-Eigenschaften sich ändern – müssen Webentwickler wohl bis zur nächsten IE-Version warten.

HTML5: audio, video und canvas – es passiert was!

Kaum eine Website kommt heute ohne Audio- und Video-Inhalte aus. Fast alle setzen auf Flash, um Audio-Dateien und Filme auf Webseiten darzustellen, eine Technik, die nicht Teil des Browsers ist, sondern als Plug-in nachzuinstallieren ist, sofern das erlaubt ist – Apple beispielsweise weigert sich, Flash auf dem iPad oder iPhone anzubieten.

Die HTML5-Elemente audio und video sollen Flash irgendwann überflüssig machen und Multimedia-Inhalte ohne zusätzliche Plug-ins stabil und plattformübergreifend in Webseiten einbetten. Die IE9 Beta ist der erste Browser aus Redmond, der die neuen Elemente unterstützt. Dabei setzt der Browser für video auf das Format H.264 und für audio auf AAC und MP3.

Leider herrscht seitens der Browserhersteller bei den unterstützten Formaten wenig Konsens. H.264 favorisiert nicht nur Microsoft, sondern auch Apple (Safari), während Firefox und Opera auf Ogg Theora und WebM setzen; nur Google (Chrome) unterstützt alle drei Codecs. Auch bezüglich der Audioformate gibt es Uneinigkeit.

Weil die HTML5-Entwickler dem Prinzip folgen, nur das zum Standard zu erheben, was sich in der Breite durchgesetzt hat, gibt es derzeit keinen offiziellen Video- oder Audiocodec. Die "Lösung" des Problems besteht derzeit darin, dass Webseitenbetreiber ihre Medien in unterschiedlichen Formaten anbieten. Der Miro Video Converter [16] hilft bei der Konvertierung von einem Format zum anderen. Aussehen könnte das wie folgt:

<video width="400" height="300" poster="img/platzhalter.png" controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  <p><a href="video.mp4">Video ansehen</a></p>
 </video>

IE9, Safari und Chrome spielen das erste Video ab, Firefox und Opera, die den Codec nicht verstehen, nehmen stattdessen das zweite. Ältere Browser, die mit dem video- beziehungsweise source-Element nichts anzufangen wissen, zeigen einen Link zum Video an.

Nach Erscheinen der ersten Platform Preview sah es so aus, als würde Microsoft auf die Unterstützung des canvas-Elements zugunsten der eigenen Entwicklung Silverlight verzichten. Die dritte Platform Preview belehrte Skeptiker eines Besseren.

Das HTML5-Element canvas stellt eine Fläche zur Verfügung, auf die Webentwickler mit JavaScript dynamische Bitmap-Grafiken zeichnen und animieren können. Zur Darstellung nutzt der Browser "Kontexte", beispielsweise den Canvas-2D-Kontext aus der "W3C Canvas 2D API [17]"-Spezifikation. canvas erfährt mittlerweile eine breite Unterstützung, unter anderem im Firefox ab Version 3.0, Safari ab Version 3.1 und Opera ab Version 9. Selbst im Internet Explorer ab Version 6 können Webentwickler mit dem Script ExplorerCanvas [18] das canvas-Element mit Einschränkungen einsetzen. Die IE9 Beta verspricht nun umfassende, native Unterstützung.

Zahlreiche Beispiele bietet das Canvas Pad [19]. Beeindruckend sind auch der Canvas Zoom [20] und die Beispiele, die die Website "Canvas Demos [21]" zusammenträgt.

Standardkonformität und Geschwindigkeit

Bereits die erste Platform Preview bestand den "CSS3 Selectors Test [22]" auf CSS3.Info mit Bravour, und auch die Beta durchläuft alle 574 Tests fehlerfrei. Beim Acid3-Test [23] hingegen fiel die erste Platform Preview mit nur 55 von 100 Punkten noch glatt durch. Der Acid3-Test analysiert Browser in Bezug auf ihre Fähigkeiten zur Darstellung interaktiver Anwendungen und testet dementsprechend primär die DOM2- und ECMAScript-Fähigkeiten des Browsers.

Hier haben die IE-Entwickler stark aufgerüstet: Neben der zusätzlichen Unterstützung der W3C-DOM-Level 2 und -Level 3 weist die Beta ein erweitertes DOM sowie eine verbesserte Verarbeitung von Leerzeichen auf. Zusätzlich zu den 100 Einzeltests muss der Browser in der Lage sein, das Referenz-Rendering des Acid3-Tests darzustellen. Dazu hat er herunterladbare Schriften zu unterstützen, er muss Base64-codierte Bilder in Form von Data-URLs anzeigen können und Farbdarstellungen im HSLA-Farbraum verstehen. Die Beta erreicht beim Acid3-Test 95 von 100 Punkten; die Darstellung entspricht der Referenzdarstellung. Fünf Tests besteht der IE nicht, was auf die noch fehlerhefte SVG-Unterstützung zurückzuführen ist.

Die Ergebnisse des Acid3-Tests im IE8, der ersten Platform Preview und der aktuellen Beta (Abb. 5).

Die SVG-Schwächen decken auch die Tests von Jeff Schiller [24] auf. Zwar hat der IE im Vergleich zur ersten Platform Preview (28,36 %) deutlich aufgeholt und erreicht mittlerweile 58 Prozent, das ist im Vergleich zur Konkurrenz allerdings noch deutlich zu wenig: Opera und Chrome stehen bereits bei über 90 Prozent.

Beeindrucken kann die Beta hingegen in Sachen Geschwindigkeit. Microsoft gibt an, dass der neue Browser elfmal schneller sei als sein Vorgänger, und tatsächlich laufen die Demos auf der Test-Drive-Website zum Teil schneller und flüssiger als in den Browsern der Konkurrenz. Zurückzuführen ist das vor allem darauf, dass die gesamte Grafik- und Textdarstellung mit Direct2D und DirectWrite von der CPU auf die Grafikkarte übertragen wird. Ein weiterer Grund für die verbesserte Performance ist eine neue JavaScript-Engine, die jetzt in der Lage ist, mit Multi-Core-Maschinen zusammenzuarbeiten. Der SunSpider-JavaScript-Benchmark [25] kann den Eindruck untermauern: Die IE9 Beta ist schneller als ihre Vorgänger und behauptet sich hinter aktuellen Versionen von Opera und Chrome auf Platz 3, deutlich vor Safari und Firefox. Wer mag, kann sich mit der hübsch gestalteten Demo "FishIE Tank [26]" von der Geschwindigkeit der Beta überzeugen und mit der seines Lieblingsbrowsers vergleichen.

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

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

Links in diesem Artikel:
[1] http://www.internet-explorer9.de/
[2] http://ie.microsoft.com/testdrive/
[3] http://samples.msdn.microsoft.com/ietestcenter/
[4] http://windows.microsoft.com/IE9
[5] http://windows.microsoft.com/de-DE/internet-explorer/help/ie-9/how-do-i-install-or-uninstall-internet-explorer-9
[6] http://msdn.microsoft.com/library/gg131029.aspx
[7] http://camendesign.com/annoyances/stop_this_madness
[8] https://www.heise.de/hintergrund/Developer-Preview-auf-Internet-Explorer-9-998855.html
[9] http://www.w3.org/TR/css3-background/
[10] http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html
[11] http://www.w3.org/TR/css3-fonts/
[12] http://ie.microsoft.com/testdrive/Graphics/WebFonts/Default.html
[13] http://www.findmebyip.com/litmus/#target-selector
[14] http://www.w3.org/TR/css3-multicol/
[15] http://www.w3.org/TR/css3-transitions/
[16] http://www.mirovideoconverter.com/
[17] http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
[18] http://code.google.com/p/explorercanvas/
[19] http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html
[20] http://ie.microsoft.com/testdrive/Graphics/DeepZoom/Default.html
[21] http://www.canvasdemos.com/
[22] http://www.css3.info/selectors-test/
[23] http://acid3.acidtests.org/
[24] http://codedread.com/svg-support.php
[25] http://www2.webkit.org/perf/sunspider-0.9.1/sunspider.html
[26] http://ie.microsoft.com/testdrive/Performance/FishIE%20tank/Default.html
[27] http://www.itemis.de/
[28] http://jendryschik.de/wsdev/einfuehrung/
[29] http://www.webkrauts.de/
[30] mailto:ane@heise.de

Copyright © 2010 Heise Medien