CSS3 und HTML 5 schon jetzt

Schon eingespielt: CSS3 und HTML 5

14.1.2011 von Dr. Florence Maurice

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.

ca. 2:55 Min
Ratgeber
VG Wort Pixel
  1. Schon eingespielt: CSS3 und HTML 5
  2. reset.css
  3. Weitere Features
  4. Modernizr per CSS nutzen
internet, webdesign, css3, html 5, tools
internet, webdesign, css3, html 5, tools
© Internet Magazin

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

Bis HTML 5 und CSS3 endgü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 unterstützt mehr: Firefox 3.6 fü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-Unterstü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 Unterstü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 dafür kennen.

Das Framework aus der Zukunft

internet, webdesign, css3, html 5, tools
Über den CSS3-Selektor ::selection bestimmen Sie die Farbe des markierten Textes.
© Internet Magazin

Das 52Framework zeigt, wie man HTML 5 und CSS3 heute schon einsetzt: Es bündelt mehrere Dateien, die man fü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 eingefü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 für ausgewählte CSS3-Eigenschaften.
  • excanvas.js bessert bei der fehlenden Implementierung von canvas im Internet Explorer nach.
  • modernizr.js ist eine äußerst nützliche Javascript-Datei, mit der Sie testen können, ob ein Browser eine angegebene Eigenschaft unterstützt.

html5.js

internet, webdesign, css3, html 5, tools
Die Demoseite des 52Frameworks demonstriert Ihnen den Einsatz von CSS3- und HTML 5-Features.
© Internet Magazin

Heute nimmt man fü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 für einzelne Artikel eines Blogs oder header für einenKopfbereich.

internet, webdesign, css3, html 5, tools
Die Demoseite des 52Frameworks im IE - ohne runde Ecken oder Textschatten, aber vollkommen funktionsfähig.
© Internet Magazin

Diese neuen Elemente kann man auch heute schon einsetzen, obwohl die Browser sie eigentlich noch nicht unterstützen. Um sie zu benutzen, muss man sie aber ü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 ü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 dafür, dass es sich im IE formatieren lässt.

reset.css

Eine Reset-Datei nivelliert die Browserunterschiede, indem alle Elemente auf vernü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 eingeführten Elemente zur Strukturierung von Dokumenten haben von sich aus keine Formatierung. Man würde erwarten, dass sie sich wie Blockelemente verhalten. Dafür sorgt das Reset-Stylesheet mit folgenden Angaben:

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

Fü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:

nav ul {
list-style:none;
}

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.