CSS4 - Die Zukunft des Webdesign - Tag 22 im CSS3 Adventskalender 2011

CSS4 - Die Zukunft des WebdesignDie 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!

Modernes Webdesign mit CSS - Das neue Buch!

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.

Was haltet Ihr von den neuen Features und den sich daraus ergebenden Möglichkeiten?

  1. webSimon
    22 Dez 2011, 00:07

    CSS4, das ist aber nun wirklich Zukunftsmusik. Ich befürchte, dass CSS extrem aufgebläht wird. Ich weil in einem Stylesheet einfach keine Funktionen sehen. Wenn man so etwas wie matches() wirklich braucht, sollte lieber das CSS selbst generiert werden. Gibt es ja sogar Frameworks und Tools für.


  2. Webrocker
    22 Dez 2011, 08:58

    Die Syntax für das parent Element finde ich erstmal verwirrend… wäre da ein
    table < td {…} intuitiver?
    das :matches(any) ding ist allerdings wirklich cool, hoffentlich kann man das bald produktiv einsetzen :)


  3. Frank 22 Dez 2011, 09:16

    Also mir gefällt das was ich dort sehe und ich glaube das es zusehends mehr Spaß machen wird mit CSS zu arbeiten. Kein Vergleich zu vor 10 Jahren!


  4. Eric Eggert
    22 Dez 2011, 11:15

    Hallo!

    Zum Beispiel $table > td { border:1x solid red;}:

    Das wird nie funktionieren, da td kein direktes Child-Element von table sein kann (in HTML, in XHTML1 war das anders, aber ob man damit wirklich CSS4 benutzen wird steht auf einem anderen Blatt). Der Browser ergänzt sowohl tbody als auch ein tr.

    Beispiel: http://dabblet.com/gist/1509786

    Deshalb funktioniert in HTML auch folgender Selektor nie: table > td {color: red;}

    Weitere Infos in diesem Eintrag von 2006: http://casted.yatil.de/index.php?id=4


  5. Webstandard-Team
    22 Dez 2011, 12:02

    @Eric: Danke für deinen Hinweis. Dieses "praktisch anmutende Beispiel" wurde nun der wirklichen Funktionsweise entsprechend angepasst. Nun stimmt's!


  6. Thomas 22 Dez 2011, 12:42

    @Webrocker: Du vergisst, dass man natürlich auch andere Selektorkombinationen verwenden könnte, z.B.

    div.foo $h2 p.bar


  7. Siegfried
    27 Dez 2011, 13:05

    Mir gefällt insbesondere das Namespace-Dingens. Noch kann ich nicht so ganz überblicken, was sich daraus für Möglichkeiten ergeben. Insbesondere beim Design einer beliebigen Seite muss ich erst noch sehen, was das genau bringt. Aber z.B. bei Userstyles kann das sehr nützlich sein.

    Das mit dem :matches ist ebenfalls nützlich. Any() fand ich zwar intuitiver, aber was soll's.


  8. Michael
    29 Dez 2011, 13:16

    Ich bin sehr gespannt was uns CSS4 noch so an Neuerungen bringen wird?


  9. Malte 02 Jan 2012, 18:57

    Das :matches Ding find ich echt ganz gut. Hab schon riesige unübersichtliche Blöcke mit der aktuellen Schreibweise gesehen. Sowas wird dann tatsächlich etwas übersichtlicher.

    Schon irgendwie krass. Ich hab selbst das Gefühl, dass CSS3 immernoch nicht so richtig angekommen ist.


  10. Michael Seiler-Gerstmann 03 Jan 2012, 15:15

    Schöne Zusammenfassung. Schaue öfter bei der CSS4 Arbeitsgruppe vorbei um zu schauen was geht. Einige Sachen sind aber noch arg weit weg von der Realität. Ich bin mir auch nicht sicher ob wir Funktionen im CSS haben müssen. Und Webrocker hat mit seiner Kritik auch nicht unrecht. Syntax für das parent sollte schon ein < sein. Man darf aber gespannt in die Zukunft schauen. Grüße aus Berlin


  11. René Teinze 19 Jan 2012, 12:35

    mit der Syntax '<' wäre dann aber folgendes nicht unterscheidbar:

    $foo bar { } -> ein foo, mit beliebigem Nachfahren (Kinder oder Enkel ...) bar

    $foo > bar { } -> ein foo,mit direktem Kind bar


  12. Martin Varesio 03 Feb 2012, 04:46

    Ich bin mir auch nicht sicher ob wir Funktionen im CSS haben müssen. Und Webrocker hat mit seiner Kritik auch nicht unrecht. Syntax für das parent sollte schon ein..


  13. Dirsur
    15 Mai 2012, 16:27

    Also mir gefällt das was ich dort sehe und ich glaube das es zusehends mehr Spaß machen wird mit CSS zu arbeiten


  14. MarcoTools
    22 Mai 2012, 14:11

    Es wird wohl interessant werden [;

    Die Idee hinter :matches ist wirklich hilfreich.

    Beispiel:
    test h1, test3 h1, test2 h1, test4 h1, test5 h1, test6 h1 {font-size: 12pt;}
    :matches(test, test2, test3, test4, test5, test6) h1 {font-size: 12pt;}

    Die :matches-Variante wäre übersichtlicher, vor allem,
    wenn man wirklich sehr viele IDs bzw. Klassen hat, die angesprochen werden.


  15. Paul
    09 Nov 2012, 21:22

    Man kann z.B. einen elektrischen Wasserkocher so lange mit dem Hammer bearbeiten, bis ein Bügeleisen draus wird.
    Wenn ich mir so die Quellcodes von echten Websites anschaue (also nicht irgendwelche Designstudien etc), dann glaube ich nicht, dass derartige Dinge mal eine quantitativ bedeutende praktische Relevanz haben.
    In 6-8 Jahren kommen Webinhalte ohnehin über einen direkt im Kopf implantieren Chip in unser Gehirn.


  16. Frank Weber 29 Dez 2012, 18:08

    Da staune ich aber, CSS3 ist ja noch nicht mal verabschiedet und bietet tolle Gestaltungsmöglichkeiten und einige Browser kommen damit noch nicht mal klar.
    Bin auf Neues immer gespannt aber nicht immer soschnell.
    Einen Guten Rutsch wünscht Frank Weber


  17. Martin 05 Feb 2014, 18:54

    Klassen hat, die angesprochen werden.


  18. S.T. 17 Apr 2014, 15:54

    Ein Bereich wo ich mich garnicht auskenn :D


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage