Die Zukunft des Webdesign – Da CSS3 im Vergleich zu den vorangegangenen “Versionen” in Module aufgebaut ist und somit die Hürde der Implementierung einzelner CSS Eigenschaften für die Browserhersteller etwas niedriger ist, als wenn sie die Unterstützung einer “gesamten Version” funktionsfähig anbieten müssten, bietet sich das parallele Arbeiten an neuen Modulen nahezu an. Und damit meine ich nicht weitere CSS3 Module, sondern – CSS4 Module! Richtig gelesen! CSS4! Auch wenn, wie bereits im letzten Artikel dieses Adventskalender kurz beschrieben, eine Vielzahl an CSS3 Eigenschaften von Browsern wie dem Internet Explorer immer noch nicht unterstützt werden, gibt es keinen Grund in der Entwicklung stehen zu bleiben! Der heutige Artikel soll daher einen kleinen Ausblick darauf gewähren, was mit CSS4 möglich sein wird. Und das ist einiges!
Auch wenn von den Browser-Herstellern erst wenige und auch erst einige CSS4 Features umsetzen, lohnt es sich durchaus bereits einen Blick auf die Zukunft im Webdesign zu werfen, denn der kann sich, wie die folgenden Beispiele von CSS4 Selektoren zeigen, in jeglicher Hinsicht lohnen.
Selektoren mit CSS4

Das Selektoren bereits mit CSS3 für semantischen und performanten HTML-Code sorgen können sollte den meisten Lesern des Webstandard-Blogs bereits bewusst sein. CSS4 setzt diesem aber noch eins drauf. Denn der praktische Nutzen von CSS4 Selektoren bringt endlich das, wass sich viele Webdesign und Webentwickler bereits seit Jahr(zehnt)en wünschen.

Type selectors and namespaces
@namespace foo url(http://webstandard.kulando.de);
foo|h1 {color: blue}
foo|* {color: yellow}
|h1 {color: red}
*|h1 {color: green}
h1 {color: green}
Die Möglichkeiten die sich mit diesen Regeln ergeben sind auf den ersten Blick vielleicht nicht unbedingt ersichtlich, aber könnten unter Umständen sehr hilfreich sein. Mithilfe von CSS-Namespaces können Entwickler Standardnamespaces für CSS-Dateien deklarieren, diese werden auch in CSS4 aufgegriffen und haben unter anderen folgende Auswirkungen:

• Zeile 2 – Die erste Regel betrifft nur Überschriften der Kategorie 1, die sich innnerhalb des deklarierten Namensraums für den Webstandard-Blogs befinden

• Zeile 3 – Die zweite Regel betrifft alle Elemente, die sich innnerhalb des deklarierten Namensraums für den Webstandard-Blogs befinden

• Zeile 4 – Die dritte Regel betrifft nur Überschriften der Kategorie 1, die sich nicht innerhalb des hier deklarierten Namensraums befinden

• Zeile 5 – Die vierte Regel betrifft Überschriften der Kategorie 1, die sich in jedem möglichen Namensraum befinden (inklusive denen ohne Namensraum)

• Zeile 6 – Die fünfte Regel betrifft Überschriften der Kategorie 1

Die folgende Syntax erlaubt das Gestalten von Elementen eines übergeordneten Elementes.

Determining the Subject of a Selector
$p > a { color: black;}
Das heißt, es werden nicht die Verlinkungen a innerhalb des Textabsatzes p mit einer schwarzen Schriftfarbe versehen, sondern das p-Element. Mittels $ kann man in CSS4 also ein bestimmtes Eltern-Element gestaltet werden.
Im folgenden Beispiel, können insbesondere bei international aufgestellten Webprojekten die eine Mehrsprachigkeit unterstützen, die Inhalte je nach Sprache unterschiedlich gestaltet und somit mittels der direction (Textausrichtung, bspw. von links nach rechts (ltr = left-to-right) oder von rechts nach links) den kulturellen Bedürfnissen in Bezug auf das Webdesign entsprechend optimiert werden.

Linguistic Pseudo-Class – :dir
p:dir (ltr) { font-size:16px; }
p:dir (rtl) { font-size:18px; }
So würden die Webseiteninhalte für deutsch-sprachige Anwender in 16px großer Schrift abgebildet werden (Zeile 1), während sie bspw. für arabisch-sprachige Anwender eine 18px hohe Schrift erhalten (Zeile 2). Die Schriftgrößenangabe dient in diesem Fall natürlich nur der Beschreibung dieses Features und stellt keine wirkliche Empfehlung dar! Eine wirklich echte Empfehlung hingegen stellt der nächste Ansatz dar.
Matches-Any Pseudo-Class: “:matches()"
:matches(section, article, aside, nav) h1 { font-size:24px; }

Die Matches-Any Pseudo-Klasse :matches() stellt für mich eines der Highlights in CSS4 dar. Denn mit dieser Pseudo-Klasse die vom Mozilla mit dem :any()-Selector angestossen und vom W3C aufgegriffen wurde, ermöglicht es Pseudo-Selektoren zu definieren, welche die bisherige Syntax extrem verkürzen und somit übersichtlicher gestalten können.

Zum Vergleich einmal die aktuelle Schreibweise:

Gegenwart
section h1,
article h1,
aside h1,
nav h1 { font-size:24px; }
Ziel von beiden CSS Blöcken ist es den Überschriften 1.Ordnung innerhalb der vier angegebenen Bereiche die Schriftgröße von 24px zuzuweisen (Nur für all diejenigen die an dieser Stelle gleich wieder kommentieren wollen, warum er nicht einfach nur h1 { font-size:24px; } schreibt, sei gesagt das es noch andere Bereiche gibt, die eine h1 enthalten ;o)

Zudem bietet CSS4 weitere Pseudo-Klassen zum gestalten Userinterface-Elementen die Zustände wie :enabled, :disabled oder auch :checked an.

Fazit zu CSS4

Auch wenn die Arbeiten rund um CSS4 noch in vollem Gange und alles andere als bereits einsatzbereits sind, ist es durchaus interessant zu sehen in welche Richtung hier beim W3C und allen Beteiligten gedacht und gearbeitet wird. Wenn man sich diese Entwicklung vor Augen führt und sich den Stand der Dinge in Bezug auf CSS vor einigen Jahren ansieht, ist die Entwicklung wirklich beachtlich und lässt den Webdesigner und Webentwickler von heute in eine durchaus rosige Zukunft blicken.