Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 27

CSS4: So sieht die Zukunft des Webstandards aus

    CSS4: So sieht die Zukunft des Webstandards aus

Als Webprofi ist man seiner Zeit idealerweise immer ein wenig voraus. Während sich andere also erst langsam an CSS3 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.

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;
}

Links und Literatur

  1. CSS-Aktivitäten des W3C
  2. Selectors Level 4, W3C Working Draft
  3. Mozillas Vorschlag für den -moz-any()-Selektor
  4. Selectors Level 4, Editor‘s Draft
  5. Demo für cross-fade()
  6. Selectors Level 4, W3C Working Draft
  7. Bilder rendern mit CSS4
  8. Backgrounds and Borders Module Level 4,…

Finde einen Job, den du liebst zum Thema Opera, WebKit

Alle Jobs zum Thema Opera, WebKit
9 Reaktionen
florence.maurice
florence.maurice

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

Nicolai Schwarz
Nicolai Schwarz

@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

ntiedt
ntiedt

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

Antworten

ntiedt
ntiedt

@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

JensOppermann
JensOppermann

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

Antworten

mischah
mischah

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

Antworten

mischah
mischah

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

Daniel.C.Sturm
Daniel.C.Sturm

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

Frank
Frank

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

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen