Die richtige CSS-Basis

Die richtige CSS-Basis

Zu Beginn der CSS-Datei steht das Reset, das Zurücksetzen der Formatierung der Elemente auf eine einheitliche Basis. Das bei Boilerplate verwendete Reset basiert auf Reset Reloaded von Eric Meyer, ist aber von HTML5Doctor für HTML5-Bedürfnisse modifiziert.So werden etwa die in HTML5 neuen semantischen Elemente wie header, article oder aside zu Blockelementen gemacht oder die Aufzählungspunkte bei ungeordneten Listen innerhalb von nav- Elementen entfernt. Nach dem Reset finden sich weitere nützliche Angaben in der CSS-Datei:

bewirkt beispielsweise, dass Firefox und Co. immer einen Scrollbalken anzeigen. Dadurch wird das Springen der Seiten vermieden, wenn bei einem Wechsel zwischen einer Seite mit wenig Inhalt auf eine mit mehr Inhalt plötzlich der Scrollbalken benötigt und eingeblendet wird.Beim Klick auf einen Link wird dieser normalerweise mit einem kleinen gestrichelten Rand umgeben. Das stört oft optisch, ist aber andererseits eine wichtige Hilfe zur Orientierung für Nutzer, die die Seite per Tastatur anstatt mit Maus bedienen.Wie also entfernt man diesen gestrichelten Rand so, dass er trotzdem noch bei der Tastaturnutzung zu sehen ist? Eine funktionierende Lösung hat Patrick Lauke von Opera entwickelt und sie ist ebenfalls im Boilerplate- Stylesheet integriert:

textarea-Elemente haben im Internet Explorer automatisch einen Scrollbalken, der sich durch folgenden Code entfernen lässt:

Eine konsistente Darstellung von Formularelementen über Browser-Grenzen hinweg ist keine einfache Angelegenheit. Der folgende Code-Schnipsel hilft bei einer einheitlichen Platzierung der Legend.

An diesem Beispiel sehen Sie auch, wie Sie mithilfe der über konditionale Kommentare eingefügten Klasse im html-Start-Tag komfortabel Sonderangaben für die unterschiedlichen IEs vornehmen können.Wenn Sie Bilder per CSS oder sonst in ihrer Größe verändern, verbessern Sie die Darstellung im IE7 durch Folgendes:

Schließlich gibt es mehrere praktische Klassen: .ir ist für eine barrierefreie Methode der Bildersetzung vorgesehen:

Das ist wesentlich besser, als etwa den Text über display:none auszublenden, wodurch der Text auch vor Screenreadern versteckt wäre.

Darüber hinaus gibt es aber auch Klassen, um Elemente vor Screenreadern und Browser zu verstecken (.hidden) oder um Elemente nur für Browser in der Anzeige zu verstecken, für Screenreader jedoch sichtbar zu lassen (.visuallyhidden).Fehlen darf hier selbstverständlich ebenso nicht der Clearfix-Hack in einer auf die aktuelle Browser-Realität optimierten Variante:

Wenn Sie die Klasse clearfix bei einem Element ergänzen, so umschließt es die in ihm befindlichen gefloateten Elemente.Schließlich stehen am Ende noch verschiedene Media-Stylesheets: Nach den Mediaqueries für mobile Browser finden Sie sinnvolle Defaultangaben für ein Printstylesheet:

Dass diese Angaben nicht in einer eigenen Datei ausgelagert werden, hat einen guten Grund: Browser laden prinzipiell Printstylesheets, auch wenn die Seite normal angezeigt und nicht ausgedruckt wird. Deswegen ist es sinnvoll, die Angaben für den Ausdruck direkt im Stylesheet zu integrieren, um einen zusätzlichen HTTP-Request einzusparen.Sie sehen, dass sehr viele der Tricks der Performance-Optimierung dienen. Mehr dazu finden Sie in der .htaccess-Datei, die im Kasten auf der vorherigen Seite vorgestellt wird.Wie Sie Boilerplate einsetzen, ist schließlich ganz Ihnen überlassen: Sie können sich einige nützliche Angaben kopieren oder auch Boilerplate direkt nutzen und dann Nichtbenötigtes herauslöschen - wie es auch auf der offiziellen Webseite heißt: HTML5 Boilerplate ist Löschtasten-kompatibel.

Die richtige .htaccess-Datei

