Vorheriger Artikel Nächster Artikel

CSS4: So sieht die Zukunft des Webstandards aus

Aus dem
t3n Magazin Nr. 27

03/2012 - 05/2012

Als Webprofi ist man seiner Zeit idealerweise immer ein wenig voraus. Während sich andere also erst langsam an gewöhnen, lohnt sich schon einmal ein Blick auf CSS4. Natürlich wird es noch eine ganze Weile dauern, bis die ersten CSS4-Neuerungen in allen gängigen Browsern laufen. Aber die aktuellen Nightlys (Testversionen) von Firefox, WebKit und Opera laden bereits dazu ein, erste neue Eigenschaften zu testen.

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.

Das Subjekt definieren

$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.

Subjekte innerhalb des Selektors definieren

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.

Interne Links ansprechen

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;
}
NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.

1 3
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
9 Antworten
  1. von Frank am 22.02.2012 (21:44 Uhr)

    Weitere Quellen die ebenfalls lesenswertes zum doch noch sehr theoretischen Thema CSS4 bieten sind einmal David Walsh (en) und der Webstandard-Blog (dt.).

    Antworten Teilen
  2. von Daniel.C.Sturm am 05.09.2012 (14:25 Uhr)

    Hmm, gerade heute morgen einen auch sehr interessanten Artikel zu dem Thema gelesen: "THERE IS NO SUCH THING AS CSS4" http://www.xanthir.com/b4Ko0

    Antworten Teilen
  3. von mischah am 05.09.2012 (14:50 Uhr)


    Es gibt zwar eine Working draft mit dem Namen »Selectors Level 4«, das ist aber Bestandteil von CSS3.

    Oder anders gesagt, es wird gar kein CSS4 geben.
    Quelle: http://www.xanthir.com/b4Ko0


    … weitermachen ; ]

    Antworten Teilen
  4. von mischah am 05.09.2012 (14:55 Uhr)

    @Daniel Sorry, Habe dein Kommentar überlesen. Du hattest ja eigentlich schon alles gesagt ; ]

    Antworten Teilen
  5. von JensOppermann am 06.09.2012 (13:42 Uhr)

    Ich les mir das dann nochmal 2094 durch. Aber Hauptsache, man hat wieder ein "Fachartikel" mehr zum rumposen.

    Antworten Teilen
  6. von ntiedt am 06.09.2012 (13:48 Uhr)

    @Kai Sottong: Genau So seh ich das auch. Mir erscheint der Artikel auch eher Sensationsjournalismus zu sein und T3N.
    Und was viele von diesen - wie nanntest Du es Zukunftsausblicksthematikkönnteseinvielleichtwirdesschön(schönes Wort :-))-Typen nicht sehen irgend jemand muß das auch programmieren.

    Antworten Teilen
  7. von ntiedt am 06.09.2012 (13:49 Uhr)

    Tja leider gibt es keine Edit-Funktion. :-(
    ...Sensationsjournalismus zu sein von T3N...

    Antworten Teilen
  8. von Nicolai Schwarz am 09.09.2012 (13:33 Uhr)

    @Kai Sottong, @JensOppermann, @ntiedt

    Das ist die Sache mit Pflicht und Kür. Für die Arbeit mit realen Kunden muss man das nicht wissen. Aber wenn sich niemand dafür interessierte, was demnächst möglich und was vielleicht jetzt schon unterstützt wird, würden auch keine schönen experimentellen Seiten wie etwa diese hier entstehen: http://2012.beercamp.com/

    Antworten Teilen
  9. von florence.maurice am 30.01.2013 (10:17 Uhr)

    Schöner Artikel.

    Nur ein kleiner Kommentar zu den Links. Der erste Link verweist auf w3Schools und es klingt dabei so, als wäre das eine offizielle Quelle vom W3C. Und das ist w3schools ja nicht, sogar im Gegenteil. Und seitdem ich dies hier gelesen habe: http://w3fools.com/, denke ich, man sollte w3schools nicht mehr verlinken.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich CSS3
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor … » weiterlesen

CSS3: Coole Animationen für im Grid angeordnete Bilder
CSS3: Coole Animationen für im Grid angeordnete Bilder

Mit HTML5 und CSS3 stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein … » weiterlesen

t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3

Heute startet auf t3n.de eine neue Serie, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen