CSS Secrets: Typische Webdesign-Probleme klug gelöst

Von Lea Verou

Die international bekannte CSS-Expertin Lea Verou stellt in CSS Secrets 47 neue und inspirierende Techniken und Tipps vor, mit denen Sie als CSS-Entwickler typische Webdesign-Probleme lösen können. Auch wenn Designprinzipien und UX-Verbesserungen beschrieben werden, geht es in diesem Buch in erster Linie darum, Webdesign-Probleme mit Code zu lösen.

Über die konkreten Tipps hinaus profitieren Sie vor allem von Leas ausgeprägtem analytischem Talent. Durch ein Studium der verschiedensten Techniken werden Sie Ihre Fähigkeit, wartbaren, flexiblen und standardkonformen DRY-Code ("Don't Repeat Yourself") zu schreiben, entscheidend verbessern.

Lea Verou – als Vortragende auf mehr als 60 Webkonferenzen international bekannt – präsentiert in diesem Workshop herausragendes CSS-Know-how. Das Buch ist für CSS-Entwickler mit guten und fortgeschrittenen Kenntnissen geeignet und deckt folgende Themen ab:

Hintergründe & Rahmen
- Formen
- Visuelle Effekte
- Typografie
- User Experience
- Struktur & Layout
- Übergänge & Animationen

• Sprache: Deutsch
• Herausgeber: O'Reilly
• Erscheinungsdatum: 21. Okt. 2016
• ISBN: 9783960100584

Buchvorschau

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:

Voraussetzungen

box-shadow, einfache CSS-Farbverläufe, das »Flexible Ellipsen«-Secret auf Seite 76.

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:

background: url(adamcatlace.jpg);

Oder so:

HTML

src=adamcatlace.jpg />

Sir Adam Catlace

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.

Zukunft Interessante Hintergrund-Infos

Die dunklen Abschnitte mit der Überschrift »Wissenswertes« am Seitenende enthalten Informationen, die nur am Rande zum Thema gehören, wie etwa der historische oder technische Hintergrund hinter einem CSS-Merkmal. Diese Informationen sind für das Verständnis des eigentlichen Materials nicht notwendig, können für einige Leser aber trotzdem interessant sein.

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:

JS

function $$(selector, context) {

    context = context || document;

var elements = context.querySelectorAll(selector);

return Array.prototype.slice.call(elements);

}

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

Zukunft Zukünftige Lösungen

Mit »Zukunft« beschriftete Abschnitte (am Ende einer Seite, auf dunklem Hintergrund) stellen Techniken vor, die bereits in einem Spezifikationsentwurf definiert, aber beim Schreiben dieses Buchs noch nicht implementiert sind. Leser sollten auf jeden Fall überprüfen, ob die hier gezeigte Technik bereits funktioniert, weil sie erst nach Veröffentlichung dieses Buchs implementiert wurde. Ist ein Feature zu unbekannt, als dass Browsersupport-Websites es behandeln, enthält dieser Abschnitt einen Test, den Leser über einen einfachen, leicht zu merkenden URL laden können wie in diesem »Test!«-Beispiel. Die Tests sind normalerweise so gestaltet, dass bei Erfolg grüne Farben angezeigt werden und ansonsten rote. Die genauen Anweisungen finden Sie als Kommentar im Code selbst.

TEST! play.csssecrets.io/ test-conic-gradient

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:

Verwandte Spezifikationen

CSS Backgrounds & Borders

w3.org/TR/css-backgrounds

Selectors

w3.org/TR/selectors

Scalable Vector Graphics

w3.org/TR/SVG

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.