CSS3 – was wird kommen

CSS3 wird zum Standard, nur wann? Das weiß niemand so recht, solange werde ich euch aber schonmal mit diesem Einstiegsartikel unterhalten.

Die neueste CSS-Version, die mit der Nummer 3, wird modularisiert. Das heißt der Umfang der Funktionalitäten von CSS wird aufgesplittet in mehrere Module, die alle für sich funktionieren und weiterentwickelt werden können.

Natürlich werden mit CSS3 wieder etliche neue Features einherkommen, jüngstes Beispiel über das ich gestolpert bin ist die Einbindung von Content via CSS. Man kann im Stylesheet zum Beispiel angeben, daß vor jedem Listenelement ein Bildchen ausgegeben wird oder jeder Anfangsbuchstabe wird groß dargestellt usw. Darauf bin ich mal in diesem Artikel eingegangen: Schonmal Content mit CSS erstellt?

Was gibt es Neues in CSS3?

Pseudo-Klassen – Ich weiß nicht welche davon neu sind und welche schon durch vorigen Standards definiert sind, aber diese hier wird es vermutlich noch zusätzlich geben:
- :default – kennzeichnet Elemente die standardmäßig zur Verfügung stehen
- :valid und :invalid – damit kann man die Korrektheit eingegebener Formulardaten prüfen, funktioniert aber nicht ganz ohne den Einsatz von XFORMS
- :in-range und :out-of-range – wird zum Beispiel die Eingabe eines Werts verlangt, zum Beispiel 1-10, und der User gibt 11 ein, kann man das Element als fehlerhaft kennzeichnen. Bislang muss man ein Formular erst abschicken und erhält dann die Fehlermeldungen, mit diesen beiden Pseudo-Klassen kann man ein wenig dagegenwirken
- :required und :optional – ebenfalls gut auf Formulare anwendbar, wenn eine Eingabe unbedingt verlangt wird oder nur optional ist
- :read-only und :write-only – dürfte sich von selbst erklären
Die neuen Pseudo-Klassen nehmen einem viel Programmierarbeit ab, was man vorher mittels PHP realisieren musste, kann man mit CSS3 teilweise durch das Stylesheet realisieren
Pseudo-Elemente -
- ::value – bislang ist es nicht unbedingt möglich den Inhalt eines Input-Feldes, also den Value, direkt zu manipulieren, mit diesem Pseudo-Element soll dies aber nun möglich werden
- ::choices – ?
- ::repeat-item und ::repeat-index – diese beiden Pseudo-Elemente werden vermutlich häufig zusammen auftreten, oder sogar konkurrieren. Unter “repeat-item” oder “repeat-index” versteht man Child-Elemente die nacheinander aufgerufen werden, zum Beispiel beim Aufbau einer Tabelle. Dort hat eine Tabelle häufig mehrere Zeilen, die mit dem HTML-Tag “tr” gekennzeichnet sind. Mit diesen beiden Pseudo-Elementen wird man also vermutlich sich wiederholende Elemente genau transformieren können.
“box-sizing”-Eigenschaft – Eine Box mit Rahmen und Größe wird unter Umständen im Firefox unterschiedlich ausgegeben als im IE, einfach weil sich der IE nicht an das Box-Modell hält. Mit der Box-sizing-Eigenschaft sollte dieses Problem behoben werden, da die visuelle Breite einer Box nun festgelegt werden kann und die Eigenschaften von “Padding” oder des Rahmens einer Box darauf keinen Einfluß mehr nehmen können. Eine sehr gute Darstellung zum Box-Modell-Problem der unterschiedlichen Browser liefert Carsten Protsch in seinem Artikel: Der CSS-Box-Model-Bug
Mehrere Hintergrundbilder? Kein Problem! – Dies wird auch ohne Probleme möglich sein, die einzelnen “Hintergrundbilder”-Links werden mit Komma separiert und auch die Positionen und Eigenschaften können für jedes Hintergrundbild individuell eingestellt werden

Es wird also viele neue Funktionalitäten in CSS3 geben was die Grenzen im Layout wieder etwas weitet und allen Webdesignern noch mehr Möglichkeiten liefert. Bleibt nur die Frage ab wann alle Browser diese, noch nicht festgelegten, Standards unterstützen werden und ab wann CSS3 den Weg zum Mainstream-Stylesheet findet.

Wer den Werdegang von CSS3 verfolgen und die “drafts” vom W3C mal durchlesen will, der kann sie sich auf dieser Seite anschauen: W3C-CSS-drafts, in der Tabelle “W3C CSS Specifications and Timeline” finden sich alle benötigten Informationen.

Verwandte Artikel

am Juni 22, 2006 um 16:30 Uhr | in Allgemein | Kein Kommentar