html5shiv gewinnt gegen IE 6′ Sturheit

geschrieben am Donnerstag, 12. Mai, 2011

Wie ihr alle wisst, bringt HTML5 eine Menge neuer Tags mit sich. Da gibt es zum Beispiel semantische Tags wie <article>, <section> oder <aside>, aber auch komplett andere Features wie zum Beispiel der neue local Storage. Wie dem auch sei. Wenn man schon die Möglichkeit hat, ein semantisches HTML-Dokument zu bauen, dann möchte man dies auch gern in Erwägung ziehen.

Das Problem

Richtig. Es gibt wie immer einen Haken. In diesem Fall, Ich mache es kurz – Überraschung – der Internet Explorer. Die Verwendung von semantischen HTML5-Tags bietet uns Entwicklern und auch Designern die Möglichkeit, sehr schlanke HTML-Dokumente zu schreiben. So wird aus seinem Jungle aus tausenden von <div>-Tags, versehen mit weitaus mehr class- und ID-Attributen, ein sauberes, schlankes, leicht zu lesendes HTML-Dokument. Und da das Ganze eher wie ein schöner Traum klingt, weil es meist immer noch Auftraggeber gibt, die eine Abwärtskompatibilität bis in den zweiten Weltkrieg zurück haben wollen, ist es natürlich der Internet Explorer, der uns einen Strich durch die Rechnung macht.

Die coole Sache: Wir können innerhalb unseres CSS’ alle nur erdenklichen Arten von Tags selektieren und unseren wünschen nach stylen. So würde man also wie gehabt bei folgendem HTML-Quellcode das <article>-Tag mit dem Selector article ansprechen und stylen.

<html>
    <head><title>Titel</title></head>
    <body>
        <article>
            <!-- Hier folgt HTML-Code der einen Artikel beschreibt -->
        </article>
    </body>
</html>

Die schlechte Sache: Der Internet Explorer rafft das nicht. Diese neuartigen Tags kennt der Internet Explorer nicht und würde aus diesem Grund auch das Styling kommentarlos ignorieren.

Die Lösung

Okay, völlig verrückte Sache aber wahr (wnstw™): Der Internet Explorer ignoriert diese neuen Tags nicht, wenn diese als DOM-Elemente mit JavaScript erzeugt werden, bevor dass DOM fertig geladen ist. Fragt nicht nach dem Sinn, schon gar nicht nach der Ursache. Seit froh, dass es einen Weg gibt, diesem Browser einen Streich zu spielen.

Wir müssen also nichts weiter tun, als jedes HTML5-Tag einmal mit JavaScript als DOM-Element zu erzeugen. Das Ganze könnte folgendermaßen aussehen:

document.createElement('article');
document.createElement('section');
document.createElement('aside');
...
..
.

Die erzeugten Elemente tauchen nirgendwo im DOM auf. Sie fliegen quasi herrenlos im Speicher herum. Aber mal ganz abgesehen davon, dass das absolut unperformanter Code ist (Zugriffe auf das document-Objekt sind ja bekanntlich teuer, vom globalen Scope mal ganz zu schweigen), stellt sich schnell heraus, dass es ein eher lästiger Weg ist, jedes neue Tag als DOM-Element zu erzeugen.

Die bessere Lösung

Da wir offenbar nicht die ersten sind, die diesen Workaround zur Kenntnis genommen haben, gibt es selbstverständlich eine bereits implementierte Lösung für dieses Problem. Diese Lösung trägt den Namen html5shiv und macht prinzipiell das Gleiche, nur ein bisschen schicker und wir wollen das Rad ja kein zweites Mal erfinden und es schon gar nicht auf eigene Art definieren.

Bindet diese Mini-Library einfach in den Kopf eures HTML-Dokuments und ihr seit das Problem mit den neuen HTML-Tags im Internet Explorer los. Und Achtung! Man mag es kaum glauben, aber dieser Workaround funktioniert sogar im Internet Explorer 6!

Kurz zur internen Vorgehensweise von html5shiv: Es erzeugt ein Array mit allen neuen HTML5-Tagnamen, iteriert über dieses und erzeugt jeweils ein DOM-Element mit createElement($name);. Zum Schluss möchte Ich doch gern auf die untere Frage hinweisen, die zu sehen ist, wenn ihr dem Link zu html5shiv folgt:

Common question: what’s the difference between the html5shim and the html5shiv?
Answer: nothing, one has an m and one has a v - that’s it.