HTML5 und ältere Browser

Siehe auch CSS3 und Prefixe | Siehe auch Doctype

• IE Problem und HTML5
• HTML5shiv
• Conditional Comments
• normalize.css
• modernizr
• Was braucht man?

Unbekannte semantische Elemente sind unbedenklich, denn wenn ein Browser sie nicht ausführt, fällt es nicht auf, außer wenn sie eine neue Zeile im Textfluss erzeugen sollen. Von daher könnte man auch eigene Elemente erfinden, sie sollten allerdings Sinn machen.

siehe auch Browserversionen

Neue Elemente in HTML 5, die auch in älteren Browsern eine neue Zeile im Textfluss erzeugen sollen, kann man mittels CSS ein solche Eigenschaft zuweisen. display: block;

Bei den Elementen mit bestimmter Funktionalität sieht das schon anders aus. Solche Elemente sind beispielsweise canvas, video, command

Für dieses und andere Browserprobleme kann man auch normalize.css von Nicolas Gallager einbinden, siehe unten

IE Problem

Der IE Explorer erkennt die neuen HTML5 Elemente nicht und erzeugt keine neue Zeile.

Setzt man die normalize.css nicht ein, sollte man diese HTML5- Elemente mittels CSS als Blockelemente ausweisen.

hgroup, section, nav, article, aside, header, footer, adress, main{display:block;}

Außerdem erzeugen diese Elemente im IE keinen neuen DOM Knoten, der beispielsweise für Javascript gebraucht wird. Ein unbekanntes Element wird vom IE wie ein Standalone Element ohne Inhalt behandelt. Auf ein solches Element ist weder CSS noch Scripting anwendbar. Eine Lösung für das IE- Problem ist folgende:

Alle unbekannten Elemente werden in einem Script als DOM Objekte erzeugt. Das Script kann man im Kopfbereich einfügen oder besser in einer externen Javascript Datei lagern und in jedem HTML5 Dokument referenziern.

Es folgt ein Beispiel für das article Element. Auf gleiche Weise sollten auch alle anderen semantischen Elemente erzeugt werden.

< script type="text/javascript" >

document.createElement('article');

</script >

Auch für dieses Problem gibt es eine fertige Lösung die html5shiv.js

html5shiv

Damit diese neuen HTML5 Elemente auch mit Scriptsprachen im DOM erkannt werden, kann man die HTML5shiv Datei einbinden. Es sind 2 Javascript Dateien. Laden Sie sich die html5shiv Dateien runter und binden Sie diese im Head Bereich ein. Sie befinden sich in der ZIP Datei im Ordner src.

https://github.com/aFarkas/html5shiv

Sollten sie feritige Javascript Frameworks einsetzen, überprüfen Sie ob die HTML5shiv schon darin enthalten ist.

Conditional Comments

Es gibt Kommentare, die nur von Internet Explorer 9 oder tiefer ausgelesen werden. Gerade wenn man bestimmte Bereiche, wie beispielsweise Style Sheets oder Script Einbindungen definieren will, die nur von IE ab einer bestimmten Version eingebunden werden sollen, kann man das nutzen.

siehe auch Browserversionen

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

In den eckigen Klammern definiert man die Version mit einer Bedingung if.

lt steht für less than kleiner als

lte less than equal, kleiner als oder gleich

gte greater than equal, größer als oder gleich

gt greater than, größer als

Normalize

Neben dem oben erwähnten IE Problem der neuen HTML5 Elemente gibt es auch noch andere Probleme mit den unterschiedlichen Browsern. Durch Einbindung der normalize.css von Nicolas Gallger werden diese Probleme gelöst.

Laden Sie die normalize.css von Nicolas Gallager und binden Sie diese in jede Seite ein.

Desweiteren übernimmt diese CSS Datei die Aufgabe die Unterschiede der Defaultstyles der einzelnen Browser auszugleichen. Früher war es üblich alle CSS Anweisungen der Browser erstmal generell zu entfernen. siehe Reset Anstatt diese Holzhammer Methode einzusetzen, ist normalize.css vielleicht die etwas feinere Art.

In vielen Frameworks wie beispielsweise bootstrap oder boilerplate ist diese Datei enthalten.

Modernizr

Last not least gibt es noch das Modernizr Projekt. In der Komplettversion ist auch html5shiv enthalten.

http://modernizr.com/

Neben dem DOM Problem gibt es in HTML5 noch andere Elemente, die von älteren Browsern nicht erkannt werden, wie beispielsweise das canvas Element, oder die Darstellung von SVG Dateien. Damit ältere Browser diese Scripte ignorieren, kann man das mit Modernizr überprüfen.

Man kann sich unter modernizr.com eine eigene Datei zusammenstellen, in der nur die Optionen enthalten sind, die man auch benötigt. Auch eine Integration von hmtl5shiv kann man aktivieren.

Auf folgende Weise kann man im Script überprüfen, ob der Browser das Element unterstützt.

if (Modernizr.canvas) {
    // hier kommt der canvas Code rein!  }
     else {    //keine canvas Unterstützung möglich :(  
     }

Weitere Überprüfungen mit Modernizr

if (Modernizr.video) {
  // let's play some video! but what kind?
  if (Modernizr.video.webm) {
    // try WebM
  } else if (Modernizr.video.ogg) {
    // try Ogg Theora + Vorbis in an Ogg container
  } else if (Modernizr.video.h264){
    // try H.264 video + AAC audio in an MP4 container
  }
}

Was braucht man?

Was sind die wichtigsten Dateien, die man in einer modernen Webseite einbinden sollte?

normal.css von Nicolas Gallager | Tipp

prefixfree.min.css von Lea Verou | Tipp

HTML5shiv sofern man Javascript einsetzt | Tipp