Auch die in Boilerplate integrierte .htaccess- Datei ist randvoll mit nützlichen Einstellungen: Zuerst einmal beinhaltet sie den Header für den IE, damit dieser die Seite im neuesten Modus oder im Google-Chrome-Frame darstellt. Wenn Sie diese Angabe in Ihrer .htaccess-Datei haben, können Sie sich das entsprechende Meta- Element in index.html sparen.Außerdem findet sich eine Angabe, wodurch die Webfonts von allen Domains geladen werden können - das ist wichtig, wenn Sie herunterladbare Schriften bei Subdomains benutzen.Sehr viele neue Medientypen sind in letzter Zeit dazugekommen: von den verschiedenen Dateitypen für die herunterladbaren Schriften inklusive SVG bis hin zu den neuen Typen von Videodateien. Dass all diese mit dem richtigen MIME-Typ ausgeliefert werden, dafür sorgen die entsprechenden AddType-Angaben.Für eine performante Webseite braucht man mehrere Bausteine - die GZIP-Kompression ist einer davon und ebenfalls Bestandteil der Boilerplate-.htaccess-Datei. Ein weiterer Baustein sind die Expires-Header, über die Sie festlegen, welche Dateien aus dem lokalen Cache und welche neu vom Server geholt werden sollen.Hier macht Boilerplate je nach Dateityp unterschiedliche Vorgaben. Beispielsweise sollen HTML-Dokumente immer neu angefordert werden, da sie sich geändert haben können. Anders ist es bei Bilddateien, die besser aus dem Cache geladen werden.

Die folgende Angabe sorgt dafür, dass eine eigene Fehlerseite angezeigt wird:

Weitere nützliche Dinge sind die allgemeine Festlegung von UTF-8 als Zeichensatz, die Umleitung von www.domainname.de auf domainname.de oder das Ausschalten der Serversignatur, da ja nicht jeder wissen muss, dass das Dokument von Apache ausgeliefert wird.Hilfreich - aber standardmäßig auskommentiert - sind Angaben, die ermöglichen, dass beim IE auch Cookies innerhalb von iFrames gesetzt werden können. Die .htaccess-Datei ist eines der Herzstücke von Boilerplate und es sind ebenfalls Konfigurationsdateien für den IIS vorhanden.

JavaScript-Helferchen

Boilerplate beinhaltet eine ganze Reihe von nützlichen JavaScript-Dateien, die eine solide Basis für Projekte darstellen. Da ist zum einen erst einmal Modernizr, der zweierlei bringt: Er sorgt dafür, dass sich die neuen HTML5-Elemente auch im IE < 9 stylen lassen und zum anderen kann man mit seiner Hilfe herausfinden, ob ein Browser bestimmte aktuelle CSS3- oder HTML5-Features unterstützt. Außerdem ist natürlich jQuery eingebunden.

Link-Tipps

Profiling hilft bei der Codeoptimierung. Tools wie Firebug haben bereits einen Profiler integriert. Browserübergreifend funktioniert hingegen der bei Boilerplate verwendete YUI Profiler, den Sie nutzen können, um Ihren Code zu analysieren und Schwachstellen auszumerzen. Er wird aufgerufen über PROFILE.show() und zeigt die Ergebnisse optisch gut aufbereitet.

Der Profiler ist in index.html integriert und Sie sollten den Verweis darauf beim produktiven Einsatz entfernen. Ob tatsächlich das geschieht, was geschehen soll, lässt sich mit sogenannten Unittests automatisch überprüfen. Boilerplate integriert hier das QUnit, ein JavaScript Unit Testing Framework, das Sie im Ordner test finden.Häufig verwendet man unter Firefox mit aktiviertem Firebug console.log(), um beim Debugging Meldungen ausgeben zu lassen. Wenn man vergisst, diese Aufrufe wieder zu entfernen, kann das im Internet Explorer zu JavaScript- Fehlern führen. Als Abhilfe finden Sie in script.js eine Funktion log() definiert. Diese überprüft erst, ob console.log() funktioniert, bevor sie die Meldung ausgibt.

Dadurch können Sie problemlos log() (aber nicht console.log()) aufrufen, ohne befürchten zu müssen, dass Sie JavaScript-Fehler im IE produzieren.document.write()-Aufrufe aus fremdem Code können störend wirken. Eine ebenfalls in plugins.js integrierte Funktion fängt diese ab. Sie können ihr einen regulären Ausdruck von Funktionen übergeben, bei denen document.write() zugelassen werden soll.