Haftpflicht Blogger
Virtual Server von Host Europe

YAML4 und HTML5 für Internetexplorer IE7 und IE8

| 10. August 2012 | Keine Kommentare

Anspruch: Eine Internetseite soll in allen Browsern (Internet Explorer, Firefox, Opera, Chrome, …) gleich aussehen und dies nicht nur in der aktuellen Version, sondern auch in älteren Browserversionen.

Wer schon einmal eine Internetseite auf die Beine gestellt hat, weiß, dass dies nur mit allerlei Browserhacks und CSS-Knowhow zu bewerkstelligen ist.

CSS-Framework YAML 4.0

Ich benutze im Layout-Grundgerüst gerne das CSS-Framework YAML. Der Author Dirk Jesse beschäftigt sich nun schon seit Jahren mit der CSS-Problematik und den notwendigen Workarounds, die eine saubere Seitendarstellung ermöglichen, also muss man das Rad nicht neu erfinden.

Der YAML Versionsschritt von 3.3.1 auf 4.0.1 fällt mir aber nicht leicht. Auf den ersten Blick scheint es, dass kein Stein auf dem alten geblieben ist.

Den äußerst hilfreichen YAML-Layoutbuilder aus der Version 3 gibt es nicht mehr, dafür haben nun HTML5, CSS3 und Responsive-Layouts Einzug gehalten. Alle CSS-Klassennamen des Frameworks wurden umbenannt.

YAML 4 Beispiele

Wenn ich mir den HTML-Code der YAML 4 Beispielseiten (Flexible Grid, Columns & Grid, Custom Grid) so anschaue, dann fallen hier haufenweise die neuen Tags wie <header>, <nav>, <acticle>, <section> auf.

Kompatibilität

Frage:

Die Frage, die sich mir daher spontan aufdrängt:

Kann man das CSS-Framework YAML 4 überhaupt produktiv benutzen oder verliert man damit alle Internetbenutzer, die noch einen Browser benutzen, der nicht die HTML5 Befehle versteht?

Wird eine Seite überhaupt noch richtig dargestellt, wenn im HTML-Quellcode jetzt ein

<nav> anstatt einem <div=“nav“ class=“sonstwas“>

steht?

Antwort

Ich habe mir die YAML-CSS Beispielseiten einmal im IETester, einem Emulator für den Internet Explorer (Darstellung von Internetseiten für ältere Browserversionen), angezeigen lassen und siehe da, die Darstellung war einwandfrei.

Aber WARUM??

Wieso wird die Seite im Internet Explorer 7, der die neuen HTML5 Befehle wie z.B. <nav> und <header> nicht kennt, richtig dargestellt?

Nach etwas Recherche fand ich des Rätsels Lösung:

Das Framework ruft zu Anfang, im <head> Bereich des HTML Codes der Seite das JavaScript Programm HTML5SHIV auf, welches die neuen Tags erstellt, um diese dann für die „alten“ Internet Explorer Browser Versionen zur Verfügung zu stellen.

 

Codebeispiel

 

Wichtig: Im <head> Bereich, möglichst vor Einbindung der CSS-Stylesheets.

<head>
<meta charset=“utf-8″/>
<title>Demo: Flexible Column Layout &ndash; YAML CSS Framework</title>

<!– Mobile viewport optimisation –>
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>

    <!–[if lt IE 9]>
       <script src=“http://html5shim.googlecode.com/svn/trunk/html5.js“></script>
    <![endif]–>

<link href=“../yaml/core/iehacks.css“ rel=“stylesheet“ type=“text/css“ />
<![endif]–>

<!–  Ihr weiterer head-Code hier –>

</head>

Anzeige

 

Weiterer Lesestoff zum Thema, Alternativen

Nachdem ich nun verstanden hatte, wie im Beispielcode die HTML5 Kompatibilität hergestellt wurde, stellte sich natürlich die Frage, ob es auch Alternativen gibt.

Und die scheint es in der Tat zu geben. Schaut Euch am Besten einmal die beiden Seiten von Modernizr und HTML5Boilerplate an. Während sich Modernizr als „Weitergehender“ (siehe Featurelist Link) präsentiert und HTML5Shiv als Unterprogramm einbaut, stellt sich HTML5Boilerplate als Integrator für verschieden Lösungen dar.

 

Fazit

Man kann jetzt schon den Code seiner Internetseiten mit HTML5 schreiben, wenn man bereit ist, dafür einen HTML5-Hack einzubauen.

 

Links

Dirk Jesse: Homepage CSS-Framework YAML

Dirk Jesse: YAML4 Migration Cheat Sheet

Google-Code: HTML5SHIV JavaScript Download HTML5SHIV

IETester: Browser Compatibility Check for Internet Explorer

Modernizr : Modernizr Feature List

HTML/CSS/JS-Template: HTML5Boilerplate

Stichworte: , , ,

Kategorie: CSS

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.