CSS3 und HTML 5 schon jetzt

Schon eingespielt: CSS3 und HTML 5

CSS3 und HTML 5 locken mit lange erwarteten, neuen Features. Aber wie setzt man diese neuen Features schon heute ein? Wir zeigen Ihnen verschiedene Strategien und nützliche Tools.

Autor: Dr. Florence Maurice • 14.1.2011 • ca. 2:55 Min

internet, webdesign, css3, html 5, tools

Inhalt

Schon eingespielt: CSS3 und HTML 5
reset.css
Weitere Features
Modernizr per CSS nutzen

Runde Ecken, mehrfache Hintergrundbilder bei einem Element, Textrotationen, Farbverläufe per CSS bis hin zur einfachen Videoeinbindung in HTML und der direkten Überprüfung von Formularfeldern ganz ohne Javascript - das ist nur ein sehr kleiner Ausschnitt aus den vielen attraktiven Neuerungen von...

Bis HTML 5 und CSS3 endgültig verabschiedet sind, wird noch einige Zeit vergehen, allerdings sind viele Features schon heute in einzelnen Browsern implementiert. Und jede neu erscheinende Browserversion wird besser und unterstützt mehr: Firefox 3.6 führt Farbverläufe, das Skalieren von Hintergrundbildern und mehrfache Hintergrundbilder ein; Opera 10.5 erlaubt nun runde Ecken und das Transformieren von Inhalten per CSS; und auch der Internet Explorer 9 bringt mehr CSS3-Unterstützung und zumindest die runden Ecken.Auch wenn alles mit jeder neuen Version besser wird, so bleibt doch die Tatsache bestehen, dass der Grad der Unterstützung ziemlich unterschiedlich ausfällt: Es gibt Browser, die eine Vorreiterrolle einnehmen, andere belegen nur hintere Plätze. Wie kann man unter diesen Umständen schon heute die neuen Eigenschaften einsetzen? Im Workshop lernen Sie mehrere Tools dafür kennen.

Das Framework aus der Zukunft

Das 52Framework zeigt, wie man HTML 5 und CSS3 heute schon einsetzt: Es bündelt mehrere Dateien, die man für HTML-5- und CSS3-Projekte braucht, und zeigt anhand einer Beispielseite ihre Verwendung.Wenn Sie das Framework nach dem Download entpacken, so finden Sie einige Dateien vor, die wichtigsten davon sind:

index.html: Die Beispielseite demonstriert die Benutzung des Frameworks.
html5.js: Die Javascript-Datei erzeugt die neu in HTML 5 eingeführten Elemente.
reset.css ist eine auf HTML 5 zugeschnittene Reset-Datei.
general.css beinhaltet allgemeine CSS-Formatierungen und Vorgaben.
grid.css dient zur Erstellung von Gridlayouts.

Bei Drucklegung war die Version 1.0 des Frameworks aktuell. Aber an der nächsten Version wird schon fleißig gearbeitet und dort sind weitere Dateien integriert:

css3.css: ein Stylesheet mit Klassen für ausgewählte CSS3-Eigenschaften.
excanvas.js bessert bei der fehlenden Implementierung von canvas im Internet Explorer nach.
modernizr.js ist eine äußerst nützliche Javascript-Datei, mit der Sie testen können, ob ein Browser eine angegebene Eigenschaft unterstützt.

html5.js

Heute nimmt man für die grobe Strukturierung einer Webseite div-Elemente mit unterschiedlichen IDs. In HTML 5 kann man stattdessen passende Elemente verwenden- etwa nav zur Gruppierung von Navigationslinks, section zur Kennzeichnung eines Bereichs einer Webseite, article für einzelne Artikel eines Blogs oder header für einenKopfbereich.

Diese neuen Elemente kann man auch heute schon einsetzen, obwohl die Browser sie eigentlich noch nicht unterstützen. Um sie zu benutzen, muss man sie aber über CSSformatieren können. Das funktioniert in allen Browsern außer im Internet Explorer, der das Formatieren von ihm unbekannten Elementen prinzipiell nicht erlaubt. Abhilfe: Sie erstellen die Elemente per Javascript über document.createElement. Und genau das leistet die Datei html5.js.

Aber beachten Sie dabei: Wenn beispielsweise das Element video erzeugt wird, bedeutetdas nicht, dass jeder Browser damit das video-Element versteht. Es sorgt nur dafür, dass es sich im IE formatieren lässt.

reset.css

Eine Reset-Datei nivelliert die Browserunterschiede, indem alle Elemente auf vernünftigeAusgangswerte gesetzt werden. Die Quick&Dirty-Alternative zu einem Reset-Stylesheet ist die Angabe von

* { padding: 0; margin: 0; }

Die beim Framework mitgelieferte reset.css- Variante ist speziell auf HTML 5 zugeschnitten. Es basiert auf dem HTML-5-Reset-Stylesheet von HTML 5 Doctor, das eine modifizierte Version des Reset-Stylesheet von Eric Meyer ist. Sehen wir uns an, was diese Datei macht: Die in HTML 5 neu eingeführten Elemente zur Strukturierung von Dokumenten haben von sich aus keine Formatierung. Man würde erwarten, dass sie sich wie Blockelemente verhalten. Dafür sorgt das Reset-Stylesheet mit folgenden Angaben:

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

Für Navigationsleisten ist in HTML 5 das nav-Element vorgesehen. Innerhalb dessen wird man aber in gewohnter Manier die Links in einer ungeordneten Liste notieren. Hier entfernt das Reset-Stylesheet vorsorglich alle Aufzählungspunkte: