1. Teil: Das HTML 5 Markup
2. Teil: Erstellung des Stylesheets
3. Teil: HTML 5 Darstellung im IE

Das IE Problem: Darstellung unbekannter Elemente

Wie man bei Peter Kröner nachlesen kann, legen die Internet Explorer 6-8 unbekannte Elemente falsch aus. Aus

<aside>
<h3>Sidebar</h3>
<p>Paragraph...</p>
</aside>

wird mit dem IE:

<aside></aside>
<h3>Sidebar</h3>
<p>Paragraph...</p>
</aside><//aside>

Das schwerwiegende Problem, was sich dadurch ergibt ist, dass Inhalte nicht mehr von den Tags umrandet werden und so schlecht zu formatieren sind.

Javascript Lösung

Die wohl einfachste Möglichkeit diese Problem zu beheben ist es, diese Elemente für den IE neu zu erzeugen. Das geht indem man folgenden Code einbaut:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Dieser sollte in den head Bereich, da der IE, bevor er die neuen Elemente zu Gesicht bekommt, wissen muss was zu tun ist.
Die html5.js- Datei lagert auf Google Code. Wem das nicht zusagt, kann sie natürlich selbst hosten. Mehr Infos zur Datei gibt es hier.

Ein Problem wäre bei diesem Ansatz die Deaktivierung von Javascript. Dadurch wird das ganze natürlich recht unnötig. Daher hier noch eine Ausweg-Möglichkeit.

CSS & Conditional Comments Lösung

Diese Möglichkeit erlaubt es speziell für den IE ausgerichtet ein Stylesheet zu erstellen. Der Nachteil ist der Mehraufwand, welcher dadurch entsteht. Jedoch kann man auch sagen, dass diese Version die Javascript-Lösung komplett ersetzt. In meinem Template kommen trotzdem beide Varianten zum Einsatz, da ich sie natürlich auch ausprobieren wollte!
Zuerst sollte man ein neues Stylesheet für den Internet Explorer anlegen und dieses in die Webseite einbinden. Wenn man eine Kombination aus der obigen Javascript-Version und dieser verwenden möchte, sollte man diese Zeile in die IE-Bedingung einfügen:

<noscript><link rel="stylesheet" href="ie.css" type="text/css" media="screen" /></noscript>

Nun greift der IE nur auf das Stylesheet zurück, wenn Javascript deaktiviert ist.

Um die ganzen Elemente wie header, section, aside und article anzusprechen, braucht man zusätzliche “Formatierungs-Elemente”. Diese fügt man entweder direkt ein.
Beispiel: Direkt eingefügte Zusatz-Elemente

<div id="header">
<header>
...
</header>
</div>

Auch möglich ist es das ganze noch in Conditional Comments zu packen. Dadurch lässt sich leichter unterscheiden, was zum IE gehört und was nicht und lässt sich dann auch leichter herausnehmen, wenn der IE neue Elemente unterstützt.
Beispiel: Element mit Conditional Comments

<!--[if IE]><div id="header"><![endif]-->
<header>
...
</header>
<!--[if IE]></div><![endif]-->

Nun lassen sich im ie.css diese zugefügten Elemente über ihre ID ansprechen. Statt der Formatierung des header-Tags wird nun die ID #header angesprochen und gleich formatiert.
Tipp: Statt um das section#wrap ein div zu spannen, reicht es aus, das body-Element dafür zu nutzen und statt des body-Elements das html-Element zu nutzen.

Weiterhin kann es vorkommen, dass man folgende Situation hat und das h2 formatieren möchte:

<div id=sidebar>
<aside>
  <header>
   <h2>...</h2>
</header>
...

Man könnte jetzt überlegen und den Fehler machen, das h2 so anzusprechen:

#sidebar > * > * > h2

Jedoch sollte man sich noch einmal daran erinnern, wie der IE das unbekannte Element umsetzen möchte:

<div id=sidebar>
<aside></aside>
  <header></header
   <h2>...</h2>
</header><//header>
...

Daraus ergibt sich, dass es keinen direkten Kindelemente gibt unter dem aside. Man muss daher wie folgt das h2 ansprechen:

#sidebar > * + * + h2

Mit diesen Hilfsmitteln kann man dann ein Stylesheet für IE optimieren. Damit sieht das Template auch im Internet Explorer (ab Version 7) korrekt aus.