Neue Semantische Elemente von HTML5 in alten Browsern

Bisher dachte ich, dass sich die Verwendung der in HTML5 neu eingeführten semantische Elemente wie beispielsweise main, section, nav, footer oder header und alte Web-Browser (IE6 ;-)) gegenseitig ausschließen.
Jedoch reicht es bei vielen älteren Browsern, ihnen die neuen Elemente per CSS als Blockelemente bekannt zu machen:
main, section, nav, footer, header {display:block;}
Dies funktioniert bei (technologisch) älteren Gecko-basierten Browsern (Classilla 9.3.2, Firefox 2.0.0.20, Camino 1.8.1.24) und WebKit-Browsern (iCab 4.9, Safari 1.3.2) problemlos.
Ein paar Screenshots von Classilla (sieht in den anderen Browsern ähnlich aus):

classilla_html5_1Fehlerhafte Darstellung in Classilla (und anderen Browsern) ohne display:block;

classilla_html5_2Classilla 9.3.2 (unter Mac OS 9) stellt die Testseite (s.u.) mit display:block; fehlerfrei dar

xp-ie6_html5_1Der Internet-Explorer 6 stellt die Seite fehlerhaft dar

Beim Internet-Explorer 6 – 8 muss man auf ein Javascript namens HTML5shim zurückgreifen, das per Conditional Comment geladen wird, also nicht von anderen Browsern berücksichtigt wird:
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

xp-ie6_html5_3Mit dem HTML5shim gibt’s auch hier kein Problem mehr

Das Testdokument:

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <!--[if lt IE 9]> <script src="html5.js"></script>  <![endif]-->
<title>HTML5</title>
<style type="text/css">
header, main, footer {display:block;}
body {font-family:sans-serif;}
header {border:2px solid green; color:red; font-weight:bold; font-size:larger; text-align:center;}
footer{text-align:center; font-style:italic;}
main {font-family:serif;}
</style>
</head>
<body>
<header>
HTML5-Test
</header>
<main>
Text...<br>...Und noch mehr (Blind-)Text in einer Schrift mit Serifen, CSS macht es möglich!
</main>
<footer>
29.03.2015
</footer>
</body>
</html>

Die grün markierten Teile sind eigentlich nicht nötig, um syntaktisch korrektes HTML5 zu schreiben, sorgen aber dafür, dass auch ältere Browser die Seite problemlos darstellen können (die Angabe der Codierung ist zwar doppelt vorhanden, ältere Browser verstehen nur die http-equiv-Variante).

Einige Puristen werden sich jetzt bestimmt beschweren, dass das Alles doch unnötiges Gebastel sei und das alte Browser einfach zu verschwinden haben, ich jedoch bin der Meinung, dass eine Lösung, die älteren Browsern eine annähernd fehlerfreie Darstellung einer modernen Seite ermöglicht, anwendbar ist, solange sich die Anpassungen für ältere Browser im Rahmen halten, sie valide sind (obiges Beispiel ist valide!) und weder den Nutzer eines modernen Browsers noch die Verwendung von HTML5 einschränken.

Das in HTML5 neu eingeführte Audio-Element muss man einem IE6 nicht unbedingt mit einem Polyfill beibringen, für solche Zwecke reicht meiner Meinung nach auch einen Alternativ-Text plus Link auf die Audio-Datei vollkommen aus, der nur von Browsern angezeigt wird, die das audio-Element nicht kennen:

<audio controls>
  <source src="sound.mp3" type="audio/mp3" />
  Ihr Browser beherrscht das direkte Abspielen der Audio-Datei noch nicht. <a href="sound.mp3" type="audio/mp3">sound.mp3 herunterladen / im Abspielprogramm öffnen</a>
</audio>
Anmerkung zum Erstellen von Screenshots unter Mac OS 9:

Screenshot des kompletten Bildschirms unter Mac OS 9 und X per ⌘ + Shift + 3

Bilddateien am PC unter Windows/Linux/BSD mit der Dateiendung .pict versehen (das klassische Mac OS (zu dem Mac OS 9 gehört) kennt keine Dateiendungen, bzw. benötigt sie nicht), dann mit LibreOffice-Draw öffnen, als PDF exportieren und zuletzt das Bild mit einem PDF-Betrachter wie beispielsweise Evince als PNG exportieren.
Unkomplizierter scheint es leider nicht zu gehen; GIMP beherrscht das PICT-Format leider nicht.

Nachtrag 02.04.2015

Auch relativ neue Browser wie IE9-11, Firefox 20, Chrome 25, Safari 6.1 (iOS), Android Browser 4.3 sowie Opera 12.17 unterstützen das main-Element nicht (vgl. caniuse.com), lassen sich aber per main {display:block;} zur Mitarbeit überreden. Wenn man es weiß, kein großes Problem…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert