CSS3 / CSS4: Neues auf der Strecke gebliebene

Die Zukunft von CSS kann man komplett unterschiedlich bewerten: zum einen gibt es eine ganze Reihe neuer Methoden um die Websiten die wir mit CSS layouten zu revolutionieren, zum Anderen gibt es viele neue Spielereien und grafische Effekte wie on-thy-fly Filter, Shader, Farbverläuft, …, die darauf warten eingesetzt zu werden. Zeitschriften und Blogs sind voll mit Artikeln, die davon berichten, wie sie einzusetzen sind.

Doch diese „Aushängeschilder“ sind nicht alles was sich in den neuen Versionen von CSS getan hat. Im Hintergrund wurden auch viele Schrauben und Muttern, praktisch Drehknöpfe in CSS, geändert, erneuert oder sogar neu eingeführt. Ich rede dabei von neuen Selektoren, Einheiten und Funktionen. Funktionen in CSS? Ja wirklich. Dazu später mehr. Davon schreibt leider kaum ein Blog, kaum eine Zeitschrift. Deswegen dieser Artikel in meinem Blog ;-).

Foto: Aschevogel (Erik N./Flickr, CC BY 2.0)

Im Folgenden möchte ich also ein paar neue CSS-Schrauben auflisten, die du – so denke ich – noch nicht kanntest. Sie wurden von den im Licht stehenden neuen Funktionen wie Gradients (Farbverläufe) und Box-Shadows etwas in den Schatten gestellt, sind aber deswegen nicht weniger wichtig.

Relative Größen

Gab es auch schon in CSS1. Jeder zukunftsorientierte Webseiten-Entwickler der mit der relativen Größenordnung arbeitet – ob em- oder %-Angaben – wird das Problem kennen: es muss viel mit dem Taschenrechner gearbeitet werden um relative Größen berechnen zu können. Das ist nicht zuletzt der Vererbung zwischen Elementen zu verdanken.

Es wird zum Beispiel häufig für das komplette Dokument eine absolute Schriftgröße gesetzt, die dann für alle Unterelemente auf der Seite relativ abgeändert wird. In CSS würde das in etwa so aussehen:

body { font-size: 12px; }
p { font-size: 1.4em; }

Soweit, sogut. Probleme gibt es erst dann, wenn unser Absatz p auch noch ein weiteres Unterelement hat:

CSS-Farbverläufe sind nicht <span>alles</span>.

Jetzt soll das span-Element die Größe 1.2em haben. Was nun tun? Da span ja ein Kind-Element von p von body ist, und die relative Größe von diesen Elementen abhängt, müssen wir 1,2 durch 1,4 teilen. In CSS übersetzt würden wir folgendes schreiben:

p span { font-size: 0.85714em; }

Nicht wirklich schön, oder? Das Problem geht noch weiter wenn wir nach dem Box-Modell mit relativ zu- / ineinander stehenden div’s arbeiten: wir haben eine Seite mit einem div-Container mit einer Länge von 70%. Ein weiterer Container soll 40% breit sein. Da die beiden Container allerdings codeseitig verschachtelt sind, muss die Länge des inneren Containers auf 0,5714…% eingestellt werden.

Nicht ideal.

Dokument-relative Längen

Um dieses Problem zu beseitigen, unterstützen neue Browser die CSS-Längeneinheit rem. Dies ist noch immer eine relative Einheit, sie geht allerdings immer vom HTML-Wurzel-Element html aus. Schauen wir uns unseren Code oben an, können wir ihn wie folgt ändern:

p{ font-size: 1.4rem; }
p span { font-size: 1.2rem; }

Nun stehen beide Elemente relativ zur Wurzel und sind so viel einfacher zu handhaben und zu einem späteren Zeitpunkt zu ändern.

Bildschirm-relative Längen

Wenn du schon denkst das war alles, dann muss ich dich leider entäuschen. Es gibt eine Reihe weiterer relativer Längeneinheiten. Diese arbeiten auf einer ähnlichen Weise wie rem, nur das sie nicht relativ zum benutzerdefinierten Wert stehen, sondern zu den Abmessungen des Fensters des Gerätes, auf dem die Seite angezeigt wird.

Die wichtigsten Einheiten hierbei sind vh und vw, diese stehen immer relativ zu den Größen des Darstellungsfensters.

div{ height: 50vh; }

In diesem Beispiel ist die Höhe des div-Containers genau die Hälfte der Höhe des Ansichtsfensters. Und keine Sorge: wie auch bei rem ändern die Kind-Elemente nicht realtiv vom Elternelement die Größe – ein div mit 10vh wird immer 10vh groß sein!

Diese „Viewpoint-Längen“ unterstützt der IE seit Version 9, der Chrome (sowieso) und der Safari seit der 6er-Version.

Berechnete Werte

Wenn beim Webdesign responsitiv gearbeitet werden soll, kommt man manchmal an Stellen, bei denen man zum Beispiel relative Breiten mit festen Außenabständen (margin) einsetzt:

div { margin: 0 20px; width: 30%; }

Wenn dein Layout nur auf Paddings und Borders setzt, hilft das Box-Modell; setzt du allerdings zusätzlich auf Margins kann dir auch das nicht helfen. Ein besserer und flexiblerer Ansatz ist es, die CSS-Funktion calc() zu benutzen:

div { margin: 0 20px; width: calc(30% - 40px); }

calc() funktioniert nicht nur mit width, sondern mit allen möglichen Längen- oder Größenangaben. Die aktuellen Desktop-Browser beherrschen es ziemlich komplett, nur die mobilen Browser machen es noch nicht mit.

Die pseudo-Negations-Klasse

Du wirst wahrscheinlich nie wissen wie wertvoll :not() sein kann, solang du es nicht selbst mal ausprobiert hast. Wenn du eine Liste von Elementen mit einem Selektor definiert hast und :not() benutzt, so werden alle Elemente aus der Liste gelöscht, die diesem zweiten Selektor entsprechen. Etwas kompliziert, oder? Mit einem Beispiel ist es leichter zu verstehen:

Stell dir vor du hast eine Liste und möchtest alle Listenelemente farbig darstellen. Dann hättest du das bislang immer so gemacht:

li { color: #444; }
li:nth-child(odd) { color: #f00; }
li:last-child { color: #444; }

Mit der neuen :not() Pseudo-Klasse kannst du auf eine Zeile verzichten – dein Code wird dabei leichter zu managen:

li { color: #444; }
li:nth-child(odd):not(:last-child) { color: #f00; }

Es ist nichts bahnbrechendes und man kann genauso gut drauf verzichten – aber es ist nützlich zu gebrauchen.

Von allen vorgestellten Erneuerungen ist dies die am weitverbreitetsten. Der IE 9+ und alle modernen Browser beherrschen sie – komplett ohne Prefix. Und wer mit jQuery arbeitet wird sie sowieso kennen ;-).

Die matches() – Pseudoklasse

Die :matches() – Pseudoklasse erwartet als Argumente einen simplen Selektor, eine kommaseparierte Liste oder eine Kombination daraus. Aber was macht die Klasse genau?

Stell dir vor du hast in deiner Website Text-Absätze die sich in verschiedenen Containern befinden und du willst nicht jeden Absatz selektieren. Beispielsweise hast du soetwas:

.main header p,
.main footer p,
.main aside p {
  color: #f00;
}

Mit :matches() können wir das erheblich verkürzen indem wir die Selektoren nach den Gemeinsamkeiten untersuchen. Bei uns fangen alle Selektoren mit .main an und hören mit p auf. Den Rest dazwischen können wir mit :matches() zusammenfügen. Verstanden? 😉 Hier die verkürzte Lösung:

.main :matches(header, footer, aside) p { color: #f00; }

Das ist leider im Moment noch CSS4 (um genau zu sein: CSS Selector Engine 4).

:matches() verstehen so gut wie alle Browser, zwar teilweise mit Prefix und im Firefox unter einem anderen Namen. Aber trotzdem gut es mal gehört zu haben. Ist das Element kein Working Draft mehr, so wird es einem bestimmt öfters begegnen.

Von „Schrauben und Muttern“

Ich hoffe du hast in diesem Artikel etwas mehr über die Schrauben und Muttern in CSS gelesen. Mit ihnen lassen sich zwar keine Probleme lösen, jedoch wird man lästigen Wiederholungen – vor allem im Bezug auf die Selektoren – etwas mehr aus dem Weg gehen können.

Neue Funktionen wie den Filtern oder Gradients sind zwar auf dem ersten Blick deutlich wertvoller, jedoch sind es auch die kleinen Änderungen im Hintergrund die das Leben eines Webentwicklers immer ein Stück leichter machen.

Flattr this!

2 Kommentare

Schreibe einen Kommentar

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