CSS Secrets

Typische Webdesign-Probleme klug gelöst

Lea Verou

Lea Verou

Lektorat: Ariane Hesse

Übersetzer: Jørgen W. Lang

Korrektorat: Claudia Lötschert

Herstellung: Susanne Bröckelmann

Umschlaggestaltung: Michael Oréal, www.oreal.de

Satz: III-Satz, www.drei-satz.de

Druck und Bindung: Media-Print Informationstechnologie, mediaprint-druckerei.de

Bibliografische Information Der Deutschen Nationalbibliothek

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

ISBN:

Print    978-3-96009-025-0

PDF    978-3-96010-057-7

ePub    978-3-96010-058-4

mobi    978-3-96010-059-1

Dieses Buch erscheint in Kooperation mit O’Reilly Media, Inc. unter dem Imprint »O’REILLY«. O’REILLY ist ein Markenzeichen und eine eingetragene Marke von O’Reilly Media, Inc. und wird mit Einwilligung des Eigentümers verwendet.

1. Auflage 2016

Copyright © 2016 dpunkt.verlag GmbH

Wieblinger Weg 17

69123 Heidelberg

Authorized German translation of the English edition of CSS Secrets, ISBN 9781449372637 © 2015 Lea Verou. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same.

Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen.

Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen.

Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen.

5 4 3 2 1 0

Lob für »CSS Secrets«

Dieses Buch steht für eine neue Generation von CSS-Büchern, gemacht für eine neue Generation von CSS. CSS ist keine einfache Sprache mehr, die durch komplizierte Browserhacks und Workarounds behindert wird. Stattdessen ist CSS mittlerweile zu einem äußerst mächtigen und komplexen Ökosystem herangewachsen, das aus über 80 W3C-Spezifikationen besteht. Dabei versteht es niemand besser, die neue Generation von CSS weiterzugeben und lösungsorientierte Designprinzipien zu vermitteln, als Lea Verou – eine der wenigen wirklich begnadeten Coder, die ich kenne.

Jeffrey Zeldman
Autor, Designing with Web Standards

Lea Verous enzyklopädischer Verstand ist einmalig. Dank dieses informativen Buchs können auch Sie einen Eindruck von der Arbeit mit CSS gewinnen. Sie werden herausfinden, wie Sie fast alles damit tun können, was Ihnen in den Sinn kommt. Und wenn Sie glauben, CSS schon in- und auswendig zu kennen, garantiere ich Ihnen, dass es auch für Sie in diesem Buch noch Geheimnisse zu entdecken gibt.

Jeremy Keith
Shepherd of Unknown Futures, Clearleft

Wenn Sie nach Insiderinformationen über faszinierende CSS-Techniken suchen, sinnvollen Vorgehensweisen und hundertprozentiger Genialität, dann zögern Sie nicht – lesen Sie dieses Buch. Ich fand es klasse!

Eric A. Meyer

Lea ist eine unglaublich intelligente Programmiererin. Dieses Buch ist randvoll mit schlauen und nützlichen Ideen für Leute, die CSS bereits gut kennen. Und was noch besser ist: Sie werden sich bei Ihrer Arbeit auch schlauer fühlen, weil dieses Buch Sie ermutigt, über das Offensichtliche hinauszugehen.

Chris Coyier
CodePen

CSS Secrets ist jetzt schon ein Klassiker – so viele Tipps und Tricks, die Sie direkt benutzen können, um Ihre UX-Designs zu verbessern!

Christopher Schmitt
Co-Autor des CSS-Kochbuchs

Es gibt nur wenige Bücher, die so viele Praxistipps erhalten wie Lea Verous CSS Secrets. Reich gefüllt mit Dutzenden Lösungen zu häufigen Designproblemen ist dieses Buch eine besonders wertvolle Sammlung schlauer Tipps und Tricks, um Ihren Job zu erledigen, und zwar schnell. Das Buch ist auch dann lesenswert, wenn Sie glauben, CSS bereits in- und auswendig zu kennen!

Vitaly Friedman
Mitgründer und Chefredakteur bei Smashing Magazine

Jedesmal, wenn ich etwas von Lea Verou lese, lerne ich wirklich etwas Neues. CSS Secrets ist da keine Ausnahme. Dieses Buch ist in leicht verdauliche Stücke unterteilt und bis zum Rand gefüllt mit leckeren, saftigen Wissenshappen. Auch wenn das Buch teilweise recht zukunftsorientiert ist, enthält es genügend Dinge, die ich direkt in meinen eigenen Projekten verwenden konnte.

Jonathan Snook
Webdesigner und Entwickler

Leas Buch ist fantastisch. Sie biegt und verdreht CSS, bis es Dinge tut, an die nicht einmal die Autoren der Spezifikationen gedacht haben, da bin ich sicher! In den einzelnen Kapiteln zeigt sie unterschiedliche Methoden, verschiedene grafische Effekte zu erzielen. Später bei Ihrer Arbeit werden Sie sagen: “Hmm, was Lea da gemacht hat, wird hier ganz hervorragend funktionieren!”. Und bevor Sie es merken, ist Ihre Website so gut wie frei von Bildern, weil Sie sämtliche Grafiken als leicht zu pflegende CSS-Komponenten vorhalten können. Noch wichtiger ist allerdings, dass Leas Techniken auch noch Spaß machen, immer auf dem Grat zwischen dem Praktischen und fast schon Unmöglichen!

Nicole Sullivan
Principal Software Engineer, Erfinderin von OOCSS

Lea Verous CSS Secrets ist weniger eine Sammlung von CSS-Tipps als vielmehr ein Lehrbuch für das Lösen von Problemen mit CSS. Ihre tief gehende Erklärung der Denkprozesse hinter den einzelnen Secrets bringt Ihnen bei, eigene Lösungen für CSS-Probleme zu finden. Und überlesen Sie auf keinen Fall die Einführung. Sie enthält einige äußerst lesenswerte “Best Practices” für die Arbeit mit CSS.

Elika J. Etemad (aka fantasai)
Gastexpertin der CSS-Arbeitsgruppe des W3C

Leas Vorträge sind schon seit langer Zeit ein Muss auf Webenwickler-Konferenzen auf der ganzen Welt. Als Destillat Ihrer gesammelten Erfahrungen bietet CSS Secrets elegante Lösungen für heikle Designprobleme. Was noch wichtiger ist: Sie zeigt, wie Sie diese Probleme mit CSS lösen können. Jeder Frontend-Designer und -Entwickler sollte dieses Buch unbedingt lesen.

Dudley Storey
Designer, Entwickler, Autor, Experte für webbasierte Bildung

Ich dachte, ich kenne mich bereits sehr gut mit CSS aus. Dann las ich Lea Verous Buch. Wenn Sie Ihr CSSWissen auf das nächste Level bringen wollen, müssen Sie dieses Buch lesen.

Ryan Seddon
Team Lead, Zendesk

CSS Secrets ist das am stärksten technisch orientierte Buch zum Thema, das ich kenne. Lea hat es geschafft, die Grenzen einer einfachen Sprache wie CSS so sehr zu erweitern, dass sie sich kaum noch von Magie unterscheidet. Dies ist mit Sicherheit kein Anfängerbuch, trotzdem ist es äußerst empfehlenswert, wenn Sie glauben, CSS schon ziemlich gut zu kennen.

Hugo Giraudel
Frontend-Enwickler, Edenspiekermann

Ich denke immer, CSS ist ein bisschen wie Magie: Ein paar Regeln können Ihre Webseiten von “langweilig” zu “wunderschön” verwandeln. In CSS Secrets hebt Lea Verou dieses Magie auf ein völlig neues Niveau. Sie ist die Meister-Magierin des CSS. Und wir dürfen diese magische Welt mit ihr zusammen erkunden. Ich kann gar nicht aufzählen, wie oft ich beim Lesen dieses Buchs laut “Das ist jetzt mal richtig cool!” vor mich hingesagt habe. Das einzige Problem mit CSS Secrets ist, dass ich nach dem Lesen alles zur Seite legen und den ganzen Tag nur noch mit CSS herumspielen will.

Elisabeth Robson
Mitgründerin von WickedlySmart.com und Co-Autorin von JavaScript-Programmierung von Kopf bis Fuß

CSS Secrets ist ein Buch, das alle Webentwickler in ihrer Bibliothek haben sollten. Durch die Verwendung der enthaltenen Informationen lernen Sie zahlreiche Hinweise und Tipps, mit denen CSS Dinge tut, die Sie nie für möglich gehalten haben. Ich war erstaunt, wie oft die Autorin einfache und elegante Querdenker-Lösungen für Probleme anbot, über die ich mir jahrelang den Kopf zerbrochen habe.

Robin Nixon
Webentwickler, Onlinetrainer und Autor mehrerer CSS-Bücher

Lea Verou ist eine meisterhafte Designerin und Programmiererin. Ihr Buch ist so schön und durchdacht wie ihr Code. Egal ob CSS Ihnen recht neu ist, oder Sie die Feinheiten von CSS3 bereits gut kennen – dieses Buch bietet für jeden etwas.

Estelle Weyl
Vorreiterin für das Open Web und Mitautorin von CSS: The Definitive Guide

In liebevoller Erinnerung an meine Mutter und beste Freundin, Maria Verou (1952–2013), die diese Welt viel zu früh verlassen hat.

Inhaltsverzeichnis

Vorwort

Einleitung

Danksagungen

Making of ...

Über dieses Buch

Kapitel 1

Einführung

Webstandards: Freund oder Feind?

Tipps zum Schreiben von CSS

Kapitel 2

Hintergründe & Rahmen

1 Durchscheinende Rahmen

2 Mehrfache Rahmen

3 Flexible Hintergrundpositionierung

4 Innen abgerundete Ecken

5 Gestreifte Hintergründe

6 Komplexe Hintergrundmuster

7 (Pseudo-)zufällige Hintergrundmuster

8 Durchgehende Bildrahmen

Kapitel 3

Formen

9 Flexible Ellipsen

10 Parallelogramme

11 Rauten

12 Abgeschnittene Ecken

13 Trapezförmige Tabs

14 Einfache Tortendiagramme

Kapitel 4

Visuelle Effekte

15 Einseitige Schatten

16 Unregelmäßige Schattenwürfe

17 Farbtönungen

18 Milchglas-Effekt

19 Eselsohren-Effekt (abgeknickte Ecken)

Kapitel 5

Typografie

20 Silbentrennung

21 Zeilenumbrüche einfügen

22 Abwechselnd gestreifte Textzeilen

23 Die Tabulatorweite anpassen

24 Ligaturen

25 Schönere Ampersand-Zeichen

26 Eigene Unterstreichungen

27 Realistische Text-Effekte

28 Kreisförmiger Text

Kapitel 6

User Experience

29 Den richtigen Cursor wählen

30 Den anklickbaren Bereich vergrößern

31 Eigenes Design für Checkboxen

32 Ablenkung vermeiden durch Abblenden von Elementen

33 Ablenkung durch Weichzeichnung vermeiden

34 Hinweise auf Scrollbarkeit

35 Interaktive Bildvergleiche

Kapitel 7

Struktur & Layout

36 Intrinsische Größenanpassung

37 Spaltenbreiten in Tabellen zähmen

38 Stildefinitionen anhand der Anzahl der Geschwisterelemente

39 Anpassungsfähiger Hintergrund, fester Inhalt

40 Vertikale Zentrierung

41 Fest verankerte Footer

Kapitel 8

Übergänge & Animationen

42 Elastische Übergänge

43 Schrittweise Animationen

44 Blinkender Text

45 Animierte Texteingabe

46 Zustände von Elementen sanft animieren

47 Animation entlang eines kreisförmigen Pfads

Index

Secrets nach Spezifikation

CSS Animations

w3.org/TR/css-animations

42 Elastische Übergänge

43 Schrittweise Animationen

44 Blinkender Text

45 Animierte Texteingabe

46 Zustände von Elementen sanft animieren

47 Animation entlang eines kreisförmigen Pfads

CSS Backgrounds & Borders

w3.org/TR/css-backgrounds

1 Durchscheinende Rahmen

2 Mehrfache Rahmen

3 Flexible Hintergrundpositionierung

4 Innen abgerundete Ecken

5 Gestreifte Hintergründe

6 Komplexe Hintergrundmuster

7 (Pseudo-)zufällige Hintergrundmuster

8 Durchgehende Bildrahmen

9 Flexible Ellipsen

12 Abgeschnittene Ecken

14 Einfache Tortendiagramme

15 Einseitige Schatten

19 Eselsohren-Effekt (abgeknickte Ecken)

22 Abwechselnd gestreifte Textzeilen

26 Eigene Unterstreichungen

30 Den anklickbaren Bereich vergrößern

32 Ablenkung vermeiden durch Abblenden von Elementen

34 Hinweise auf Scrollbarkeit

35 Interaktive Bildvergleiche

CSS Backgrounds & Borders Level 4

wdev.w3.org/csswg/css-backgrounds-4

12 Abgeschnittene Ecken

CSS Basic User Interface

w3.org/TR/css3-ui

2 Mehrfache Rahmen

4 Innen abgerundete Ecken

35 Interaktive Bildvergleiche

CSS Box Alignment

w3.org/TR/css-align

40 Vertikale Zentrierung

CSS Flexible Box Layout

w3.org/TR/css-flexbox

40 Vertikale Zentrierung

41 Fest verankerte Footer

CSS Fonts

w3.org/TR/css-fonts

24 Ligaturen

25 Schönere Ampersand-Zeichen

CSS Image Values

w3.org/TR/css-images

5 Gestreifte Hintergründe

6 Komplexe Hintergrundmuster

7 (Pseudo-)zufällige Hintergrundmuster

8 Durchgehende Bildrahmen

12 Abgeschnittene Ecken

14 Einfache Tortendiagramme

19 Eselsohren-Effekt (abgeknickte Ecken)

22 Abwechselnd gestreifte Textzeilen

26 Eigene Unterstreichungen

34 Hinweise auf Scrollbarkeit

35 Interaktive Bildvergleiche

CSS Image Values Level 4

w3.org/TR/css4-images

5 Gestreifte Hintergründe

6 Komplexe Hintergrundmuster

14 Einfache Tortendiagramme

CSS Intrinsic & Extrinsic Sizing

w3.org/TR/css3-sizing

36 Intrinsische Größenanpassung

CSS Masking

w3.org/TR/css-masking

11 Rauten

12 Abgeschnittene Ecken

CSS Text

w3.org/TR/css-text

20 Silbentrennung

23 Die Tabulatorweite anpassen

CSS Text Level 4

dev.w3.org/csswg/css-text-4

20 Silbentrennung

CSS Text Decoration

w3.org/TR/css-text-decor

26 Eigene Unterstreichungen

27 Realistische Text-Effekte

CSS Transforms

w3.org/TR/css-transforms

10 Parallelogramme

11 Rauten

12 Abgeschnittene Ecken

13 Trapezförmige Tabs

14 Einfache Tortendiagramme

19 Eselsohren-Effekt (abgeknickte Ecken)

35 Interaktive Bildvergleiche

40 Vertikale Zentrierung

47 Animation entlang eines kreisförmigen Pfads

CSS Transitions

w3.org/TR/css-transitions

11 Rauten

12 Abgeschnittene Ecken

17 Farbtönungen

33 Ablenkung durch Weichzeichnung vermeiden

42 Elastische Übergänge

CSS Values & Units

w3.org/TR/css-values

3 Flexible Hintergrundpositionierung

32 Ablenkung vermeiden durch Abblenden von Elementen

40 Vertikale Zentrierung

41 Fest verankerte Footer

42 Elastische Übergänge

45 Animierte Texteingabe

Compositing and Blending

w3.org/TR/compositing

17 Farbtönungen

35 Interaktive Bildvergleiche

Filter Effects

w3.org/TR/filter-effects

16 Unregelmäßige Schattenwürfe

17 Farbtönungen

18 Milchglas-Effekt

33 Ablenkung durch Weichzeichnung vermeiden

35 Interaktive Bildvergleiche

Fullscreen API

fullscreen.spec.whatwg.org

32 Ablenkung vermeiden durch Abblenden von Elementen

Scalable Vector Graphics

w3.org/TR/SVG

6 Komplexe Hintergrundmuster

14 Einfache Tortendiagramme

28 Kreisförmiger Text

Selectors

w3.org/TR/selectors

31 Eigenes Design für Checkboxen

38 Stildefinitionen anhand der Anzahl der Geschwisterelemente

Vorwort

Ach ja, die gute alte Zeit. Damals, im vorigen Jahrtausend, gab es tatsächlich nur zwei CSS-fähige Browser. Und die verstanden nur eine kleine Untermenge der Dinge, die in einer ziemlich beschränkten Spezifikation definiert waren. Tatsächlich konnte man sich alles, was funktionierte (oder auch nicht), problemlos merken. Hierzu gehörten auch die verschiedenen Implementierungs-Bugs, die derartig viele Fehler und Missverständnisse enthielten, dass es fast schon wieder komisch war. Einige Fehler sorgten sogar dafür, dass das Layoutverhalten des Browsers vollkommen inkompatibel wurde. Und wir waren gezwungen, Armeen von Hacks einzusetzen, die Parsingfehler ausnutzten, um die Unterschiede wieder auszubügeln!

Moment mal!

Diese “gute alte Zeit” war furchtbar. Ich bin wirklich froh, dass sie endlich vorbei ist!

Gerade in den letzten Jahren haben sich die Dinge, was CSS angeht, deutlich verbessert. Mittlerweile sind die Browser größtenteils miteinander kompatibel. Und wenn nicht, dann liegt das eher daran, dass ein Browser ein bestimmtes Feature einfach nicht unterstützt. Früher versuchten zwei Browser eher, die gleiche Sache ganz unterschiedlich umzusetzen – meistens aber nicht besonders gut. Die Spezifikationen haben die Möglichkeiten von CSS erweitert, z.B. indem sie neue Features definieren, mit denen alte und komplexe Lösungswege heutzutage viel einfacher und kompakter umzusetzen sind. CSS ist umfangreicher und leistungsstärker als je zuvor. Der Preis ist eine größere Komplexität. Wenn Sie ausreichend viele Bausteine zusammenfügen, egal, wie einfach sie jeweils sind, können sehr interessante Dinge entstehen. (Mehr zu diesem Thema erfahren Sie beispielsweise im LEGO Movie).

Aber genau diese unbeabsichtigte Komplexität gibt CSS die Fähigkeit, uns mit frischen Features zu überraschen, die wir überhaupt nicht erwartet oder geplant hätten. Die “Secrets” findet man dort, wo sich Eigenschaften überschneiden und Werte auf neue Weise benutzt werden. Mit Farbverläufen (Gradients) lassen sich der berühmte “Eselsohren”-Effekt umsetzen, Elemente können animiert und anklickbare Bereiche vergrößert werdem. Selbst Tortendiagramme sind machbar ... und vieles mehr. CSS besitzt Fähigkeiten, von denen wir damals, als ich noch jung war, nur geträumt haben – Möglichkeiten, die jenseits unserer Vorstellungskraft lagen. CSS besitzt Fähigkeiten, von denen ich nie gedacht hätte, dass sie einmal in einer kompakten und menschenlesbaren Weise ausgedrückt werden könnten. CSS hat sich so weit entwickelt, dass es mit Sicherheit noch eine Menge an Geheimnissen zu entdecken gibt. Vielleicht finden Sie ja selbst auch welche.

Bis dahin gibt es eine Vielzahl faszinierender Techniken zu lernen, die es bereits ans Tageslicht geschafft haben. Nur wenige haben mehr Verdienst daran als Lea Verou, dass diese Schätze geborgen und mit der Welt geteilt werden. Von ihren Blogartikeln über ihre Beiträge zur Open Source Software bis hin zu ihren dynamischen, interaktiven Vorträgen in der ganzen Welt hat Lea ein enormes Wissen zu CSS angesammelt. Dieses Buch ist ein wunderbares Destillat dieses Wissens. Hiermit besitzen Sie eine Anleitung zu einigen der interessantesten, überraschendsten und nützlichsten Techniken, die es in der Welt von CSS gibt – ein Handbuch, geschrieben von einem der klügsten Köpfe zu diesem Thema. Was Lea auf diesen Seiten zusammengestellt hat, wird Sie bereichern, erfreuen und sogar überraschen.

Machen Sie sich auf den Weg, lernen Sie und sorgen Sie dafür, dass diese Entdeckungen keine Geheimnisse mehr bleiben.

Eric A. Meyer

Einleitung

In den letzten Jahren hat CSS eine Verwandlung durchgemacht, ähnlich der JavaScript-Revolution um 2004. Eine supereinfache Sprache für Stildefinitionen entwickelte sich zur komplexen Technologie, die (inklusive der Entwürfe) von über 80 W3C-Spezifikationen definiert wird. CSS besitzt ein eigenes Entwickler-Ökosystem, eigene Konferenzen, Frameworks und Werkzeuge. CSS ist so sehr gewachsen, dass es für einen einzelnen Menschen schlicht unmöglich ist, alle Bestandteile im Kopf zu behalten. Selbst in der W3C-Arbeitsgruppe, die die Sprache definiert, gibt es keine Experten, die sich mit allen Aspekten von CSS auskennen, auch wenn einige schon ziemlich nah dran sind. Stattdessen konzentrieren sich die meisten Mitglieder der Arbeitsgruppe auf bestimmte CSS-Spezifikationen, ohne dabei viel über die anderen zu wissen.

Ungefähr bis 2009 war CSS-Expertise nicht dadurch definiert, wie gut man die Sprache kannte. Das wurde für ein mehr oder weniger ernsthaftes Arbeiten einfach vorausgesetzt. Als Maßstab für CSS-Können galt, wie viele Browser-Bugs (und deren Lösungen) man im Kopf hatte. Im Jahr 2015 sind die Browser dagegen größtenteils standardkonform, und zweifelhafte Browserhacks rufen eher ein Stirnrunzeln hervor. Einige unvermeidliche Inkompatibilitäten gibt es natürlich immer noch. Allerdings passieren die Änderungen, nicht zuletzt weil die Browser automatisch aktualisiert werden, so schnell, dass es eine Zeit- und Platzverschwendung wäre, sie in einem Buch zu dokumentieren.

Das Akronym DRY steht für »Don’t Repeat Yourself« (wiederhole dich nicht). Mit diesem bekannten Programmierer-Mantra soll ein bestimmter Aspekt wartbaren Codes gefördert werden: die Fähigkeit, bestimmte Parameter mit so wenigen Änderungen wie möglich, anzupassen, idealerweise nur mit einer. Die Betonung auf DRY CSS-Code werden Sie in diesem Buch immer wieder finden. Das Gegenteil von DRY ist WET, was so viel heißt wie »We Enjoy Typing« (wir tippen gerne) oder auch »Write Everything Twice« (schreib’ alles zweimal).

Bei modernem CSS geht es nur noch selten darum, irgendwelche kurzlebigen Browser-Bugs zu umgehen. Heutzutage ist es viel wichtiger, die CSSFähigkeiten auf kreative Weise zu nutzen, um DRY-konforme, wartbare, flexible und leichte Lösungen zu finden, die weitestgehend standardkonform sind. Und genau darum geht es in diesem Buch.

Viele Bücher dokumentieren bestimmte CSS-Features von A–Z. CSS Secrets gehört allerdings nicht dazu. Der Zweck dieses Buches ist es, Wissenslücken zu füllen, die übrig sind, nachdem Sie sich mit dem Referenzmaterial vertraut gemacht haben. Es soll Ihr Bewusstsein erweitern, indem es neue Möglichkeiten aufzeigt, bereits bekannte Features zu nutzen. Es soll Ihnen CSS-Fähigkeiten näherbringen, die nicht so berühmt und beliebt sind, aber deutlich mehr Liebe verdienen. Der Hauptzweck dieses Buchs ist aber, Ihnen zu zeigen, wie Sie CSS zur Problemlösung einsetzen können.

CSS Secrets ist auch kein Kochbuch. Die einzelnen »Geheimnisse« (Secrets) sind keine eigenständigen Rezepte mit klar definierten Schritten, die Sie nur nachzukochen brauchen. Stattdessen versuche ich, detailliert zu beschreiben, welche Denkweise den einzelnen Techniken zugrunde liegt. Meiner Meinung nach ist es viel wertvoller den Prozess der Lösungsfindung zu verstehen, als die Lösung selbst. Selbst wenn Sie glauben, dass eine bestimmte Technik für Ihre Arbeit nicht von Belang ist, kann das Wissen um einen bestimmten Lösungsweg hilfreich sein, um vollkommen andere Probleme anzugehen. Kurz gesagt: Dieses Buch wird Ihnen hoffentlich eine Menge der sprichwörtlichen Fische bescheren – sein Hauptzweck besteht jedoch darin, Sie »ein Leben lang zu ernähren«, indem es Ihnen zeigt, wie Sie die Fische selbst fangen können.

Danksagungen

Ohne die Hilfe einer Vielzahl fantastischer Menschen, denen ich zutiefst dankbar bin, wäre dieses Buch nicht möglich gewesen. Ein großes und herzliches Dankeschön geht an:

• Alle, die meine Arbeit über die Jahre unterstützt haben und ohne die ich niemals in der Lage gewesen wäre, überhaupt ein Buch zu schreiben. An die Leser meines Blogs, meiner Twittermeldungen, und vor allem Ihnen, lieber Leser meines ersten Buchs. An alle, die meine Open Source-Projekte verwenden und noch mal mehr an jene, die dazu beitragen.

• An alle Konferenz-Organisatoren, die mich über die Jahre für Vorträge und Workshops eingeladen haben, besonders Damian Wielgosik und Paweł Czerski, die als Erste an mich geglaubt haben und die mich 2010 zur ersten Front-Trends-Konferenz eingeladen haben. Außerdem an Vasilis Vassalos, der mir 2010 zutraute, einen Kurs zum Thema Webentwicklung für die Athens University of Economics and Business zu entwickeln. Alle diese Erfahrungen haben mir eine Menge über das Unterrichten beigebracht (und ein Technikbuch ist im Prinzip nichts anderes).

• An alle Mitglieder der CSS Working Group, die dafür gestimmt haben, mich als Gastexpertin (»Invited Expert«) an Bord zu nehmen. Dadurch hat sich mein Blickwinkel auf Webtechnologien im Allgemeinen und auf CSS im Besonderen deutlich gewandelt.

• Meine Lektorinnen Mary Treseler und Meg Foley, die mir die Kontrolle über den gesamten Prozess überlassen haben und die unglaublich geduldig mit mir waren, wenn ich wieder einmal einen Abgabetermin nicht einhalten konnte (was öfter passierte, als ich zugeben möchte).

• An Kara Ebrahim, die für die Produktion zuständig war und die sich enorm viel Zeit genommen hat, um Layoutprobleme zu beheben und CSS-Renderingbugs sowie Einschränkungen des für dieses Buch benutzten PDF-Renderers manuell wieder auszugleichen.

• Meine technischen Sachverständigen: Elika Etemad, Tab Atkins, Ryan Seddon, Elisabeth Robson, Ben Henick, Robin Nixon und Hugo Giraudel. Sie haben mir nicht nur dabei geholfen, die faktischen Fehler auszuräumen, sondern auch mit unschätzbarem Feedback zum Verständnis der Texte beigetragen.

• Eric Meyer, von dem ich immer noch nicht ganz glauben kann, dass er ein Vorwort für mein Buch geschrieben hat.

• Meinem wissenschaftlichen Referenten David Karger, der sehr großes Verständnis zeigte, als ich dieses Buch bei meiner Ankunft am MIT noch nicht fertig hatte. Ohne seine unerschütterliche Geduld, hätte ich den Glauben an dieses Buch längst verloren.

• Meinen Vater, Miltiades Komvoutis, der mir schon früh beibrachte, was Kunst und Ästhetik bedeuten. Ohne ihn hätte ich vermutlich überhaupt kein Interesse an Design und CSS entwickelt, und dieses Buch hätte jetzt ein anderes Thema, vielleicht C++ oder Kernelprogrammierung.

• Meinen Onkel/zweiten Vater Stratis Veros und seine wunderbare Frau Maria Brere, die es auch mit mir ausgehalten haben, wenn meine Laune beim Schreiben dieses Buchs auf dem absoluten Tiefpunkt war. Außerdem an ihre Kinder Leonie und Phoebe, die süßesten Mädchen der Welt, ohne die dieses Buch vermutlich einen Monat früher fertig geworden wäre.

• Meine verstorbene Mutter, die unglaubliche Maria Verou, der dieses Buch gewidmet ist. Für 27 Jahre haben sich unsere Leben überschnitten, während der sie meine beste Freundin und größte Unterstützerin war. Ihr Leben war mir eine große Inspiration: Sie zog ans andere Ende der Welt, um in den 1970er-Jahren ihre Doktorarbeit am MIT zu schreiben, in einer Zeit, in der es die wenigsten Frauen in Griechenland überhaupt bis an eine höhere Schule schafften, und die ihren Doktortitel mit Auszeichnung erhielt. Sie lehrte mich Ehrgeiz, Freundlichkeit, Integrität, Unabhängigkeit und Aufgeschlossenheit. Am wichtigsten ist jedoch, dass sie mir beibrachte, das Leben nicht zu ernst zu nehmen. Ich vermisse sie schmerzlich.

Bildnachweise

Ein großes Dankeschön an all die netten Leute, die ihre Fotos mit großzügigen Creative-Commons-Lizenzen veröffentlichen. Ohne sie wäre auf allen Bildern dieses Buchs mein Kater zu sehen (was trotzdem in vielen Beispielen der Fall ist). Hier ist eine Liste der CC-Fotos, die ich verwendet habe, und wo sie zu finden sind:

»House Made Sausage from Prairie Grass Cafe, Northbrook,« Kurman Communications, Inc.

flickr.com/kurmanphotos/7847424816

»Cats that Webchick Is Herding,« Kathleen Murtagh

flickr.com/ceardach/4549876293

»Stone Art,« by Josef Stuefer

flickr.com/josefstuefer/5982121

»A Field of Tulips,« Roman Boed

flickr.com/romanboed/867231576

»Resting in the Sunshine,« Steve Wilson

flickr.com/pokerbrit/10780890983

»Naxos Island, Greece,« Chris Hutchison

flickr.com/employtheskinnyboy/3904743709

Making of ...

Dieses Buch hält sich an seine eigenen Prinzipien. Es ist in sauberem HTML5 geschrieben, angereichert mit ein paar data-Attributen, die in O’Reillys HTMLBook-Standard (oreillymedia.github.io/HTMLBook) definiert sind. Das bedeutet, alles, was Sie in diesem Buch sehen – das Layout, die Abbildungen, die Farben –, ist mit CSS gestalteter HTML-Code.¹ Viele der Abbildungen wurden mit SVG erstellt oder verwenden SVG-Daten-URLs, die mit Hilfe von SCSS-Funktionen erzeugt wurden. Die wenigen mathematischen Formeln wurden in LaTeX geschrieben und im Hintergrund in MathML konvertiert. Vielleicht interessiert es Sie, dass auch die Nummerierung der Seiten, Kapitel und der einzelnen Secrets mit simplen CSS-Countern erstellt wurden.

