Du verwendest einen Internet Explorer in einer Version kleiner gleich 8. Dieser Browser wird nicht unterstützt. Bitte aktualisiere mindestens auf Version 9.
Patrick Saar - Codes

Codes

Patrick Saar

HTML5 Elemente nicht-HTML5-fähigen Browsern “bekannt machen”

Ältere Browser wie z.B. der Internet Explorer 8 von Microsoft kennen die neuen semantischen Elemente von HTML5 nicht und zeigen sie deshalb nicht korrekt an. In diesem kurzen Tutorial zeige ich, wie man dies mit ein wenig JavaScript und CSS ändern kann.
HTML5

Der Code ist zwar JavaScript und CSS, da es sich hier aber um das Erstellen von HTML5 Elementen für ältere Browser dreht, habe ich dieses Code-Schnipsel unter dieser Rubrik abgelegt. Um was geht es hier jetzt genau und wie wird das Problem gelöst?

Auf dieser Seite zeige ich, wie man es schafft, dass einige der neuen HTML5 Elemente auch in nicht-HTML5-fähigen Browsern korrekt angezeigt werden.

In HTML5 gibt es neue Elemente, die die Lesbarkeit des Quellcodes für Entwickler und für Suchmaschinen verbessern. Hierbei hendelt es sich um die neuen Tags aside, header, hgroup, footer, section, article, nav, figure, figcaption, welche einfache div-Tags repräsentieren. Ältere Browser verstehen diese Tags nicht und ignorieren sie. Um das zu verhindern, erstellen wir die entsprechenden neuen HTML Elemente per JavaScript.

// -------------------------------------------------------------------
// ------------- Autor: Patrick Saar - www.patrick-saar.de -----------
// -------------- HTML5 Elemente für ältere Browser v.1.0 ------------
// -------------------------------------------------------------------

// Fuer alle Browser, die keine HTML5 Tags kennen
document.createElement('header');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('article');
document.createElement('figure');
document.createElement('figcaption');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');

Anschließend setzen wir ihre "display"-Eigenschaft mit CSS wie bei divs auf "block". Voilà!

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

0,64 KB - Downloads: 1170

Diese Seite verwendet Cookies um die beste Nutzerfreundlichkeit zu bieten. Falls Du auf der Seite weitersurfst, stimmst Du der Cookie-Nutzung zu.
Details Ok