CSS4 – Neue Webstandards für die Zukunft

Zukünftige Webstandards mit CSS4

CSS4  bietet viele neue Möglichkeiten Webseiten stilvoll und relativ einfach darzustellen. Zur Zeit läuft CSS4 noch nicht auf aktuellen Browsern, jedoch besteht die Möglichkeit sich erste Neuerungen auf Nightlys (Testversion) von Firefox, Safari, Chrom und Opera anzuschauen. Ich werde im Folgenden ein paar neue Eigenschaften vorstellen.

Im CSS4 ist das Ansprechen von Eltern-Elementen vorgesehen

Mit CSS4 ist nun endlich möglich Eltern-Elemente anzusprechen. Bislang bezogen sich CSS-Anweisungen immer auf das letzte Element eines Selektors. Hier ein Beispiel was diese neue Eigenschaft zeigt.

ol>li:only-child {…}

Diese CSS-Anweisung spricht alle Listenelemente(li) an, die allein in einer nummerierten Liste stehen. Mit dem Dollarzeichen “$” lässt sich in CSS4 nun das “Subjekt” eines Selektors bestimmen.

ol>$li>p {…}

Durch das “$” wird in diesem Fall das “li” angesprochen und nicht das “p”. Dies betrifft aber auch nur jene Listenelemente nach dem direkt ein “p” kommt. Listenelemente die in einer anderen HTML-Struktur bestehen, werden nicht angesprochen.

Neue Pseudoklasse für interne und externe Links

Mit CSS4 lassen sich direkt interne oder aber auch externe Links ansprechen. Ein Beispiel soll dem besseren Verständnis dienen.

a.local-link {…}

Diese CSS-Anweisung spricht nun alle internen Links an, externe Links bekommen den hier vorgegebenen Style nicht. Schreibt man nun:

a:not(local-link) {…}

dann bekommen mit dieser CSS-Anweisung alle externen Links den hier vorgegebenen Style. Interne Links sind von diesem Style nicht betroffen.

Locale Links werden im CSS4 abhängig von der URL angesprochen

Angenommen man hat 3 verschiedene Links:

  1. http://test.de
  2. http://test.de/seite1
  3. http://test.de/seite1/seite2

dazu gibt es 3 verschiedene CSS-Anweisungen:

  1. a:local-link(0) {…}
  2. a:local-link(1) {…}
  3. a:local-link(2) {…}

Bei diesem Beispiel greifen jetzt nur die ersten beiden Styles, weil:

  • Die erste Seite keinen Slash hat.
  • Die zweite hat einen Slash und zwar an der Position 0
  • Die dritte Seite hat 2 Slashes, an den Positionen 0 und 1

Die erste Seite würde keinen Style von einen der 3 CSS-Anweisungen bekommen. Die zweite Seite bekommt den ersten Style, da sie an der 0. Stelle einen Slash hat. Und die dritte Seite bekommt den zweiten Style, da sie an der 1. Stelle ein Slash hat. Würde die 3. Seite diese Form haben: http://test.de/seite1/seite2/seite3 dann würde der dritte Style greifen, jedoch nicht der 2.

Gruppierte Negation wird mit CSS4 möglich

Die “einfache” Negation mit “:not” gibt es schon seit CSS3. CSS4 bietet die Möglichkeit mehrere Klassen gleichzeitig anzusprechen und zu negieren.

Bsp.   div:not (.header, .body, .footer) {…}

Alle div’s bekommen hier den vorgegebenen Style, außer die div’s die die Klasse “header”, “body” und “footer” haben. Sie ignorieren hier die CSS-Anweisung.

Mehrfache Klassenprüfung

In CSS4 gibt es noch eine neue Pseudoklasse “:matches”, mit der man mehrere Elemente ansprechen kann.

Ich habe eine Klasse (.front-page) für 5 div’s mit zusätzlich jeweils einer weiteren verschiedenen Klasse(.box1, … , .box5). ich möchte aber nicht jeder Klasse die gleichen Styles geben. Nur 3 von ihnen sollen gleich gestylet werden(.box2, .box4 und .box5).

Dies erreiche ich mit folgender CSS-Anweisung.

.front-page:matches(.box2, .box4, .box5) {…}

Über ID-Referenz verknüpftes Label

Mit den sogenannten “reference combinators” lassen sich Elemente ansprechen die über eine ID-Referenz verknüpft sind. Ein typisches Beispiele hier für, ist das Formular.

<label for=”email”>test@test.de</label>

<input type=”input” name=”email” id=”email” />

Dadurch dass das Label mit dem input-Feld über die id “email” verknüpft ist, ist es möglich das input-Feld über das Label anzusprechen. Somit kann das input-Feld ein box-shadow bekommen, wenn man über das Label “hovert”.

label:matches(:hover) /for/ input {box-shadow: red 0 0 5px;}

Im CSS4 funktioniert das Überblenden von Bildern

Das Stichwort lautet “cross-fade”. Mit dieser Funktion lassen sich 2 Bilder ineinander überblenden.

background-image: cross-fade( url(“logo1.png”), url(“logo2.png”), 50%);

Beide Bilder werden in diesem Beispiel zu 50% angezeigt. Stellt man den Wert auf 100% ist nur das erste Bild sichtbar und bei 0% nur das zweite Bild.

Das Überblenden kann auch automatisiert geschehen. Dazu muss nach der Anweisung einfach eine Zeile ergänzt werden:

background-image: cross-fade( url(“logo1.png”), url(“logo2.png”), 50%); animation: fading 3s infinite;

Jetzt werden die Bilder alle 3 Sekunden automatisch ineinader übergeblendet, und das ganze passiert unendlich lang.

Eigenschaft “nth-match”

In CSS4 ist es einerseits möglich das n-te Element einer Tabelle oder Grid anzusprechen, jedoch auch das n-te Geschwister-Element einer Liste von Selektoren.

Fazit für das CSS4

Ich persönlich bin sehr gespannt auf CSS4, es verkürzt nochmals den Code und bietet viele neue sehr interessante Möglichkeiten eine Webseite zu stylen. Allerdings ist davon abzuraten die Nightlys (Testversionen) von Firefox & Co. auf ein Produktivsystem zu installieren. Sie laufen nicht stabil genug und stören so bei der Umsetzung produktiver Software. Eine Möglichkeit ist es die Nightly auf virtuellen Maschinen zu installieren, so sind sie separat vom Produktivsystem getrennt und haben keinen Einfluss darauf.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.