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.

  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 Magazin

internet, webdesign, css3, html 5, tools

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

© Internet Magazin

Über den CSS3-Selektor ::selection bestimmen Sie die Farbe des markierten Textes.

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

© Internet Magazin

Die Demoseite des 52Frameworks demonstriert Ihnen den Einsatz von CSS3- und HTML 5-Features.

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

© Internet Magazin

Die Demoseite des 52Frameworks im IE - ohne runde Ecken oder Textschatten, aber vollkommen funktionsfähig.

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 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​".