Best Practice für Websites

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

Boilerplate ist eine HTML5-Vorlage für neue Projekte und bietet eine unglaubliche Fülle an nützlichen Codeschnipseln für CSS, .htaccess-Datei und andere.

  1. HTML-5-Tipps und -Tricks mit dem Boilerplate-Template
  2. Die richtige CSS-Basis
HTML-5-Tipps und -Tricks mit dem Boilerplate-Template

© Internet Magazin

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).

internet, webdesign, boilerplate, html, html5, css, .htaccess

© Internet Magazin

Die Homepage des Boilerplate-Projekts.

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:

<!doctype html>

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:

<!--[if lt IE 7 ]><html lang="en"
class="no-js ie6"><![endif]--><!--[if IE 7 ]><html lang="en"
class="no-js ie7"><![endif]--><!--[if IE 8 ]><html lang="en"
class="no-js ie8"><![endif]--><!--[if IE 9 ]><html lang="en"
class="no-js ie9"><![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->

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:

<html lang="en" class="no-js ie7">

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:

.js #accordion { /* Formatierungen
bei aktiviertem JavaScript */ }
.no-js #accordion { /* Formatierungen
bei deaktiviertem JavaScript */ }

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:

<meta http-equiv="XUA-
Compatible"
content="IE=edge,chrome=1">

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.

<link rel="shortcut icon" href=
"/favicon.ico"><link rel="apple-touch-icon" href=
"/apple-touch-icon.png">

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

internet, webdesign, boilerplate, html, html5, css, .htaccess

© Internet Magazin

Der in Boilerplate integrierte YUI Profiler hilft Ihren Code zu analysieren.

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:

<script src="//ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.js"></script><script>!window.jQuery && document.
write(unescape('%3Cscript src="js/
libs/jquery-1.4.2.js"%3E%3C/
script%3E'))</script>

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".