Viele der von O’Reilly veröffentlichten Bücher werden heutzutage auf diese Weise hergestellt. Speziell für diesen Zweck wurde ein System namens Atlas geschaffen. Das Beste an Atlas ist, dass es nicht nur O’Reilly-Mitarbeitern, sondern der gesamten Öffentlichkeit zur Verfügung steht.

Allerdings ist dieses Buch kein typisches Atlas-Projekt. Ich habe die Grenzen des heutzutage mit Print-CSS Möglichen meines Wissens so sehr erweitert wie bisher kein anderes Buch. Das hat geholfen, eine Menge Fehler in Atlas und Antenna House (dem von Atlas verwendeten PDF-Renderer) zu finden, brachte aber auch viele Probleme mit sich, die direkt mit den CSS-Spezifikationen für Print-Stylesheets zu tun haben. Diese habe ich direkt an die CSS-Arbeitsgruppe weitergegeben.

Vermutlich fragen Sie sich jetzt, wie viel Code wohl nötig ist, um ein Buch wie dieses anhand von Webtechnologien zu erstellen. Hier ein paar statistische Werte zur Produktion der englischen Fassung:

• Dieses Buch wurde mit 4.700 Zeilen SCSS gestaltet, die zu 3.800 Zeilen CSS kompiliert wurden.

• Etwas über 10.000 Zeilen HTML.

• Das gesamte Buch enthält 322 Abbildungen, aber nur 140 Bilddateien (inklusive der SVG-Grafiken und Screenshots). Die meisten Abbildungen sind einfache mit CSS-Stilen versehene div-Elemente. (Die Stildefinitionen für die Abbildungen sind für 65% des CSS- und SCSS-Codes verantwortlich!).

Hier ist eine Liste der Werkzeuge, die ich neben Atlas beim Schreiben dieses Buchs verwendet habe:

• Git für die Versionskontrolle

• SCSS als CSS-Präprozessor

• Das gesamte Buch wurde im Espresso-Texteditor (macrabbit.com/espresso) geschrieben

• Für die Kompilierung von SCSS zu CSS habe ich CodeKit eingesetzt

• Für die Live-Demos und die paar Screenshots der Live-Demos kam Dabblet zum Einsatz

• Die nicht von Hand gecodeten SVG-basierten Abbildungen wurden in Adobe Illustrator erstellt

• Bei Bedarf wurde für die Bearbeitung der Screenshots Adobe Photoshop benutzt

Die verwendeten Schriftarten waren Rockwell für die Überschriften, Frutiger für den Fließtext, Consolas für Codebeispiele und Baskerville für die Widmung und viele Abbildungen.

Dieses Buch wurde auf einem 13" MacBook Air in vielen verschiedenen Ländern geschrieben, unter anderen Griechenland, Kenia, Australien, Neuseeland, den Philippinen, Singapur, Chile, Brasilien, den Vereinigten Staaten, Frankreich, Spanien, Großbritannien, Wales, Polen, Kanada und Österreich.

Über dieses Buch

Für wen dieses Buch gedacht ist

Dieses Buch richtet sich hauptsächlich an CSS-Entwickler auf mittlerem bis hohem Niveau. Indem wir die sonst nötigen Einführungen weglassen, haben wir Platz, um die anspruchsvolleren Anwendungsfälle moderner CSS-Features und deren Kombinationen zu erforschen. Das heißt, dass wir von unseren Lesern einige Dinge erwarten:

• Ich erwarte, dass Sie CSS 2.1 quasi auswendig kennen und bereits ein paar Jahre Erfahrung damit haben. Sie haben kein Problem, die Funktionsweise der Positionierung zu verstehen. Sie haben bereits erzeugte Inhalte (generated content) benutzt, um Ihre Designs ohne zusätzliches Markup oder Bilder zu erweitern. Sie schmeißen nicht mit !important-Anweisungen um sich, da Sie wissen, wie Spezifität, Vererbung und die Kaskade funktionieren. Sie kennen die verschiedenen Bestandteile des Boxmodells und lassen sich auch von zusammengefassten Außenabständen (collapsed margins) nicht aus der Ruhe bringen. Sie kennen sich mit den verschiedenen Längeneinheiten aus und wissen, welche Einheit für welchen Zweck am besten geeignet ist.

• Sie haben sich online oder in Büchern bereits umfassend über die beliebtesten CSS3-Merkmale informiert und sie bereits ausprobiert, idealerweise in eigenen Projekten. Selbst wenn Sie die Features noch nicht in aller Tiefe studiert haben, wissen Sie, wie man abgerundete Ecken, einen box-shadow oder einen linearen Farbverlauf erzeugt. Sie haben bereits mit ein paar einfachen 2D-Transforms herumgespielt und Interaktionen mit einfachen Übergängen (transitions) und Animationen erweitert.

• Sie haben bereits SVG gesehen und wissen, wofür es benutzt wird, auch wenn Sie noch keine Ahnung haben, wie Sie es selbst schreiben können.

• Sie können einfachen JavaScript-Code lesen und verstehen, wie er beispielsweise für die Erzeugung von Elementen, die Manipulation von Attributen und das Hinzufügen zum Dokument verwendet wird.

• Sie haben bereits von CSS-Präprozessoren gehört und wissen, was sie tun, auch wenn Sie selbst noch keinen benutzt haben.

• Sie verstehen zumindest die Mathematik der Mittelstufe wie Quadratwurzeln, den Satz des Pythagoras, Sinus, Kosinus und Logarithmen.

Damit Leser, die nicht alle Voraussetzungen erfüllen, dieses Buch ebenfalls genießen können, gibt es am Anfang einiger »Secrets« einen Kasten mit Voraussetzungen. Hier finden Sie eine Liste der CSS-Techniken oder vorigen CSS-Secrets, die Sie kennen und verstehen müssen, damit das aktuelle Secret einen Sinn ergibt. (Auf CSS 2.1-Features wird verzichtet, weil der Kasten sonst ziemlich lang würde.) Er sieht in etwa so aus:

