CSS4: So sieht die Zukunft des Webstandards aus

Der folgende Artikel wurde Anfang 2012 geschrieben. Mittlerweile hat die CSS Working Group beim W3C klargestellt, dass es kein CSS4 geben wird. Die genaue Erklärung liefert ein Artikel von Tab Atkins Jr.

Richtig, CSS3 befindet sich immer noch in der Entwicklung und nicht alle Browser setzen die Neuerungen schon zufriedenstellend um. Das hindert jedoch nicht daran, sich schon mal ein wenig auf CSS4 einzustimmen. Zumal CSS mit Level 3 in kleinere Module aufgeteilt wurde, die sich unabhängig voneinander weiterentwickeln können. Das heißt, dass zum Beispiel das Modul der CSS4-Selektoren schneller fertig werden kann, als das CSS3-Line-Modul. [1]

Elemente noch zielgenauer ansprechen

In CSS3 sind schon eine Reihe nützlicher Selektoren hinzugekommen, CSS4 legt noch einmal nach [2]. Viele Webworker werden sich darüber freuen, endlich Eltern-Elemente ansprechen zu können.

Bislang sind sie es gewohnt, dass sich CSS-Anweisungen immer auf das letzte HTML-Element eines Selektors beziehen. So spricht „ol > li:only-child“ zum Beispiel nur jene Listen-Elemente an, die allein in einer nummerierten Liste stehen.

Mit dem Dollarzeichen („$“) lässt sich in CSS4 nun das „Subjekt“ eines Selektors bestimmen. Jenes HTML-Element also, für das die Anweisungen gelten sollen. Mit dem Ausdruck „$ol > li:only-child“ nimmt man Bezug auf dieselbe HTML-Struktur, aber durch das „$“ gilt die CSS-Anweisung jetzt für das ol-Element.

$ol > li:only-child { list-style-type: none; }

Dabei muss das neu definierte Subjekt nicht unbedingt am Anfang des Selektors stehen. Vor das „li“ gesetzt, bezieht sich das Dollarzeichen in Listing 2 etwa auf das li-Element. Insofern ist das Subjekt zwar eine nützliche – und oft geforderte – Erweiterung, sorgt aber sicherlich für einige Verwirrung bei Anfängern.

ol > $li:only-child > p { margin: 0; }

Einfacher ist die neue Pseudoklasse für lokale Links, also Links innerhalb der eigenen Domain, zu handhaben. Im folgenden Beispiel gibt die erste Anweisung allen internen Links ein entsprechendes Icon mit auf den Weg, die zweite Anweisung erledigt das analog für externe Links.

a:local-link {
 background: url('icon_link_intern.png') 0 0 no-repeat;
 padding: 0 0 0 20px;
}
a:not(:local-link) {
 background: url('icon_link_extern.png') 0 0 no-repeat;
 padding: 0 0 0 20px;
}

Weiterlesen auf Seite 2 »