Fabian Letscher – Blog + Portfolio

HTML 5 Darstellung im IE

Dies ist nun ein weiterer Artikel rund um HTML5. Es geht hierbei um zwei Wege wie man eine erfolgreiche Darstellung von HTML 5 im IE bekommt.

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.

Das CSS des Templates

Im ersten Teil der Reihe rund um HTML 5 bis zum fertigen WordPress-Theme ging es um das Markup des Templates. Nun folgt der Beitrag, der sich mit der Erstellung des Stylesheets beschäftigt.

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

Vorweg

Ich werde im Folgenden nicht auf alle Einzelheiten eingehen. Formatierungen der Absätze, Hyperlinks etc. sollten klar sein. Im Wesentlichen geht es um die generelle Struktur des Templates.
Zur Vereinfachung wird auf ein komplexes Reset des Stylesheets verzichtet und stattdessen mit folgendem gearbeitet:

* {margin:0; padding:0; border:0;}

Die HTML 5 Elemente mittels CSS ansprechen

Die neuen HTML 5 Tags werden wie gewohnt mit CSS angesprochen. Allerdings hat der Browser nicht – wie bei bekannten Tags – eine Vorstellung wie er sie darstellen soll. Daher sollte man erst einmal grundlegendes festlegen. So entsprechen die verwendeten neuen Elemente den Block-Elementen wie div oder blockquote.

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

Breite festlegen und zentrieren

Das Ergebnis soll später wie auf folgendem Bild aussehen:

Ich habe mich dabei auf eine Breite von 960px festgelegt und den Inhalt des section-Tags mit der ID ‘wrap’ zentriert.

#wrap {
width:960px;
margin:0 auto;
overflow:hidden;
}

Das overflow:hidden sorgt letztlich dafür, dass ich später keine Probleme habe ‘floats’ innerhalb der section zu benutzen.

Formatierung des Dokumentkopfes

Der Kopf des Dokuments enthält das Logo und die Seitennavigation. Der header des wrap-section-Elements ist mithilfe des Kind-Selektors ansprechbar. Er bekommt eine feste Höhe und wird relativ positioniert, da das Logo innerhalb absolut positioniert wurde.

section#wrap > header {
width:100%;
height:100px;
position:relative;
}

Die Positionierung des Logos werde ich überspringen, da hier lediglich das Hyperlink-Element mit den nötigen Formatierungen ausgestattet wurde und das h1 schließlich ausgeblendet. Man erinnere sich daran, dass man mit HTML 5 Blockelemente innerhalb des a-Inlineelements haben darf.
Die Navigation nav innerhalb des headers soll die Seitennavigation werden. Die Positionierung erfolgt durch:

header > nav {
margin-left: 380px;
}

Formatierung der Sidebar

aside {
width:310px;
float:left;
margin:40px 0 0 0;
height:1%; }

Die Sidebar wird mittels “float” an den linken Rand des section#wrap gesetzt. Um etwas Abstand nach oben zu wahren wird mithilfe der Kurzschreibweise ein Außenabstand von 40px nach oben gesetzt.

Formatierund des Inhalts

Der Inhalt des Blogs wird wieder durch ein section-Tag gruppiert, welches wie folgt formatiert wurde:

#content {
width:580px;
margin:40px 0 0 380px;
}

Auch hier wird neben einer Breitenangabe der Außenabstand noch oben festgelegt. Zudem wird ein Außenabstand nach links integriert, damit die Sidebar nicht gestört wird!

Das header-Tag des Inhalts enthält genauso wie das header-Tag der Sidebar und wie die Seitennavigation im header semantische Inhalte, die vom Benutzer automatisch richtig aufgefasst werden, und somit mittels des Stylesheets ausgeblendet werden.

section > header h3, aside > header > h2, section > header > h2 {display:none;}

Die Formatierung des arictle-Tags legt im Großen und Ganze lediglich Schriftformatierungen fest und ist daher eher uninteressant.

Zusammengefasst

Die Formatierung der neuen HTML5 Elemente ist nicht anders zu handhaben wie vorher auch. Warum auch? – an den Cascading Stylesheets hat sich ja nichts geändert. Ein wesentlicher Punkt möchte ich nochmal erwähnen: Da der Browser keine Vorstellung hat wie er mit den neuen Elementen umzugehen hat, ist es sinnvoll festzulegen, ob es sich um ein Inline-Element oder ein Block-Element handelt.

Das komplette Stylesheet kann man sich hier anschauen. Der komplette Aufbau des Templates mit ein paar graphischen Elementen ist hier zu begutachten.

WordPress – Fehler bei Paginierung

Folgende Situation: Man möchte auf einer Seite mittels einer Template-Datei eine Liste der aktuellen Posts ausgeben, wie es auch auf der Index-Seite passiert. Angenommen man möchte dann auch noch genau 10 solcher Posts ausgeben. Dann müsste man vor die Loop mithilfe von query_posts dies so bewerkstelligen:

<code>global $posts;
rewind_posts();
query_posts('cat=0&showposts=10');</code>

Dabei sorgt cat=0 dafür, dass aus allen Kategorien die Posts angezeigt werden und showposts=10, dass genau 10 auf der Seite stehen. Wenn mehr als 10 Posts vorhanden sind erscheint eine Seitennavigation. Der Link der Seitennavigation weist dann z.B auf “paged=2″ oder auch “page/2″ hin.

Wenn der Aufruf auf eine nächste Seite keine Änderung bewirkt, liegt das daran, dass die URL nicht in die query miteinbezogen wird. Die Erweiterung paged='.$paged löst das Problem:

<code>query_posts('cat=0&showposts=10&paged='.$paged);</code>

Das HTML 5 Markup

Dies wird eine Artikelserie rund um HTML5 bis hin zu einem WordPress-Theme. Der erste Teil handelt dabei von der Erstellung des HTML5 Markups. Dazu werden die neuen Elemente kurz vorgestellt und natürlich angewendet. In weiteren Folgen geht es dann um die Umsetzung mit CSS, die IE-Optimierung und die Gestaltung als WP-Theme.

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

Vorschau: Das Typography Alpha Theme

Einführung HTML5

Mit HTML5 sind einige Elemente hinzugekommen, die mehr Semantik in das Webcoding bringen sollen. Daher hier ein kurzer Ausschnitt aus dem “Working Draft” von W3C:

• section represents a generic document or application
  section. It can be used together with the h1,
  h2, h3, h4, h5, and
  h6 elements to indicate the document structure.

• article represents an independent piece of content of a
  document, such as a blog entry or newspaper article.

• aside represents a piece of content that is only slightly
  related to the rest of the page.

• header represents the header of a section.

• footer represents a footer for a section and can contain
  information about the author, copyright information, et cetera.

• nav represents a section of the document intended for
  navigation.

• dialog can be used to mark up a conversation.

• figure can be used to associate a caption together with
  some embedded content, such as a graphic or video.

Quelle: W3C

Der Aufbau des Templates

An dieser Stelle möchte ich, bevor mit den neuen Elementen gearbeitet wird, den generellen Aufbau der Seite anhand der neuen Tags zeigen. Dies soll helfen die verschiedenen Schritte besser zu gliedern:

Hier fällt deutlich auf, dass es sich mit HTML5 um eine Erweiterung handelt, welche stark auf semantischer Ebene abläuft. Vorbei die Zeit der aussagelosen div-Elemente.

Das Markup des Templates

Vorschau: Markup des Templates

Zunächst einmal der Dokumentkopf -kurz Doctype. In HTML5 wurde dieser stark reduziert und ist somit merkbar geworden:

<!doctype html>

Der nächste Schritt ist, wie man am Aufbau erkennen kann, das section-Tag. Dieses gibt eine Gruppierung an des kompletten Seiteninhalts und dient später der Formatierung mittels CSS. Es ersetzt das div-Tag, welches oft die ID “wrap” bekommen hat, um anzuzeigen, dass sich hier drin der Inhalt befindet.

<section id="wrap">
...
</section>

Die meisten section-Elemente haben zwei zugehörige Kind-Elemente: header und footer. Diese beiden semantischen Tags dienen dazu Überschriften und Meta-Informationen anzusammeln. In meinem Beispiel hat der section Bereich allerdings nur einen header:

<header>
	<a href="/" title="Home"><h1>Typography alpha</h1></a>
	<nav>
	<h3>Pages</h3>
	<ul>
		<li><a href="#" class="active">Home</a></li>
		<li><a href="#">Contact</a></li>
                  ....
	</ul>
	</nav>
</header>

Hier fällt schon eine weitere HTML5-Neuerung auf: Das Hyperlink-Element a darf nun auch um Block-Elemente wie h1 gesetzt werden.
Weiter geht es mit nav für die Navigationsbereiche einer Webseite. Weiterhin bleibt bestehen, dass Listen sich am besten eignen für die Auflistung der verschiedenen Navigationslinks.

<aside>
	<header>
	<h2>Sidebar</h2>
	</header>
	<form method="get" id="searchform" action="/">

	<h3>Search</h3>
		<fieldset>
                   ...
		</fieldset>

	</form>

	<nav>
	<h3>Categories</h3>
	<ul>
		<li><a href="#">Web <span>(9)</span></a></li>
		<li><a href="#">Economy <span>(9)</span></a></li>
		...
	</ul>
	</nav>
	...
	<hr class="invisible" />
</aside>

Eine Sidebar lässt sich nun wunderbar mit aside auszeichnen. Diese bekommt ebenfalls ein header-Element, in welchen die Funktion mittels einer Überschrift h2 dargestellt wird. Die Sidebar kann nun weitere Elemente enthalten, wie ein Suchfeld, eine zweite Navigation und natürlich noch einiges mehr.

<section id="content">
	<header>
		<h2>Blog</h2>
	</header>
...
	<footer>
	<hr />
	<p>Hier können weitere Meta-Informationen stehen</p>
	</footer>
</section>

Nun beginnt ein weiterer gruppierter Bereich, der für den Inhalt des Blogs steht. Dieser section-Tag wird später die einzelnen Blogbeiträge enthalten. Ausgezeichnet wurde dieser Bereich wieder mit einem header und einem footer.

Nun folgen die einzelnen Beiträge, die mit dem article-Element ausgezeichnet werden:

<article>
	<header>
		<h3><a href="#" title="The first entry">The first entry</a></h3>
			<a class="speak" title="Speak?" href="#">2</a>
	</header>
			<p>Hier wÃ&frac14;rde der Blogbeitrag stehen</p>
	<footer>
			<small class="meta">→ Category: <a href="#" title="Kategorie">Music</a></small>
			<hr class="invisible" />
	</footer>
</article>

Das article-Element repräsentiert einen logischen zusammenhängenden Beitrag, welcher genauso mit header und footer ausgezeichnet werden kann. Wie man sieht benutze ich im footer auch ein hr, was in HTML5 der Bedeutung eine thematischen Abschlusses entspricht.

Das Markup ist somit fertig und valide. Allerdings habe ich die neuen Elemente nach meinem eigenen Ermessen verwendet und entsprechen somit dessen was ich als logisch empfinde. Der Validator überprüft letztlich die Syntax und keine Logik!