Auf diese Weise kann man Unbekanntes gegebenenfalls nachlesen und danach mit dem eigentlichen Secret weitermachen. Solange die Voraussetzungen erfüllt sind, können die Secrets in beliebiger Reihenfolge gelesen werden. Allerdings habe ich mir zur optimalen Reihenfolge sehr viele Gedanken gemacht. Daher hat das Lesen in der Reihenfolge des Buchs durchaus einen Sinn.

Beachten Sie bitte, dass ich »CSS-Entwickler« geschrieben habe und dass »Designfähigkeiten« in der Liste der Erwartungen an Sie nicht auftauchen. Dies ist kein Designbuch. Natürlich werden bestimmte Designprinzipien berührt und auch einige UX-Verbesserungen beschrieben. Trotzdem geht es in CSS Secrets in erster Linie darum, Probleme mit Code zu lösen. Zwar sorgt CSS für eine visuelle Ausgabe, bleibt aber Code, genau wie SVG, WebGL/OpenGL oder die JavaScript-Canvas-API Code und kein Design sind. Um gutes, flexibles CSS zu schreiben, wird die gleiche Art analytischen Denkens benötigt, die auch sonst beim Programmieren gebraucht wird. Heutzutage verwenden die meisten Leute Präprozessoren, um mithilfe von Variablen, Mathematik, Bedingungen und Schleifen ihren CSS-Code zu erzeugen. Das sieht schon ziemlich nach Programmierung aus!

Das soll Designer aber nicht davon abhalten, dieses Buch zu lesen. Alle, die ausreichende Erfahrung mit dem Schreiben von CSS haben, können von diesem Buch profitieren, und ich weiß, dass es viele talentierte Designer gibt, die ausgezeichneten CSS-Code schreiben. Allerdings muss ich betonen, dass ich Ihnen in diesem Buch nicht beibringen will, wie Sie Ihr visuelles Design oder die Benutzbarkeit einer Website verbessern können. Als mögliche Nebenwirkung will ich das aber auch nicht ganz ausschließen.

Verwendete Formate und Konventionen

Dieses Buch besteht aus 47 »Secrets«, die thematisch in sieben Kapitel aufgeteilt sind. Diese Secrets sind mehr oder weniger unabhängig voneinander und können, solange die Voraussetzungen erfüllt sind, in beliebiger Reihenfolge gelesen werden. Die Beispiele der einzelnen Secrets sind keine kompletten Websites – nicht einmal Teile davon. Sie sind absichtlich so kurz und einfach wie möglich gehalten, um ihr Verständnis zu erleichtern. Ich gehe davon aus, dass Sie bereits wissen, was Sie implementieren wollen. Ich will hier keine guten Designideen vermitteln, sondern Lösungen für deren Implementierung.

Abbildung V.1
Dies ist ein Beispiel für eine Abbildung in der Seitenleiste, mit der ich Ihnen den großartigen Sir Adam Catlace vorstelle.

Jedes Secret besteht aus zwei oder mehr Abschnitten. Der erste Abschnitt mit der Überschritt »Problem« stellt die allgemeine CSS-Aufgabe vor, die es zu lösen gilt. Gelegentlich beschreibt die Einführung besonders beliebte Lösungen, die aber nicht ganz optimal sind (weil z.B. zu viel Markup gebraucht wird oder hartkodierte Werte benutzt werden). Der Abschnitt endet in der Regel mit Variationen der Frage: »Gibt es eine bessere Möglichkeit, unser Ziel zu erreichen?«

Hinweise wie dieser enthalten zusätzliche Informationen oder erklären einen im Text verwendeten Begriff.

Nach der Vorstellung des Problems folgen eine oder mehrere Lösungen. Dieses Buch ist durch die vielen von mir gehaltenen CSS-Vorträge inspiriert. Daher habe ich versucht, das interaktive Präsentationsformat, soweit es das Buch erlaubt, beizubehalten.

Dies ist eine Warnung. Ihr Zweck ist es, (und das mag Sie jetzt überraschen!) Sie vor falschen Annahmen und anderen möglichen Gefahren zu warnen.

Aus diesem Grund enthalten die Lösungen viele Abbildungen, damit die visuellen Änderungen der einzelnen Schritte besser mitverfolgt werden können. Da sich die Abbildungen nicht immer direkt neben dem dazugehörigen Text befinden, sind sie durchnummeriert und im Text entsprechend markiert. Ein Beispiel für eine Abbildung sehen Sie in Abbildung V.1, und dieser Satz war ein Beispiel für eine Referenz darauf.

