Thomas J. Sebestyen: Kompatibilitätsmodus im Internet Explorer 8

Die Möglichkeiten der Webseitenersteller dem Internet Explorer 8 zu sagen, in welchem Modus er die Webseite anzeigen soll

Hah! Da ist er ja! Der schnellste Browser - zumindest laut seines Herstellers - der Internet Explorer 8.

Mit ihm ist auch eine neue Welle der Fröhlichkeit über die Webseitenersteller übergeschwappt, denn ab jetzt darf man sich auf ein verbessertes Verhalten des neuen Internet Explorers bei der Unterstützung von Standards freuen. Das ist sozusagen die perfekte Welle. Nun ja, fast.
Unzählige Webseiten sind auf die eine oder andere Art für verschiedene Versionen des Internet Explorers hin "optimiert". Der Internet Explorer 8 macht nun einen Strich durch viele solche Optimierungen. Es sei denn, man greift zu:

Dokumentkompatibilitätsmodus

Mit dem Internet Explorer 8 führt Microsoft den Begriff der Dokumentkompatibilitätsmodi ein. Nach dem DOCTYPE-Switch im IE6, bedeutet diese die größte Umstellungen für Webseitenersteller, denn der IE 8 ist in der Standardeinstellung so eingestellt, dass er Webseiten mit den höchstmöglichen Standardkompatibilität anzeigt.

Mithilfe der Dokumentkompatibilitätsmodi kann man aber sowohl auf Basis einzelner Seiten, als auch website-übergreifend festlegen, wie der Internet Explorer 8 die Webseiten darstellen soll.

META-Tags für Dokumentkompatibilität

Für einzelne Webseiten kann ein entsprechendes meta-Element im Kopfbereich der Seite notiert werden. Achtung: dieses Element muss im Header vor allen anderen Elementen stehen. Ausnahme bildet nur das title-Element und andere meta-Elemente

<html>

<head> <title>Website-Titel</title> <meta http-equiv="X-UA-Compatible" content="IE=8" /> </head> <body> <h1>Titel</h1> <p>#seiteninhalt.</p> </body> </html>

Der Internet Explorer 8 akzeptiert für das http-equiv-Attribut den speziellen Wert: X-UA-Compatible (Groß- und Kleinschreibung egal).
Im content-Attribut kann einer oder mehrere der folgenden Werte stehen:

Wert Bedeutung
IE=5 Der Code der Seite wird wie durch den Quirks-Modus von Internet Explorer 7 angezeigt
IE=7 Der Code der Seite wird wie durch den Standards-Modus von Internet Explorer 7 angezeigt, ohne Berücksichtigung der/einer DOCTYPE-Angabe
IE=EmulateIE7 Der Code der Seite wird wie von Internet Explorer 7 angezeigt, jedoch Berücksichtigung der/einer DOCTYPE-Angabe (der standardkonforme Modus wird wie vom IE7 angezeigt und der quirks-mode, wie vom IE 5)
IE=EmulateIE8 Enthält der Webseite eine standardkonforme DOCTYPE-Angabe, wird sie im "IE8" Modus, anderseits im Quirks-Modus (IE5-Modus) dargestellt
IE=8 Der IE8- oder IE8-Standards-Modus. Achtung:dies ist die Standardeinstellung für den Internet Explorer 8![1][2][3]
IE=edge Mit diesem Modus wird der Internet Explorer (8) angewiesen, den höchsten zur Verfügung stehenden Modus zu verwenden. Dieser Modus wird nur für Tests empfohlen.

ad 1)
Wenn der Internet Explorer 8 in einer Webseite keine Meta-Angabe zum X-UA-Compatible-Modus findet, versucht er die DOCTYPE-Angabe auszuwerten. Wenn eine standardkonforme DOCTYPE-Angabe vorhanden ist, schaltet er in dem "IE8-Standards-Modus", sonst in dem IE5-Modus (Quirks-Modus).

ad 2)
Die Benützung einer Meta-Angabe zum X-UA-Compatible-Modus überschreibt die benutzerseitige Einstellungen zu "Kompatibilitätsansicht" im Browser.

ad 3)
Um die von Internet Explorer 8 unterstütze CSS-Eigenschaften (die, die im IE 8 neu sind) verwenden zu können, muss eine Webseite im Modus IE8 oder höher gerendert werden (z.B. durch die Angabe des entsprechenden Meta-Elements)

