HTML5 und CSS3 - Einführung

HTML5 und CSS3 gelten als die neuen Standards im Internet und sollen das schon etwas in die Jahre gekommene HTML 4.01 und CSS 2.1 ersetzen.

Häufig wird HTML5 nur als Nachfolger von Flash gesehen. Dabei kann HTML5 nicht nur Audio- und Videodateien abspielen, sondern auch noch viel mehr.

Dieser Artikel soll einen Überblick über die neuen Funktionen von HTML5 bzw. CSS3 geben.

HTML5

Neue Tags

HTML5 bietet auch einige neue Tags, welche die Übersicht und Struktur innerhalb des Quelltextes wahren sollen. Hier ist eine Übersicht über die neuen Elemente und deren Funktion:

• header - Dieser Tag soll zukünftig den Header einer Webseite beinhalten.


• nav - Ist für Navigationselemete auf der Seite gedacht.


• article - Hier soll der eigentliche Inhalt der Seite gespeichert sein. Daneben soll man hier auch verschiedene Abschnitte in einen <section> Tag gliedern können.


• aside - Dieser Tag soll für Sidebars reserviert sein.


• footer - In diesem Tag soll der Footer der Webseite beinhaltet werden.

Multimedia

Eine der bekanntesten Neuerungen ist das Video- und Audiotag. Mit diesem lassen sich Audio- und Videodateien einbinden und abspielen. Damit ist die Verwendung des Ressourcenhungrigen Flash überflüssig. Hier hat man sich allerdings noch nicht auf ein einen einheitlichen Codec geeinigt.

Weiterhin kann man nun mit Hilfe des <figure> und <legend> Tag Bilderunterschriften besser gestalten. Die Tags sind aber nicht nur auf Bilder beschränkt, man kann Sie mit nahezu allen erdenklichen Medien (z.B. Videos) verwenden.

Formulare

Auch die Formulare wurden in HTML5 sehr stark überarbeitet und ergänzt. So gibt es nun z.B. spezielle Felder für E-Mails, Webseiten, Kalender/Datum, Zahlen. Als sehr interessantes Feature ist auch die datalist, mit welcher man zu Formulareingaben passende Vorschläge anzeigen kann, wie man es auch von Google kennt.

Canvas

Mit dem Canvas Tag kann man mit JavaScript beliebige zweidimensionale Grafiken erstellen. Damit kann man z.B. Diagramme erstellen lassen, was bisher meist über Flash gelöst wurde oder kleinere Spiele erstellen.

CSS3

Runde Ecken

In CSS3 soll es nun durch die neue Eigenschaft border-radius möglich sein, die Ecken von Elementen abzurunden. Dabei kann man natürlich jede Ecke einzeln bestimmen oder alle zusammen. Runde Ecken findet man bereits seit längerer Zeit, was daran liegt, dass dies bisher durch browserspezifische Eigenschaften wie -moz-border-radius möglich war.

Schatten

Auch für Schatten existieren bereits browserspezifische Lösungen. Mit CSS3 soll allerdings die Option box-shadow eingeführt werden. Mit dieser lässt sich ein Schlagschatten um ein Element erzeugen. Dabei lässt sich sowohl das x- und y-Offset unabhängig voneinander setzen, als auch der "Blur-Radius", mit welchem man den Schatten Weichzeichnen kann. Zusätzlich ist es auch möglich den Schatten in das Element zu verlegen.

Rahmen mit Bildern

CSS3 soll auch die Möglichkeit geben mit Hilfe der Eigenschaft border-image den Rahmen eines Elements mit einer Hintergrundgrafik zu füllen. Genau wie bei allen anderen CSS Funktionen lassen sich hier auch alle Seiten des Rahmens einzeln ansprechen.

Eigenschaften von Hintergrundgrafiken

Außerdem sollen die neuen Eigenschaften background-origin und background-clip eingeführt werden.

Dabei soll mit background-origin festgelegt werden, ob das Hintergrundbild am Innenabstand, am Inhalt oder am Rahmen orientiert werden soll.

Mit background-clip lässt sich bestimmen, ob ein Hintergrundbild bis in den Rahmen hineinlaufen soll oder ob es davor aufhört.

Angabe mehrerer Hintergrundbilder

Dank der neuen Version von CSS ist es jetzt auch möglich mehrere Hintergrundbilder festzulegen. Dadurch ist es möglich z.B. den oberen Teil einer Seite mit einem anderen Hintergrund zu versehen als der untere Teil. Damit spart man die Verschachtelung mit anderen Elementen.

Transparenz

Neu eingeführt wurden auch die neue opacity Eigenschaft. Damit lässt sich die Transparenz eines Elementes von 0.0 (durchsichtig) bis 1.0 (normal) festlegen. Dies war bisher auch durch verschiedene browserspezifische Optionen möglich. Allerdings nutzt hier der Internet Explorer seine eigene Funktion namens filter.

Schriften

Erwähnenswert sind außerdem die neuen Optionen für Schriften. So kann man nun mit der Option text-wrap festlegen, an welchen Zeilen der Text nach Möglichkeit unterbrochen werden soll. Mit word-wrap kann man eine Silbentrennung aktivieren.

Die Eigenschaft text-overflow legt fest, wie mit überlangem Text verfahren wird.

Selektoren

Neben den bereits bekannten Selektoren wie z.B. :hover oder :active kommen die neuen :first-letter und :first-of-type hinzu.

Weiteres

Die neuen Optionen overflow-x und overflow-y ermöglichen das Verhalten beim x- bzw. y-Overflow festzulegen.

Ferner gibt es nun auch die Eigenschaft calc(). Mit dieser kann man Werte direkt im Stylesheet errechnen.

Fazit

Die neuen Standards HTML5 und CSS3 bieten viele neue Möglichkeiten hin zu neuen, umfangreichen Webapplikation. Allerdings ist es wichtig, dass die führenden Browser diese Standards auch unterstützen und die Anwender ein Update durchführen. Ist dies gegeben, steht einer neuen Ära des World Wide Webs nichts mehr im Wege.


Quellen: HTML5 Logo, CSS3 Logo