Durch CSS3 werden viele neue Funktionen für den Webdesigner eingefügt. Hierdurch wird für den Webdesigner das Erstellen des Layouts wesentlich einfacher. Aber auch andere visuelle Highlights sind mit CSS3 möglich. Da aber aktuell noch kein Erscheingstermin für CSS3 feststeht, stellt sich die Frage, was heute schon möglich ist und von welchen Browsern es unterstützt wird.

Im Gegensatz zu den vorherigen CSS-Versionen wird CSS3 in Modulen aufgebaut sein. Hierbei wird eine Vielzahl von Modulen unterschieden. Eine vollständige Liste ist hier zu finden. In diesem Artikel wird ein Auszug von neuen Funktionen gegeben, die sich in verschiedenen Modulen befinden. Außerdem wird am Ende ein praktisches Beispiel gegeben, was heute schon mit CSS möglich ist.

Spaltenlayout mit CSS3

Von manchen Webdesignern wird auch heute noch gerne das veraltete Tabellenlayout eingesetzt. Hierbei wird der Tabellenrand auf 0 gesetzt und durch die Spalten und Zeilen das Layout erstellt. Dieses Verfahren ist höchst umstritten und hat bekanntlich viele Nachteile.  Als Vorteil wird hierbei oft die Einfachheit genannt, mit der es möglich ist, mehrspaltige Layouts zu erstellen.

Dieser Vorteil soll mit CSS3 auch endlich zum Standard gehören:

#4spalten {

column-count: 4;
column-width: 200px;
column-gap: 10px;

}

Hierbei wird mit dem Befehl „column-count“ die Anzahl der Spalten in dem Container festgelegt. Durch den „gap“ Befehl wird der Abstand zwischen den Zeilen bestimmt und durch „width“ die Breite der einzelnen Spalten. Somit ist es möglich, mit CSS3 einfache Spaltenlayouts zu erstellen.

Filterungsmöglichkeiten mit CSS3

Mit CSS3 wird es möglich sein, den Text granular zu filtern. Dieses bedeutet, dass die Filterungsmöglichkeiten wesentlich feiner werden. Somit ist es möglich, dass angeklickte Radio-Buttons oder markierte Checkboxen anders markiert werden als nicht aktivierte. Aber auch das „Highlighten“ einzelner Wörter ist möglich. Hierdurch können automatisch einzelne Begriffe mit einer speziellen Farbe oder Formatierung versehen werden.

p:has(Blog)

Würde sich auf alle Textabschnitte beziehen, die das Element „Blog“ enthalten. Außerdem werden noch weitere Filterungsmöglichkeiten hinzugefügt. Welche der Browser davon bereits unterstützt, kann sehr gut auf dieser Seite getestet werden.

Runde Ecken, Ränder und Schatten mit CSS3

Ein weiteres kleines Extra, welches aber nicht unerheblich ist, ist das Erstellen von Runden Ecken. Durch die Option „border-radius“ ist es möglich, runde Ecken zu erstellen. Für die Erstellung muss der horizontale und vertikale Radius der Eclipse angegeben werden, da bei der Erstellung von einer Eclipse ausgegangen wird. Der Radius kann auch für jede Ecke einzeln angegeben werden.

Vielen Webdesignern ist bestimmt schon bekannt, dass der Mozilla Browser diese Funktion bereits unterstützt. Durch „moz-border-radius“ können für den Firefox-Browser runde Ecken erzeugt werden. Wahrscheinlich wird der Befehl aber mit dem Erscheinen von CSS3 wegfallen.

Bei Bildern ist es möglich, mit dem Befehl „border-image“  Ränder für die Bilder zu erstellen. Auch hierbei ist es möglich, abgerundete Ecken zu erstellen. Neu in CSS3 ist auch die Möglichkeit, Schatten hinzuzufügen. Dieser  Schatten kann entweder um bestimmte Boxen gelegt werden, aber auch hinter bestimmten Texten. Bei Texten ist es auch möglich, mehrere Schatten zu hinterlegen. Hierdurch können neue visuelle Effekte erreicht werden.

CSS3 schon jetzt implementieren?

Wenn CSS3 eingesetzt werden soll, muss man damit leben, dass die Internetseite nicht in allen Browsern gleich aussieht. Dieses ist dem Kunden oft schwer zu vermitteln, und in den meisten Fällen auch berechtigt. Aber in manchen fällen kann mit CSS3 der Funktionsumfang sehr gut ergänzt werden. Ein schönes Beispiel hierfür ist die Seite forabeautifulweb.com. Hierbei werden drei DVD-Hüllen angezeigt. Geht man im Internet-Explorer oder Opera über die Hüllen wird nur die „Hand“ für einen Link angezeigt, beim Firefox fallen die DVD´s ruckartig aus der Hülle. Dagegen wird im Safari eine schöne Animation angezeigt, bei der sich die DVD´s langsam aus der Hülle drehen.

Durch CSS3 wird dem Webdesigner das Erstellen von Internetseiten wesentlich einfacher gemacht. Dennoch ist es noch zu früh um voll auf CSS3 zu setzen. Da noch kein Zeitpunkt bekannt ist an dem CSS3 veröffentlicht wird, sollten höchstens ergänzende Features eingebunden werden. Wichtig hierbei ist aber, dass die Internetseite auch ohne CSS3 voll funktionsfähig bleibt.