Sie befinden sich hier:
» 
» 
09.04.2012

HTML5 für IE6, IE7 und IE8 ermöglichen

Der HTML5-Standard befindet sich noch in der Entwurfsphase. Er wurde noch nicht vom W3C-Konsortium freigegeben. Trotzdem unterstützen die meisten modernen Browser bereits HTML5. Insofern kann man schon heute Webseiten in HTML5 implementieren. Aber was macht man mit älteren Browsern, die HTML5 noch nicht unterstützen? Insbesondere der IE6, IE7 und IE8 reagiert ja bekanntlich nicht auf HTML5-Tags. Für diese Browser gibt es aber einen Workaround.

Damit IE6, IE7 und IE8 HTML5 unterstützen, müssen die neuen Tag-Elemente bekannt gemacht werden. Dies geschieht am einfachsten, in dem per Javascript die Tag-Elemente in den DOM-Baum eingefügt werden.

(function(d){

    if(!d.createTextNode) return;

    var elem = "article|aside|header|hgroup|nav|section".split('|');
    for(var i=0; i<elem.length; i++){
      d.createElement(elem[i]);
    }
  }
)(document);

Zusätzlich sollten diese Elemente in der Stylesheet-Deklaration als Blockelemente definiert werden, um die Durchgängigkeit zu gewährleisten.

header, nav, section, aside, footer, figure, figcaption{
  display: block;
}

Beachten Sie auch, dass das Javascript in den <head>-Bereich noch vor den Stylesheet-Definitionen eingefügt werden sollte. Nur so kann sichergestellt werden, dass die darauf folgenden Stylesheet-Definitionen auch wirklich zur Anwendung kommen.

Des Weiteren sollte das Javascript nur zur Anwendung kommen, wenn es sich wirklich um einen IE6, IE7 oder IE8 handelt. Deshalb sollten Sie das Javascript mit einen „conditional comment“ umschließen.

<!--[if lte IE 8]>
  <script type="text/javascript" src="your_path/ie-min.js"></script>
<![endif]-->

Das komplette Beispiel können Sie sich hier herunterladen:

Beispiel herunterladen als Zip Beispiel html5 für ie6, ie7, ie8

Das Beispiel beinhaltet ein Javascript in unkomprimierter und komprimierter Form. Aus Performancegründen sollten Sie das Beispiel auf die, in Ihrem konkreten Anwendungsfall, notwendigen Tags reduzieren. Gleiches gilt für das enthaltene css-Beispiel.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

39