Es ist möglich auch andere Angaben zum X-UA-Compatible-Modus zu machen, als die oben vorgestellten. In so einem Fall wird der Internet Explorer den nächstmöglichen Modus auswählen.
So z.B. wird ein <meta http-equiv="X-UA-Compatible" content="IE=foo"> als IE5-Modus, ein <meta http-equiv="X-UA-Compatible" content="IE=7.5"> als IE7-Modus und ein <meta http-equiv="X-UA-Compatible" content="IE=9"> als IE8-Modus behandelt.
Um mehrere Modi anzugeben , kann man diese durch Semikolon voneinander trennen: <meta http-equiv="X-UA-Compatible" content="IE=5; IE=8">. Diese Angabe würde den IE7-Modus explizit ausschließen, sofern der verwendete Version des Internet Explorers die Angaben zu mehr als einem Modus unterstützt.

Bedingte Kommentare (Conditional Comments)

Diese funktionieren auch im Internet Explorer 8. Will man nur für diesen oder höheren einen Code schreiben, kann man dies mit <!--[if gte IE 8]> ... code oder Text ...<![endif]--> tun. Natürlich kann man ebenso ein [if gt IE 7] verwenden, dies setzt aber voraus, dass es keine Unterversionen von IE 7 geben wird, bzw. falls doch, dass diese den Code unterstützen.

JavaScript

Für den Internet Explorer 8 hat Microsoft eine neue proprietäre Eigenschaft des document-Objekts, die documentMode, eingeführt. Diese Eigenschaft liefert einen numerischen Wert zurück, der dem Dokumentkompatibilitätsmodus der Seite entspricht.