Eingebetteter Code wird als Festbreitenschrift dargestellt, während neben Farbangaben oft eine kleine Vorschau gezeigt wird (z.B. #f06). Codeblöcke sehen so aus wie hier:

Oder so:

Vermutlich ist es Ihnen schon aufgefallen: Enthält der Codeblock kein CSS, wird dies in der rechten oberen Ecke vermerkt. Geht es bei dem besprochenen Beispiel nur um ein einzelnes Element, bei dem weder Pseudoklassen noch Pseudoelemente eine Rolle spielen, wird aus Gründen der Kürze normalerweise auf einen Selektor oder die geschweiften Klammern ({}) verzichtet.

Sämtliche JavaScript-Beispiele in diesem Buch enthalten reinen JavaScript-Code, ohne dass irgendwelche Frameworks oder Bibliotheken verwendet werden. Es gibt nur eine Hilfsfunktion, $$(), die es uns erleichtert, eine Schleife über eine Reihe von Elementen auszuführen, auf die ein bestimmter CSS-Selektor zutrifft. Die Funktionsdefinition lautet:

Jedes Secret enthält ein oder mehrere funktionsfähige Beispiele, die über kurze und leicht zu merkende URLs unter play.csssecrets.io erreichbar sind. Eine Referenz darauf sieht so aus:

PLAY! play.csssecrets.io/polka

Ich empfehle Ihnen dringend, diese »Play!«-Beispiele auszuprobieren, besonders wenn Sie die beschriebenen Techniken nicht richtig verstehen oder beim Verständnis stecken bleiben.

Ehre, wem Ehre gebührt: Wurde eine beschriebene Technik bereits von jemand anderem dokumentiert, ziehen wir in einem Absatz wie diesem den Hut vor der jeweiligen Person und geben außerdem den URL der Quelle an. Wir wissen alle, dass ein Abschnitt mit »Referenzen« am Ende eines Buchs nur nervt. Daher geben wir die Referenzen lieber im Kontext an.

Fast alle Secrets enden mit einer Liste der dazugehörigen Spezifikationen, die so aussieht wie hier:

Hierzu gehören Referenzen auf alle Spezifikationen, aus denen die erwähnten Merkmale stammen. Wie beim Kasten mit den »Voraussetzungen« gilt dies jedoch nicht für CSS 2.1 (w3.org/TR/CSS21), da wir diese ansonsten in jedem »Verwandte Spezifikationen«-Abschnitt aufführen müssten. Das bedeutet, dass es für einige Secrets, die ausschließlich CSS 2.1-Features verwenden, keinerlei »Verwandte Spezifikationen« gibt.

Browserunterstützung und Fallback-Lösungen

Eine der größten Eigenarten dieses Buchs ist vermutlich das komplette Fehlen von Tabellen zur Browserunterstützung. Dies war eine bewusste Entscheidung. Bei den heutigen Release-Zyklen für Browser sind solche Informationen oft schon veraltet, wenn das Buch in die Läden kommt. Ich glaube, das ungenaue Informationen zur Browserunterstüztung irreführend und schlimmer als gar keine Informationen sind.

Dennoch werden die meisten gezeigten Secrets entweder gut bis sehr gut von den meisten aktuellen Browsern unterstützt oder lassen sich zumindest verwenden, ohne komplett zu versagen (nach dem Prinzip der »Graceful Degradation«). Besitzt eine hier beschriebene Technik gegenwärtig nur eingeschränkte Browserunterstützung, ist sie mit einem »Eingeschränkte Unterstützung«-Warnsymbol versehen wie dieser Absatz hier. Das sollte Hinweis genug sein, um Sie darauf hinzuweisen, die Lösung nur zu benutzen, nachdem Sie sich über die ausreichende Browserunterstützung informiert haben und ggf. nötige Fallback-Lösungen bereithalten.

Es existiert eine ganze Reihe guter Websites, die aktuelle Informationen zur Browserunterstützung bereitstellt:

• Can I Use ...? (caniuse.com)

• WebPlatform.org

• Mozilla Developer Network (developer.mozilla.org)

• Wikipedia’s "Comparison of Layout Engines (Cascading Style Sheets)" (en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets))

Gelegentlich werden Sie feststellen, dass ein bestimmtes Merkmal zwar unterstützt wird, sich von Browser zu Browser aber unterscheidet. Vielleicht benötigen Sie eine bestimmte Präfixschreibweise (vendor prefix) oder eine leicht veränderte Syntax. In den Beispielen dieses Buchs finden Sie ausschließlich die standardkonforme Schreibweise. Allerdings können Sie so gut wie immer verschiedene Schreibweisen gemeinsam benutzen, und die Kaskade kümmert sich darum, welche Anweisung gewinnt. Aus diesem Grund sollten Sie die Standardversion immer zuletzt angeben. Um beispielsweise einen vertikalen Farbverlauf von yellow nach red zu definieren, finden Sie im Buch nur die standardkonforme Schreibweise:

Sollten Sie zudem auch sehr alte Browser unterstützen wollen, müssen Sie möglicherweise Code wie diesen schreiben:

Mehr zu Präfixschreibweisen und warum Sie diese von Ihrem Hauptcode getrennt halten sollten, finden Sie in Kapitel 1, Abschnitt »Eine Geschichte von Eis, Feuer und Herstellerpräfixen« auf Seite 7.

Da sich diese Unterschiede etwa so schnell verändern wie die Browserunterstützung, wird davon ausgegangen, dass Sie diese Dinge standardmäßig vor der Benutzung eines bestimmten CSS-Features recherchieren. Wir werden in den Lösungen dieses Buchs nicht weiter darauf eingehen.

So ähnlich verhält es sich mit den Fallback-Lösungen. In den meisten Fällen ist es üblich und sinnvoll, Fallback-Lösungen anzubieten, damit Ihre Website auch in älteren Browsern noch funktioniert, selbst wenn die Seiten dort nicht ganz so schick aussehen. Manchmal sind die Ausweichlösungen so offensichtlich wie die Annahme, dass Sie wissen, wie die Kaskade funktioniert. Dann wird nicht besonders intensiv darauf eingegangen. Wenn Sie beispielsweise einen Farbverlauf wie den gerade gezeigten definieren, sollten Sie am Anfang des Codes für alle Fälle immer auch eine einfache Farbdefinition verwenden. Eine gute Idee für eine einfache Farbe wäre beispielsweise der Durchschnitt aus beiden Verlaufsfarben (in diesem Fall rgb(255, 128, 0)):

In manchen Fällen lassen sich Fallback-Lösungen jedoch nicht über die Kaskade implementieren. Als letztes Mittel können Sie dann Werkzeuge wie Modernizr einsetzen, das dem Wurzelelement (<html>) bestimmte Klassen wie textshadow oder no-textshadow hinzufügt. Diese können Sie dann benutzen, um bestimmte Elemente nur dann mit Stilen zu versehen, wenn bestimmte Features unterstützt werden (oder auch nicht):

Ist das Feature, für das Sie einen Fallback erstellen wollen, neu genug, können Sie auch die »native« Modernizr-Schreibweise @supports benutzen. Das vorige Beispiel sähe dann so aus:

Im Augenblick sollten Sie @supports jedoch mit Vorsicht genießen. Durch seine Verwendung haben wir unseren Effekt nicht nur auf Browser beschränkt, die mit Textschatten umgehen können, sondern der Effekt funktioniert jetzt nur noch in Browsern, die die @supports-Regel verstehen. Und das sind noch einmal deutlich weniger.

Wenn alle Stricke reißen, gibt es immer noch die Möglichkeit, ein paar Zeilen hausgemachten JavaScript-Code zu benutzen, um ermitteln, ob bestimmte Features unterstützt werden, und dem Wurzelelement ggf. wie mit Modernizr entsprechende Klassen zuzuweisen. Um herauszufinden, ob eine bestimmte CSS-Eigenschaft untersützt wird, müssen Sie das element.style-Objekt eines beliebigen Elements auf die Existenz der Eigenschaft überprüfen:

Müssen wir auf mehrere Eigenschaften testen, können wir auch eine Funktion daraus machen: