Forgot your password?

Forgot your username?

All about IT, Web and Development.
By users for users.

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

Michael Kostka

Fachinformatiker / Systemintegration
Ich schreibe hier regelmäßig zu den Themen Android, Web, Linux und Hardware.

Raspberry Pi Starter Kit
DataCloud

Leave a comment

I have read the privacy policy and agree to electronically store and process my input data to answer the request.