var IE = null;
if (window.

.navigator.appName == "Microsoft Internet Explorer") { if (document.documentMode) { // Internet Exploter 8 IE = document.documentMode; // documentMode = 8 } else { // Internet Explorer 5-7 IE = 5; //setzt sozusagen den Quirks-Modus if (document.compatMode) { if (document.compatMode == "CSS1Compat") IE = 7; // IE7 Modus } } } }

Achtung:Die die mit dem Internet Explorer 6 eingeführte Eigenschaft compatMode wurde zu Gunsten documentMode verworfen. Scripte, die auf compatMode beruhen, werden in Internet Explorer 8 weiterhin funktionieren, sollten aber auf die Verwendung von documentMode umgestellt werden, um spätere Probleme vozubeugen.

HTTP-Header

Mit hilfe eines HTTP-Headers kann man für die gesamte Website den Dokumentkompatibilitätsmodus für den Internet Explorer 8 festlegen.
Für den Apache-Webserver sollte der benutzerdefinierte Header wie folgt aussehen:

X-

-UA-Compatible: IE=EmulateIE7

Dieser Header würde den Internet Explorer 8 dazu veranlassen, die Webseiten so dazustellen, wie der Internet Explorer 7 sie darstellen würde.
Für den Apache 2.2 kann man auch das headers_module verwenden. Dazu sollte man sicherstellen, dass das headers_module geladen wird:

LoadModule headers_module modules/mod_headers.so

Danach kann man die Zeile:

<

Header set X-UA-Compatible "IE=EmulateIE7"

in der httpd.conf-Datei hinter den LoadModule-Zeilen einfügen. Diese Direktive kann man auch in die verschiedenen Konfigurationsabschnitte (<Location>, <Directory>,<Files> und <VirtualHost>) des Server eingefügen, um genauer zu steuern, welche Seiten in welchem Modus dargestellt werden sollen.

Weiterführende Links

Entwicklerinformationsindex für den Internet Explorer 8
Was ist neu im Internet Explorer 8 (in Englisch)
Entwickler-Tool für den Internet Explorer 8 (in Englisch)
CSS Compatibility and Internet Explorer (in Englisch)

  1. In anderen Worten: Hurra, war wohl nix mit einfach Standard-konform.

  2. Wer seine Header mit solchem Kompatibilitäts-Schrott ziert, verlängert nur das Leiden der Nicht-Kompatibilität. Wenn man nicht vom Auftraggeber gezwungen wird (man ist ja nicht immer so frei) sollte man lieber einfach valide Seiten schreiben und hoffen, daß auch MS mal den Mut zum Schnitt hat.

  3. Sorry, aber der IE bleibt schlecht. Wenn schon kompatibel, dann bitte nicht über Umwege!

  4. Es war doch logisch, dass Microsoft irgendeine Form der Abwärtskompatibilität einbauen musste, denn wie sähe es aus, wenn der derzeit aktuellste IE irgendwelche alten (proprietären) Seiten auf einmal nicht mehr (richtig!?) darstellen könnte.

    Aber ... - das dürfte eigentlich nur für irgendwelche speziellen Intranet Seiten zutreffen und nicht für allgemein zugängliche Webseiten.

    Also wer bis jetzt seine Seiten standardkonform erstellt hat und irgendwelche Anpassungen für die IEs über Conditional Comments vorgenommen hat, der darf sich ab jetzt freuen, zumindest für den IE 8 auf solche zusätzliche Arbeiten verzichten zu können.

    Und wer das eben nicht so gemacht hat, der hat was falsch gemacht! ;-)

  5. Ergänzung: Der Beitrag ist gewohnt informativ. Allerdings erzeugt er beim Lesen den Eindruck, dass der Webseiten-Autor nun zwingend etwas mit dem neuen Wert für das http-equiv Attribut im Meta-Tag anstellen muss. Dies ist definitiv nicht der Fall.

    Erwähnenswert in diesem Zusammenhang halte ich aber auch noch die folgenden 2 Punkte:

    1. Der XML Prolog führt nicht mehr automatisch zur Darstellung im Quirks-Modus 2. Auch der IE8 kann immer noch keine XHTML Dokumente darstellen, die mit dem Mime-Type "application/xhtml+xml" ausgeliefert werden.

    Letzteres finde ich insofern erstaunlich, zumal Microsoft ja seit längerem verstärkt auf XML setzt.

  6. Jetzt haben wir wieder den Salat;)Wann wird das wohl mit IE aufhören?

  7. Sorry, aber der IE ist nicht mein Ding, denn ich nutze seit Jahren den FireFox den ich um Klassen besser halte!

  8. Warum kann man dieses unnütze Brwoserteil nicht einfach verschrotten, man sollte vor jede Seite ein rotes Stopschild einblenden

    Seite erfordert einen vernünftigen Browser, Viren und IE bitte draussen bleiben

  9. Wie viele hatte ich dem 8er einigermaßen optimistisch entgegen gesehen.

    Nur um festzustellen, dass er in 'seinem' Standard nicht bugfrei ist. Bisher am ärgerlichsten: der bekannte "Bleeding-Background"-Bug bei fieldsets.

    Also mir ist die Illusion, demnächst mit 'gutem' Code beim IE durchzukommen, gleich wieder verloren gegangen; die ganze CCerei geht wieder von vorne los ...

  10. Hab ich LEIDER auch getestet und wieder runter geschmissen. Ist ja wohl doch noch eine Betaversion. Im Acid3-Test 20 Punkte, da hat ja selbst der Safari mehr. Die Anzeige der meisten Seiten lässt selbst im Kompatibilitätsmodus grottig aussehen.

  11. Ich finde den IE8 eigentlich ganz gut. Was meine Vorposter da so schreiben, zeugt entweder von einer ungeheuren Voreingenommenheit oder schierer Ahnungslosigkeit. Der IE8 mag sicher einige kleinere Bugs im CSS 2.1 haben, aber dennoch unterstützt er dieses komplett. Während andere Browserhersteller mit Funktionen locken, die im Grunde nur 1 Prozent aller Internetnutzer brauchen und noch nicht einmal offiziell verabschiedet worden, unterstüzen sie zum größten Teil noch nicht einmal CSS 2.1 komplett. Und Bugs in der Darstellung gibt es auch im so heiß gelobten FF und anderen Browsern.

    Nein also der IE8 ist diesmal wirklich schon ein brauchbarer Browser geworden. Der Acid3 Test ist für meine Begriffe absolut überflüssig, zumindest zur Zeit noch. Was sagt dieser Test eigentlich aus. Hurra, mein Browser unterstützt Funktionen, die eigentlich momentan noch niemand so wirklich braucht. Na Danke, was hat der gemeine Internutzer denn davon?

    Es gibt sicherlich Dinge, die tatsächlich noch verbessert werden müssen, hier besonders die JavaScript Performance aber ich denke Mal, man kann momentan zumindest auch so damit leben. Ich zumindest habe bisher noch nicht eine einzige Webseite gesehen, die JS mäßig nicht funktionierte oder zu langsam ausgeführt wurde. Und Seitendarstellungsfehler sollte man nicht unbedingt grundsätzlich auf den IE8 zurückführen, nur weil vielleicht der FF das richtig, nein anders anzeigt.

    Take at easy Tom

  12. Ich finde, dass der neue Internet Explorer 8 tatsächlich einen großen Schritt in die richtige Richtung darstellt. Immerhin enthält er eine weitgehend fehlerfreie Implementation von CSS 2.1 - das können viele seiner Konkurrenten nicht von sich behaupten.

    Und dank des Dokumentkompatibilitätsmodus bietet er Webdesignern eine einfache Möglichkeit, auch umfangreicheren Webpräsenzen ohne großen Programmieraufwand zu einer weiterhin fehlerfreien Darstellung zu verhelfen. Das ist gerade in Zeiten knapper Budgets ein wichtiger Punkt. Insofern ist die Kritik, die teilweise im Web und auch hier in den Kommentaren zu finden ist, nicht immer ganz nachzuvollziehen.

    Ich habe auf meiner Seite in einem Artikel auch noch einmal die Möglichkeiten des IE 8 zum Thema Kompatibilität gezeigt und mit einigen Beispielen unterfüttert. Vielleicht hilft es ja dem einen oder der anderen...

    Jana

  13. Das sind sehr gute Nachrichten.

    Zeigt vor allem, dass auch open-source und open-standard Unterstützter lobbyieren können :)

    Hierzu ein Wort: Das ganze war ein absolut absehbarere Boomerang für Leute, die Ihre Homepage auf eine bestimmte IE Version ausgerichtet haben anstatt zB. das css three columns "holy grail" Layout zu verwenden. Sie können hier nun immer noch "frickeln", da IE Gnade walten lässt mit dem Kompatibilitätsmodus. Dennoch wird ein für allemal klar, dass diese Ausrichtung auf eine spezifische IE Version eine Sackgasse ist - jedenfalls auf lange Zeit.

    Clean CSS, the dream is not dead yet ;)

    Grüsse aus der Schweiz Patrick

  14. Hallo,

    danke für den netten Beitrag. Er hat mir weitergeholfen. Allerdings setze ich den Header noch vor dem DOC-Type mittels PHP wie folgt:

    <? header("X-UA-Compatible:=mulateIE7"); ?= />

  15. Man muss erstmal begreifen, dass das Symbol für die Kompatibilitätsansicht "gut" ist, wenn es erscheint. Denn wenn es angezeigt wird, bedeutet dies, dass die Webseite IE-8-konform ist. Ein Klick darauf, schaltet den Internet Explorer auf Version 7 runter. (Habe erst alles versucht, um das doofe Symbol wegzubekommen, LOL.)

    siehe auch forum.de.selfhtml.org/archiv/2009/1/t182655/

  16. Muss ein gewaltiger Schritt in die richtige Richtung gleich schlechtgeredet werden nur weil Microsoft ihn tut? Ein Internet Explorer, der sich an Standards hält, war bis vor kurzem der Traum jedes Webdesigners. Schließlich gehört der IE - immer noch - zu den meistgenutzten Browsern.

    Leider haben die diversen Macken der alten Versionen des IE viele veranlasst, einen Wust an Workarounds in Ihren Code zu packen, der jetzt nicht mehr funktioniert. Eine Kompatibilitätsanweisung im Header kann da schnell für Abhilfe sorgen, bis die eigentlichen Hausaufgaben gemacht sind.

    Schönen Gruß...

  17. Danke für diesen sehr informativen Beitrag! Allerdings gilt auch für mich: Firefox ist besser. Für den tätlichen Bedarf und als Entwicklerwerkzeug sowieso. Trotzdem führt kein Weg am IE vorbei - die breite Masse nutzt halt das, was von Microsoft zum Betriebssystem mitgeliefert wird.

    Gruß Michael

  18. also liebe leute!

    es gibt auch personen, die sich nicht immer so toll auskennen, aber trotzdem ein kleines programm geschrieben haben im publisher) und nun funkt nichts mehr! und es ist toll, wenn mn etwas im header ändert, aber wo ist denn der? wie komm ich dort hin?

  19. Ich verwende hauptsächlich Mozilla, zum Vergleich meiner Seiten aber auch den Internet Explorer. Allerdings sind die Seiten im IE oft krumm und schief. Ich werde es direkt mal ausprobieren. Danke!

  20. Der IE ist und bleibt schlecht. Nie wirklich kompatibel...

  21. schön dass es einen Kompatibilitätsmodus für den IE gibt, denn man per meta angabe setzen kann. Aber das man für den Internetexplorer immer irgendwelche Weichen bereitstellen muss (und das schon seit Jahren) ist schon eine farce ...

  22. ich habe es ausprobiert...! Klappt prima

  23. Vielen Dank für den informativen Beitrag! Für mich gilt allerdings, Firefox ist besser. Für den täglichen Bedarf und für die SEO Arbeit sowieso. Trotzdem Danke!