Jonathan Ströbele

Die Zukunft Von CSS

Geschrieben am Kategorisiert unter CSS

CSS (Cascading Style Sheets) befindet sich unter ständiger Weiterentwicklung. In diesem Artikel möchte ich einen Ausblick über kommende Features der Spezifikation geben, wie zum Beispiel den Parent Selector.

Zuallererst sollte Allerdings die Namensgebung thematisiert werden. Es handelt sich hierbei nicht um das teilweise so bezeichnete CSS4. Es gibt kein CSS4! Nach der umfangreichen Version CSS 2.1 wurde in CSS3 die Spezifikation modularisiert. Das bedeutet, dass CSS nun aus vielen verschiedenen, kleineren Modulen besteht, die unabhängig von einander weiterentwickelt werden. Dieses Vorgehen hat den Hintergrund, dass einzelne Elemente der Spezifikation nicht die Fertigstellung blockieren, wie es bei CSS 2.1 der Fall war.

Einige Liegen damit aktuell mit der Versionsbezeichnung Level 3 vor (weiterentwickelt von 2.1). Andere in Level 1, wenn sie neu hinzugefügt wurden. Einige Module werden bereits schon wieder weiterentwickelt und liegen somit schon in Level 4 vor. Ein Beispiel hierfür ist das Selektor Modul. Man sollte dies aber nun nicht CSS4 Selektoren nennen, sondern CSS Selektoren Level 4.

Der lang ersehnte Parent Selector

Fast jeder Webentwickler hat den Parent Selector auf seiner Wunschliste stehen. Ein CSS Selektor der sich eben nicht einfach nur die DOM Struktur herunterhangelt, sondern auch aufwärts selektiert. Also anhand von Kindelementen ein Elternelement anspricht.

Um das mit einem Beispiel zu verdeutlichen: wir wollen eine Liste, mit dynamischer Anzahl an Listenpunkten, immer dann ansprechen, wenn sie genau ein Listenelement besitzt.

Mit Bisherigen Mitteln hätte die Liste selbst beim Erstellen des HTML Codes, oder mittels JavaScript im Browser des Benutzers, gesondert ausgezeichnet werden müssen. Mit CSS Selectors Level 4 wird hier eine reine CSS Lösung möglich: Determining the Subject of a Selector. Mit einem vorangestellten ! kann der Kontext eines Selektors bestimmt werden. (Anmerkung: die Spezifikation ist noch nicht fertigstellt und es steht noch zur Diskussion, ob das ! voran- oder nachgestellt wird.)

!ul > li:only child

Dieser Selektor würde also nicht das Listenelement selektieren, sondern eine ungeordnete Liste mit genau einem Listenelement.

Mit der Pseudoklasse :local-link können Hyperlinks angesprochen werden, die auf dieselbe Domain verweisen. Es wäre also zum Beispiel damit auf einfachem Wege möglich eine visuelle Differenzierung zwischen externen und internen Links vorzunehmen. Zusätzlich akzeptiert die Pseudoklasse noch einen optionalen Parameter mit dem man lokale Links gezielt je nach Pfadtiefe ansprechen kann.

Beispielsweise würden die folgenden CSS Selektoren…

a:local-link { color: red }
a:local-link(0) {color: darkgreen }
a:local-link(1) { color: blue }
a:local-link(2) { color: orange }

…dieses HTML ansprechen.

<a href="http://jonathanstroebele.de/">Home</a>
<a href="http://jonathanstroebele.de/blog/">Blog</a>
<a href="http://jonathanstroebele.de/blog/die-zukunft-von-css/">Blog</a>

Der erste Link ist nicht rot, weil a:local-link durch die höhere Priorität von a:local-link(0) überschrieben wird.

:matches() und :not() Pseudoklassen

Die :matches() Pseudoklasse nimmt eine Liste von Selektoren als Argument und prüft ob diese dem Element entsprechen.

p:matches(.information, .warning, .error, #notice, #important) { font-size: 16px }

Dieser Selektor würde p Elemente mit einer dieser Klassen oder IDs ansprechen.

Als Gegenpart funktioniert die :not() Pseudoklasse identisch, nur, dass das Element nicht auf die übergebenen Selektoren zutreffen darf.

Verschiedene Styles für border-radius

Bild der vier border-corner-shape Resultate

In CSS Backgrounds and Borders Module Level 4 wird unter anderem border-corner-shape eingeführt. Mit seinen vier möglichen Optionen (curve, bevel, scoop und notch) kann das Aussehen eines Borderradius geändert werden.

Wie die jeweiligen Ergebnisse aussähen würden ist im nebenstehenden Bild illustriert.

Mehr Kontrolle über text-decoration

Mit dem CSS Text Decoration Module Level 3 wurden unter anderem einige Möglichkeiten eingeführt, um text-decoration gezielter zu gestalten. Dies umfasst die Farbe, unabhängig von der Textfarbe, mittels text-decoration-color. Den Stil mit text-decoration-style, mögliche Optionen wären zum Beispiel dotted, solid oder wavy.
Außerdem gibt es noch die Option text-decoration-skip um einzelne Teile des Textes von der Textdekoration auszuschließen, wie zum Beispiel Leerzeichen (Whitespaces).

Broweserunterstützung?

Momentan existieren diese Features leider nur auf dem Papier. Bis die Browserhersteller diese implementieren werden, wird sicher noch einige Zeit vergehen. Allerdings ist es schon heute möglich mit Tools wie Sel Selektoren aus Level 4 einzusetzen und damit herumzuexperimentieren.

Informationen zum Support von HTML oder CSS Features kann man sich immer komfortabel auf Can I use… anschauen.