HTML5 / CSS3 - Praxistutorial 2 - Das Problem und die Lösung

1. Die Abschnitte

• Überblick
• Das Problem und die Lösung
• Zwischenfazit
• Anpassungen IE 8 und 9
• Anpassungen IE 8 Teil 1
• Anpassungen IE 8 Teil 2
• Das Ausklappmenü Teil 1
• Das Ausklappmenü Teil 2

2. Unbekannte Elemente und das DOM

Wenn der Internet Explorer ein HTML-Tag nicht kennt, so bringt den das so durcheinander, dass es seinen DOM-Baum übel zerhaut. Das könnt ihr sehr schön an der Darstellung in den Entwicklertools (F12) sehen.

Wie ihr seht

... stimmt da einiges nicht. Es gibt zwei in sich geschlossene <header>- und <nav>-Elemente. Und da die gesamte Struktur nicht richtig ist, greifen auch CSS-Anweisungen wie header nav nicht. So einfach ist das.

3. Die Lösung für den IE 9

... ist ganz einfach. Ihr kennt doch sicher den Kompatibilitätsmodus unseres ach so heiß geliebten Browsers. Und jetzt schaut euch mal den Dokumentmodus vom 9er genau an. Na, fällt euch was auf? Der befindet sich im Quirksmodus. Zumindest manchmal. Ich habe es ab und zu auch erlebt, das er den Standard des IE 7 genommen hat. Egal, in beiden Fällen werden Tags wie <nav> völlig falsch interpretiert.

Also benötigen wir nur eine entsprechende X-UA-Compatible-Angabe. Leider funktioniert das hier aus einem mir völlig unbekannten Grund nicht mit Conditional Comments. Keine Ahnung ob es an meiner VM liegt oder an sonst was. Egal, es gibt trotzdem eine einfache Lösung dafür.

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

Damit sagen wir dem IE, dass er, wenn möglich, den Dokumentmodus vom IE 9 nehmen soll, ansonsten den vom 8er. Und wo gehört der Code nun hin? Ich habe es schon gesagt und den entsprechenden Link dazu findet ihr auch auf dieser Seite.

4. Die Lösung für den IE 8

Tja, bei dem muss man auf ein Hilfsmittel zurückgreifen. Denn hier benötigen wir ein so genanntes Polyfill, also JavaScript-Code, der die Unzulänglichkeiten dieser Version ausbügelt. Und dafür wird die html5shiv.js eingesetzt. Die können wir aber getrost per Conditional Comment einbinden.

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->

Und was passiert dann?

Was wohl? Es wird gepfuscht, bis sich die Balken biegen. Als Erstes holt sich das Script alle Element, die der 8er nicht kennt. Dann werden alle darin enthaltenen und bekannten Elemente zwischengespeichert, die unbekannten aus dem DOM-Baum entfernt und per createElement/appendChild mit samt der zwischengespeicherten wieder eingehängt. Und das sogar ganz ohne jQuery. SCNR.

Im Detail

Damit ihr das genau versteht, will ich das Prinzip erläutern. Also, das Script durchwühlt den HTML-Code und stößt direkt zu Beginn auf das <header>- Element, von dem der IE8 keine Ahnung hat. Dann passiert einfach gesagt Folgendes.

• Es wird nach weiteren Kindelementen gesucht.
  • Danach taucht ein <nav> auf. Ebenfalls ganz böse.
  • Darin befindet sich ein <ul>, was der 8er kennt. Also merken.
• Dann <nav> in die ewigen Jagdgründe befördern.
• <header> dito.
• <header> und <nav> neu erzeugen.
• In <nav> das <ul> einhängen.
• In <header> das neue(!) <nav> einhängen.
• <header> an der richtigen Stelle ins DOM einhängen.

Damit bekommen wir einen tipp-top-sauberen DOM-Baum, in dem alles wieder da ist, wo es hingehört. Und mit dem auch der IE 8 keine Probleme mehr hat.

5. Das Ergebnis

... kann man dann in den Entwicklertools bewundern.

Die Auswirkungen

... sind erstaunlich. Mit diesen beiden popeligen Angaben sieht die Seite in beiden IE-Versionen auf einmal viel viel besser aus. Und im 9er passt auf einmal sogar die Schrift. Wir haben also eine endlich eine vernünftige Grundlage, auf der wir aufbauen können.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt