Drücke die Tasten ◄ ► für weitere 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 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.

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

1 3
Autor:
151 Shares bis jetzt –Dankeschön!

Bewerten
VN:F [1.9.22_1171]
14 Antworten
  1. von Frank am 22.02.2012 (21:44Uhr)

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

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

    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

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


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

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

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

  5. von Steffen Bruchmann via facebook am 05.09.2012 (18:18Uhr)

    Was CSS4 genau ist, erklärt dieser Artikel: http://www.xanthir.com/b4Ko0

  6. von Jochen Herkenrath via facebook am 05.09.2012 (19:17Uhr)

    Die Sicht der CSSWG ist allerdings auch nur eine von vielen. Elternableitungen etc. sind mit lesscss.org o.ä. schon lange möglich, wenn auch kein sogenannter "Standard"

  7. von Daniel Büttner – Webdesign am 05.09.2012 (20:34Uhr)

    [...] CSS4: So sieht die Zukunft des Webstandards aus [...]

  8. von Kai Sottong via facebook am 06.09.2012 (10:17Uhr)

    Also, wie findet Ihr Weihnachten 2022 ? ... so langsam nervt diese Zukunftsausblicksthematikkönnteseinvielleichtwirdesschön blabla ... lasst uns doch erst mal HTML5 und CSS3 richtig zum laufen bekommen :)

  9. von JensOppermann am 06.09.2012 (13:42Uhr)

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

  10. von ntiedt am 06.09.2012 (13:48Uhr)

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

  11. von ntiedt am 06.09.2012 (13:49Uhr)

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

  12. von Nicolai Schwarz am 09.09.2012 (13:33Uhr)

    @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/

  13. von Die SOLADES Linktipps Nr 1 am 11.09.2012 (15:14Uhr)

    [...] Ein Artikel bei t3n sorgte zuletzt für Unruhen: Während dort ein paar nützliche Funktionen des Nachfolgers von CSS3 [...]

  14. von florence.maurice am 30.01.2013 (10:17Uhr)

    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.

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Aktuelles aus dem Bereich CSS3
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

Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

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

t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]

Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen