HTML-5-Tipps und -Tricks mit dem Boilerplate-Template

Die heutigen Anforderungen an Web-Seiten sind hoch: Sie sollen Browser-übergreifend funktionieren, performant sein, die grundlegenden Anforderungen der Barrierefreiheit erfüllen, auch in der Printversion eine gute Figur machen und zudem noch auf Smartphones funktionieren. Ein optimales Basis-Template, das all das und mehr berücksichtigt, ist HTML5-Boilerplate (html5boilerplate.com).

Und wer es nicht gesamt nutzen möchte, pickt sich die besten Rosinen - das heißt Tricks - heraus, um sie beim nächsten Projekt einzusetzen. Dahinter stecken zwei Jahre Entwicklung und Paul Irish, der die Best-Practice-Lösungen vieler Web-Entwickler zu einem Ganzen zusammengefasst hat.

Alles drin im Paket

Boilerplate gibt es in zwei Versionen: Die dokumentierte Variante enthält Erklärungen und Verweise auf weitere Informationen, die andere, "stripped", ist für den echten Einsatz gedacht. Das Downloadpaket beinhaltet in Version 0.9.5 mehrere Dateien:

• index.html ist die HTML-Grunddatei.
• 404.html bietet eine Basis für eine eigene 404-Fehlerseite.
• robots.txt hält Suchmaschinencrawler von der Indizierung einzelner Seiten ab.
• .htaccess-Datei enthält die Konfigurationen für einen Apache-Webserver. Alternative gibt es die Datei web.config zur Konfiguration eines IIS oder nginx.conf für einen nginx-Server.
• favicon.ico ist im Download-Paket das Favicon von Boilerplate, das Sie natürlich durch Ihr eigenes ersetzen müssen.
• apple-touch-icon.png ist ein Icon, das angezeigt wird, wenn jemand auf seinem iPhone ein Bookmark auf dem Homescreen ablegt. Es sollte 57 mal 57 px groß sein und Sie sollten es ebenfalls durch ein eigenes ersetzen.
• crossdomain.xml: Dieses XML-Dokument erlaubt es Webclients wie dem Flash Player oder dem Adobe Reader, Daten von anderen Domains zu laden.
• Die README.markdown-Datei beinhaltet Informationen über letzte Änderungen.
• Die CSS-Datei mit vielen spannenden Features befindet sich innerhalb des Ordners css.
• Die Dateien im Ordner demo zeigen, was Boilerplate alles leistet.
• Der Ordner tests beinhaltet QUnit - das JavaScript Unit Testing Framework.
•  Im Ordner js sind wichtige JavaScript-Dateien untergebracht, unter anderem jQuery und Modernizr.

Eine prallgefüllte Trickkiste

Die Datei index.html beinhaltet ein HTML5- Grundgerüst mit der in HTML5 üblichen Dokumentypangabe, die heute schon funktioniert:

Die meisten der im Folgenden vorgestellten Tricks sind aber natürlich nicht HTML5- spezifisch, sondern Sie können sie auch bei einem klassischen Doctype wie HTML 4.01 einsetzen.Nach der Dokumenttypangabe beginnt die erste Besonderheit, nämlich eine Aneinanderreihung von konditionalen Kommentaren:

Je nach Version des Internet Explorer wird dem html-Start-Tag eine andere Klasse hinzugefügt. Surft jemand etwa mit dem IE7, so steht dann im Quellcode:

Diese Klassenangabe ermöglicht Ihnen, komfortable Sonderangaben für unterschiedliche IEs zu machen. Sie brauchen dabei keine Extradateien zu laden, sondern können Sonderangaben direkt in Ihrer zentralen CSS-Datei einfügen - und das ganz ohne obskure Hacks.Über den Selektor .ie7 #main { } machen Sie zum Beispiel Angaben für das Element mit id="main", die nur vom Internet Explorer 7 gelesen werden. Entsprechend lassen sich besondere Formatierungen für die anderen Internet-Explorer-Versionen inklusive Version 9 definieren.Mit der Klasse no-js, die Sie ebenfalls im html-Start-Tag finden, hat es eine andere Bewandtnis. Die in index.html eingebundene JavaScript-Bibliothek Modernizr ersetzt diese Klasse bei aktiviertem JavaScript durch die Klasse js. Das ermöglicht es Ihnen, unterschiedliche Formatierungen bei aktiviertem und bei deaktiviertem JavaScript vorzunehmen:

Für die Ersetzung der Klassen ist hier, wie gesagt, Modernizr zuständig. Diese Bibliothek hat noch weitere Vorteile: Zum einen sorgt sie dafür, dass sich die in HTML5 neu eingeführten Elemente wie header oder footer auch im IE < 9 über CSS stylen lassen.Und zum anderen ist sie ein probates Mittel, um zu testen, ob der aktuelle Browser ein bestimmtes CSS3- oder HTML5-Feature unterstützt. Im head-Bereich finden Sie außerdem die folgende Zeile:

Sie bewirkt, dass das Dokument im Internet Explorer immer im neuesten Rendering- Modus dargestellt wird. chrome=1 sorgt außerdem dafür, dass zur Darstellung der Website im IE das Plugin Chrome herangezogen wird, sofern es installiert ist.Zusätzlich befinden sich im Kopfbereich die Verweise zum Einbinden des Favicon und des Apple-Icons, das übrigens auch von Android-Geräten verstanden wird.

Wenn Sie die Icons auf oberster Ebene in Ihrem Webordner untergebracht haben, können Sie diese Angaben auch löschen.

Innerhalb des body-Elements steht nur ein minimales HTML-Grundgerüst - in dieser Hinsicht macht HTML5-Boilerplate den Seitenerstellern kaum Vorgaben.Vor dem schließenden body-Tag werden alle benötigten JavaScript-Dateien eingebunden. Dass das nicht im head-Bereich, sondern so weit unten geschieht, erhöht die Performance der Seite. Eine Ausnahme stellt nur die Datei modernizr.js dar, die im head-Bereich eingebunden wird. Die Art der Einbindung von jQuery lohnt einen genauen Blick:

Damit wird jQuery von Google CDN geladen, was einen schnellen Zugriff garantiert. Sollte das aber nicht klappen, wird auf die lokale Kopie von jQuery zurückgegriffen. Weitere JavaScript-Dateien, die eingebunden werden, sind dd_belatedpng.js, damit transparente PNG-Bilder auch im IE6 funktionieren, und eine optimierte Variante von Google Analytics.Wenn Sie Letzteres in Deutschland verwenden, sollten Sie jedoch aus datenschutzrechtlichen Gründen die von Google neu eingeführte Anonymisierungsfunktion benutzen.Kurz und knapp bietet die index.html schon einmal viele Best-Practice-Lösungen, die Sie natürlich auch unabhängig von HTML5- Boilerplate nutzen können.