Mach weiter! Wer nicht aufgibt, kann nur besser werden. Ted Williams

HTML5 Attribute und ältere Internetexplorer Versionen

Verfasst von admin am Sa, 29/10/2011 - 21:11

Html 5 für ältere Internetexplorer Versionen verwenden

HTML5 Attribute können schon einige Moderne Browser wie z.B Firefox oder Safari verstehen. Aber kann ich diese Attribute schon verwenden? Ohne Weiteres nein, da alle Internetexplorer vor der Version 9 diese Attribute nicht verstehen. Um es abzukürzen eine hohe Masse an Benutzern bekommt die Webseite nicht korrekt dargestellt.

Von welchen Attributen sprechen wir hier?

<header></header>
Definiert den Kopfbereich einer Seite oder eines Abschnitts.

<footer></footer>
Definiert den Fußbereich einer Seite oder eines Abschnitts.

<nav></nav>
Definiert einen Navigationsbereich einer Seite oder eines Abschnitts.

<section></section>
Definiert einen Abschnitt oder eine Gruppe von Inhalten auf einer Seite.

<article></article>
Definiert einen Artikel oder ein gesammtes Inhaltselement einer Seite.

<aside></aside>
Definiert Sekundäre oder ähnliche Inhalte einer Seite


Welche Ausweichlösungen gibt es für ältere IE Versionen?
IE Browser vor der Version 9 verstehen nur Bahnhof, diese können mit den oben genannten Elementen nichts anfangen.
Aber der IE ist lernfähig, was heiß das man ihm die neuen Elemente vorstellen muss.
Nein wir brauchen uns nicht mit dem IE unterhalten und auf diesen einreden.

Mit ein paar Zeilen Javascript unterstützen auch ältere IE Versionen die neuen HTML5 Attribute.
Das Javascript wird in einen speziellen Kommentar gesetzt, welchen dann auch nur IE Browser vor der Version 9 anwenden.

<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("section");
document.createElement("aside");
document.createElement("article");
</script>
<![endif]-->

Die Elemente welche genutzt werden müssen per css auf "display:block" gesetzt werden, damit die Darstellung im Internetexplorer korrekt ist.

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

So können schon jetzt Bereiche einer Webseite mit HTML5 Elementen ausgezeichnet werden ohne das Benutzer mit älteren Browser Versionen diese nicht angezeigt bekommen. Diese Ausweichlösung ist recht hilfreich und schnell eingesetzt, aber man sollte sich klar machen das man hier von Javascript abhängig ist.

nach oben
11 users have voted.

Du hast eine Ergänzung oder Frage? Teile sie jetzt mit!


Bild des Benutzers admin

Danke für die Ergänzung.

Danke für die Ergänzung.

Bild des Benutzers Sven

Hey Leute, ich habe eine

Hey Leute,
ich habe eine etwas kürzere Variante, da mir das doch sehr statisch vorkommt...
var iefix = {
onstart : function()
{
var a = new Array('section', 'article', 'nav', 'header', 'footer', 'aside');
for (var i = 0; i < a.length; i++) {
document.createElement(a[i]);
}
}
};
window.AddEventListener('load', iefix.onstart());

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
By submitting this form, you accept the Mollom privacy policy.
 
 
Cabvision Facebook Folge Canvision auf Twitter RSS Abonieren