Teil 1: Dokumentkompatibilitätsmodus und Conditional Comments
Der Neue im Redmond Clan
Am 18.03.09 war es soweit. Ein neues Release des Internet Explorer Browsers (kurz IE) erblickte das Licht der Onlinewelt.
Der jüngste Spross des Marktführers trat dabei wahrlich kein leichtes Erbe an. Aufgrund ihrer kapriziösen Rendering-Eigenschaften entwickelten sich seine Vorgänger zu Zielscheiben heftiger Verbalattacken.So folgte auf die öffentliche Freigabe eines neuen Microsoft Browsers bis dato zwangsläufig fast ausschließlich Häme und Schelte von Frontend-Entwicklern.
Doch alle, die dieses Verhalten für einen pawlowschen Reflex hielten, wurden in diesem Frühjahr eines besseren belehrt. Statt des üblichen Aufschreis ging eine Welle der Erleichterung durch die Entwicklergemeinde.
Was sich bereits in der Betaphase andeutete, war Wirklichkeit geworden: Die Version acht markiert tatsächlich einen Wendepunkt in der Entwicklungsgeschichte des Kriegsveteranen aus Redmond. Erstmals seit Beginn der Browserkriege in den 90ern bemüht sich der Marktführer ernsthaft um die Einhaltung von Webstandards. Neben einer verbesserten Unterstützung von HTML 4.1 und 5 fällt insbesondere die fast fehlerfreie Unterstützung von CSS 2.1 auf.
Schatten im Paradies
Microsofts Entscheidung, proprietäre Erweiterungen und Spezifikationen zugunsten offener Standards einzuschränken, erleichtert von nun an die Erstellung neuer Webseiten. Doch jede Wende - so erstrebenswert sie auch sein mag - hat in der Regel eine Kehrseite. Für bereits bestehende Webprojekte stellt die Standardkonformität häufig eine Herausforderung dar. Viele dieser Webseiten sind auf die Eigenheiten der Vorgängerversionen 7, 6 und ggf. sogar 5.5 optimiert worden, wodurch es im IE8 zu teils erheblichen Darstellungsproblemen kommen kann.
Das folgende XHTML Beispiel soll dies exemplarisch verdeutlichen
<style type="text/css" >
@import url("/css/styles.css");
</style >
<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="/win_ie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/win_ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/browser/win_ie7.css"
<![endif]-->
Im oben angeführten Beispiel werden mit Hilfe von Conditional Comments (kurz CC) Browserweichen für den Internet Explorer eingebunden. Alle Internet Explorer ab der Version 5 ziehen das Stylesheet win_ie.css. Für die Versionen IE6 und IE7 werden jeweils zusätzlich korrektive Styleangaben geladen.
Auch der IE8 wird als Browserversion erkannt, die höher als 5 ist. Er wertet somit nur die Styleangaben für den in die Jahre gekommenen IE5 aus, was - wie man sich unschwer vorstellen kann - mitunter zu unschönen Darstellungsgeffekten führt.
Lösungsansätze
Grundsätzlich gibt es zwei Möglichkeiten, dem Problem Herr zu werden:
- Dokumentkompatibilitätsmodus auf eine der Vorgängerversionen herabsetzen
- Erweiterung der Conditional Comments
Dokumentkompatibilitätsmodus
Mit dem IE8 führt Microsoft den Begriff des Dokumentkompatibilitätsmodus ein. Mit Hilfe dieser Modi kann der Browser angewiesen werden, die Webseite so zu rendern, wie ältere Versionen dies tun würden.
X-UA-kompatibler httpequiv-Header
Für einzelne Templates oder Webseiten kann über ein entsprechendes meta-Tag im Kopfbereich ein sog. X-UA-kompatibler httpequiv-Header notiert werden. Diese meta-Angabe muss im Header vor allen anderen Elementen stehen. Einzige Ausnahmen bilden das title-Element und meta-Tags.
<head>
<title>Titel des Webdokuments</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
Das Content-Attribut gibt den Modus für das Webdokument an. Wenn wie im oberen Codebeispiel das Verhalten vom IE7 nachgeahmt werden soll, muss als Wert "IE=EmulateIE7" angegeben werden. In unserem Beispiel verhält sich damit der IE8 wie ein IE7 und zieht dessen zusätzliche Styleweiche.
Eine weitere Möglichkeit besteht darin den Wert "IE=7" zuzuweisen.
<meta http-equiv="X-UA-Compatible" content="IE=IE7" />
Das Markup wird dann wie im Standard-Modus des IE7 angezeigt, ohne Auswertung von DOCTYPE-Angaben. Bei dieser Zuweisung muss also immer sichergestellt sein, dass der Browser nicht in den Quirksmode fallen kann.
X-UA-kompatibler HTTP-Antwortheader
Der Dokumentkompatibilitätsmodus kann auch portalübergreifend über einen benutzerdefinierten HTTP-Antwortheader des Webservers festgelegt werden:
X-UA-Compatible: IE=EmulateIE7
Beim Apache 2.2 kann dies beispielsweise in der httpd.conf über die vom Modul mod_headers bereitgestellte Header-Direktive erfolgen. Alle Seiten, die innerhalb des Wirkungsbereichs ausgeliefert werden, enthalten dann den HTTP-Antwortheader "X-UA-Compatible".
Der innerhalb der Webseite festgelegte Modus hat übrigens Vorrang vor dem durch den Server festgelegten Modus. Unterscheiden sich also die angegebenen Modi von HTTP-Antwortheader und httpequiv-Header, wertet der Browser die im Head definierte Metaangabe aus.
Um die vom IE8 unterstützten standardkonformen Rendering-Eigenschaften verwenden zu können, muss eine Webseite im Modus IE8 oder höher gerendert werden, was uns zum Lösungsansatz 2 bringt.
Erweiterung der Conditional Comments
Conditional Comments bilden auf den meisten Webseiten die Basis für IE-spezifische Browserweichen, da diese Kontrollstrukturen derzeit nur vom IE und MS Office Produkten interpretiert werden. Auch der IE 8 unterstützt diese weiterhin.
Aufgrund der eingangs erwähnten weitgehenden Standardkonformität sind die Darstellungsunterschiede zwischen dem IE 8 und den aktuellen Versionen von beispielsweise Firefox oder Opera sehr gering.
Es wäre demnach in unserem Beispiel unnötiger Aufwand, für den IE8 den gleichen Weg zu gehen wie bei IE 6 und 7. Die wenigen Abweichungen zu Firefox & Co. können in einem extra Stylesheet abgefangen werden, davon abgesehen, sollte der IE8 keine weiteren korrektiven Stylesheets ziehen.
Wie bei den Browserweichen unseres Ausgangsbeispiels werden bei Conditional Comments häufig Vergleichsoperatoren verwendet.
| Operator | Funktion |
|---|---|
| lt | "less than": kleiner als |
| lte | "less than/equal": kleiner gleich |
| gt | "greater than": größer als |
| gte | "greater than/equal": größer gleich |
Wenn wir die erste Bedingung unseres Beispiels von <!--[if gte IE 5]> in <!--[if lt IE 8]> abändern, stellen wir von nun an sicher, dass die Versionen 5, 6 und 7 weiterhin die win_ie.css erhalten, der IE8 jedoch nicht.
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="/css/win_ie.css" />
<![endif]-->
Einen kleinen - wenn auch mittlerweile eher theoretischen Makel hat diese Lösung noch. Durch die Umstellung der Bedingung erhalten nun auch IE3 und IE4 die Browserweiche für den IE5. Dieser läßt sich durch die zusätzliche Verwendung eines Verknüpfungsoperatoren abstellen.
| Operator | Funktion |
|---|---|
| & | "and": und bzw. Konjunktion |
| | | "or": oder bzw. Disjunktion |
| ! | "not": nicht bzw. Negation |
Nach der Erweiterung der Conditional Comments sehen die Browserweichen unseres Beispiels dann folgendermaßen aus:
<style type="text/css" >
@import url("/css/styles.css");
</style >
<!--[if gte IE 5 & lt IE 8]>
<link rel="stylesheet" type="text/css" href="/css/win_ie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/win_ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/browser/win_ie7.css"
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="/css/browser/win_ie8.css"
<![endif]-->
Die wenigen Unterschiede in der Darstellung, die dann im IE8 noch bleiben, können in dem gesonderten Stylesheet win_ie8.css behoben werden.