CSS: The Definitive Guide, 5. Auflage

Vorwort

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Wenn du ein Webdesigner oder ein Dokumentenersteller bist, der an anspruchsvoller Seitengestaltung, verbesserter Zugänglichkeit und Zeit- und Arbeitsersparnis interessiert ist, ist dieses Buch genau das Richtige für dich. Alles, was du wirklich wissen musst, bevor du mit dem Buch beginnst, ist HTML 4.0. Je besser du HTML kennst, desto besser bist du vorbereitet, aber das ist keine Voraussetzung. Du musst nur sehr wenig anderes wissen, um diesem Buch zu folgen.

Diese fünfte Auflage des Buches wurde Ende 2022 fertiggestellt und gibt den Stand von CSS zu diesem Zeitpunkt wieder. Alles, was im Detail behandelt wurde, wurde zum Zeitpunkt der Erstellung entweder bereits von vielen Browsern unterstützt oder es war bekannt, dass es bald nach der Veröffentlichung erscheinen würde. CSS-Funktionen, die sich noch in der Entwicklung befanden oder von denen bekannt war, dass die Unterstützung bald auslaufen würde, werden hier nicht behandelt.

In diesem Buch verwendete Konventionen

Die folgenden typografischen Konventionen werden in diesem Buch verwendet (lies aber unbedingt den Abschnitt "Konventionen der Wertesyntax" durch, um zu sehen, wie einige davon geändert werden):

Kursiv

Weist auf neue Begriffe, URLs, E-Mail-Adressen, Dateinamen und Dateierweiterungen hin.

Constant width

Wird für Programmlistings sowie innerhalb von Absätzen verwendet, um auf Programmelemente wie Variablen- oder Funktionsnamen, Datenbanken, Datentypen, Umgebungsvariablen, Anweisungen und Schlüsselwörter hinzuweisen.

Constant width italic

Zeigt Text an, der durch vom Benutzer eingegebene Werte oder durch kontextabhängige Werte ersetzt werden soll.

Tipp

Dieses Element steht für einen Tipp oder eine Anregung.

Hinweis

Dieses Element steht für einen allgemeinen Hinweis.

Warnung

Dieses Element weist auf eine Warnung oder einen Warnhinweis hin.

Wert Syntax Konventionen

In diesem Buch werden in Kästen die Details einer bestimmten CSS-Eigenschaft erklärt, einschließlich der zulässigen Werte. Dieser Inhalt wurde praktisch wortwörtlich aus den CSS-Spezifikationen übernommen, aber eine Erklärung der Syntax ist angebracht.

Die zulässigen Werte für jede Eigenschaft werden mit einer Syntax wie der folgenden aufgelistet:

Wert: <family-name>#

Wert: <url> ‖ <color>

Wert: <url>? <color> [ / <color> ]?

Wert: [ <length> | thick | thin ]{1,4}

Wert: [ <background>, ]* <background-color>

Jedes kursiv gedruckte Wort zwischen < und > gibt eine Art von Wert oder einen Verweis auf die Werte einer anderen Eigenschaft an. Die Eigenschaft font nimmt zum Beispiel Werte an, die ursprünglich zur Eigenschaft font-family gehören. Dies wird durch die Verwendung des Textes <font-family>. Ähnlich verhält es sich, wenn ein Wertetyp wie eine Farbe zulässig ist: Er wird mit <color>.

Alle Wörter in constant width sind Schlüsselwörter, die wörtlich und ohne Anführungszeichen verwendet werden müssen. Der Schrägstrich (/) und das Komma (,) müssen ebenfalls wörtlich verwendet werden.

Die Bestandteile einer Wertedefinition können auf vielfältige Weise kombiniert werden:

• Zwei oder mehr aneinandergereihte Schlüsselwörter, die nur durch ein Leerzeichen getrennt sind, bedeuten, dass sie alle in der angegebenen Reihenfolge vorkommen müssen. Zum Beispiel würde help me bedeuten, dass die Eigenschaft diese Schlüsselwörter in dieser Reihenfolge verwenden muss.

• Wenn ein vertikaler Balken die Alternativen trennt (X | Y), muss eine beliebige davon vorkommen, aber nur eine. Bei [ X | Y | Z ] eine beliebige von X, Y, oder Z ist erlaubt.

• Ein vertikaler Doppelstrich (X ‖ Y) bedeutet, dass X, Y, oder beide vorkommen müssen, aber sie können in beliebiger Reihenfolge erscheinen. Also X, Y, X Y, und Y X sind alle gültigen Interpretationen.

• Ein doppeltes kaufmännisches Und (X && Y) bedeutet sowohl X und Y vorkommen müssen, obwohl sie in beliebiger Reihenfolge vorkommen können. Also: X Y oder Y X sind beide gültige Interpretationen.

• Klammern ([...]) dienen dazu, Dinge zusammenzufassen. So bedeutet [please ‖ help ‖ me] do this, dass die Wörter please, help und me in beliebiger Reihenfolge vorkommen können, obwohl jedes nur einmal vorkommt. Die Wörter do this müssen immer in dieser Reihenfolge erscheinen. Hier sind einige Beispiele: please help me do this, help me please do this, me please help do this.

Jedem Bestandteil oder jeder eingeklammerten Gruppe kann (oder muss nicht) einer dieserModifikatoren folgen:

• Ein Sternchen (*) bedeutet, dass der vorangehende Wert oder die eingeklammerte Gruppe null oder mehr Mal wiederholt wird. So bedeutet bucket*, dass das Wort bucket beliebig oft verwendet werden kann, einschließlich Null. Es gibt keine Obergrenze für die Anzahl der Wiederholungen.

• Ein Plus (+) zeigt an, dass der vorangehende Wert oder die eingeklammerte Gruppe ein oder mehrere Male wiederholt wird. So bedeutet mop+, dass das Wort mop mindestens einmal und möglicherweise viele weitere Male verwendet werden muss.

• Ein Rautezeichen (#), das formell als Oktothorpe bezeichnet wird, zeigt an, dass der vorangehende Wert oder die eingeklammerte Gruppe ein oder mehrere Male wiederholt wird, bei Bedarf durch Kommas getrennt. So kann floor# floor oder floor, floor, floor sein, und so weiter. Dies wird meist in Verbindung mit eingeklammerten Gruppen oder Wertetypen verwendet.

• Ein Fragezeichen (?) zeigt an, dass der vorangehende Wert oder die eingeklammerte Gruppe optional ist. Zum Beispiel bedeutet [pine tree]?, dass die Wörter pine tree nicht verwendet werden müssen (obwohl sie in dieser Reihenfolge erscheinen müssen, wenn sie verwendet werden).

• Ein Ausrufezeichen (!) zeigt an, dass der vorangehende Wert oder die eingeklammerte Gruppe erforderlich ist und daher mindestens einen Wert ergeben muss, auch wenn die Syntax etwas anderes vermuten lässt. Zum Beispiel muss [ what? is? happening? ]! mindestens einen der drei als optional gekennzeichneten Begriffe ergeben.

• Ein Zahlenpaar in geschweiften Klammern ({M,N}) zeigt an, dass der vorangehende Wert oder die eingeklammerte Gruppe mindestens M und höchstens N Mal wiederholt wird. Zum Beispiel bedeutet ha{1,3}, dass es eine, zwei oder drei Instanzen des Wortes ha geben kann.

Im Folgenden sind einige Beispiele aufgeführt:

give ‖ me ‖ liberty

Mindestens eines der drei Wörter muss verwendet werden und sie können in beliebiger Reihenfolge verwendet werden. Zum Beispiel sind give liberty, give me, liberty me give und give me liberty alles gültige Interpretationen.

[ I | am ]? the ‖ walrus

Es kann entweder das Wort I oder am verwendet werden, aber nicht beides, und die Verwendung von beidem ist optional. Außerdem muss entweder the oder walrus oder beides in beliebiger Reihenfolge folgen. Du könntest also I the walrus, am walrus the, am the, I walrus, walrus the, und so weiter bilden.

koo+ ka-choo

Auf eine oder mehrere Instanzen von koo muss ka-choo folgen. Daher sind koo koo ka-choo, koo koo koo ka-choo und koo ka-choo alle zulässig. Die Anzahl der koos ist potenziell unendlich, obwohl es sicherlich implementierungsspezifische Grenzen gibt.

I really{1,4}? [ love | hate ] [ Microsoft | Firefox | Opera | Safari | Chrome ]

Der Allzweck-Meinungsausdruck des Webdesigners. Dies kann als I love Firefox, I really love Microsoft und ähnliche Ausdrücke interpretiert werden. Es können zwischen null und vier reallyverwendet werden, die jedoch nicht durch Kommas getrennt werden dürfen. Du hast auch die Wahl zwischen love und hate, was wirklich wie eine Metapher wirkt.

It’s a [ mad ]# world

Dies gibt dir die Möglichkeit, so viele kommagetrennte mads wie möglich einzugeben, mit mindestens einem mad. Wenn es nur ein mad gibt, wird kein Komma hinzugefügt. Also: It’s a mad world und It’s a mad, mad, mad, mad, mad world sind beide gültige Ergebnisse.

[ [ Alpha ‖ Baker ‖ Cray ], ]{2,3} and Delphi

Zwei bis drei von Alpha, Baker und Delta müssen von and Delphi gefolgt werden. Ein mögliches Ergebnis wäre Cray, Alpha, and Delphi. In diesem Fall wird das Komma aufgrund seiner Position innerhalb der verschachtelten Klammergruppen gesetzt. (Einige ältere CSS-Versionen haben die Komma-Trennung auf diese Weise erzwungen, anstatt über den Modifikator # ).

Code-Beispiele verwenden

Wenn du auf auf ein Symbol stößt, das so aussieht siehst, bedeutet das, dass es ein zugehöriges Codebeispiel gibt. Live-Beispiele findest du unter https://meyerweb.github.io/csstdg5figs. Wenn du dieses Buch auf einem Gerät mit einer Internetverbindung liest, kannst du auf das klicken, um direkt zu einer Live-Version des Code-Beispiels zu gelangen, auf das verwiesen wird.

Zusätzliches Material - in Form von HTML-, CSS- und Bilddateien, die für die Erstellung fast aller Abbildungen in diesem Buch verwendet wurden - steht unter https://github.com/meyerweb/csstdg5figs zum Download bereit . Bitte lies unbedingt die README.md-Datei des Repositorys, um Hinweise zum Inhalt des Repositorys zu erhalten.

Wenn du eine technische Frage oder ein Problem mit den Codebeispielen hast, schicke bitte eine E-Mail an [e-mail].

Dieses Buch soll dir helfen, deine Arbeit zu erledigen. Wenn in diesem Buch Beispielcode angeboten wird, darfst du ihn in deinen Programmen und deiner Dokumentation verwenden. Du musst uns nicht um Erlaubnis fragen, es sei denn, du reproduzierst einen großen Teil des Codes. Wenn du zum Beispiel ein Programm schreibst, das mehrere Teile des Codes aus diesem Buch verwendet, brauchst du keine Erlaubnis. Der Verkauf oder die Verbreitung von Beispielen aus O'Reilly-Büchern erfordert jedoch eine Genehmigung. Die Beantwortung einer Frage mit einem Zitat aus diesem Buch und einem Beispielcode erfordert keine Genehmigung. Wenn du einen großen Teil des Beispielcodes aus diesem Buch in die Dokumentation deines Produkts aufnimmst, ist eine Genehmigung erforderlich.

Wir freuen uns über eine Namensnennung, verlangen sie aber in der Regel nicht. Eine Quellenangabe umfasst normalerweise den Titel, den Autor, den Verlag und die ISBN. Zum Beispiel: "CSS: The Definitive Guide von Eric A. Meyer und Estelle Weyl (O'Reilly). Copyright 2023 Eric A. Meyer und Estelle Weyl, 978-1-098-11761-0."

Wenn du der Meinung bist, dass die Verwendung von Code-Beispielen nicht unter die Fair-Use-Regelung oder die oben genannte Erlaubnis fällt, kannst du uns gerne unter [e-mail] kontaktieren .

O'Reilly Online Learning

Hinweis

Seit mehr als 40 Jahren bietet O'Reilly Media Schulungen, Wissen und Einblicke in Technologie und Wirtschaft, um Unternehmen zum Erfolg zu verhelfen.

Unser einzigartiges Netzwerk von Experten und Innovatoren teilt sein Wissen und seine Erfahrung durch Bücher, Artikel und unsere Online-Lernplattform. Die Online-Lernplattform von O'Reilly bietet dir On-Demand-Zugang zu Live-Trainingskursen, ausführlichen Lernpfaden, interaktiven Programmierumgebungen und einer umfangreichen Text- und Videosammlung von O'Reilly und über 200 anderen Verlagen. Weitere Informationen erhältst du unter https://oreilly.com.

Wie du uns kontaktierst

Bitte richte Kommentare und Fragen zu diesem Buch an den Verlag:

• O'Reilly Media, Inc.
• 1005 Gravenstein Highway Nord
• Sebastopol, CA 95472
• 800-998-9938 (in den Vereinigten Staaten oder Kanada)
• 707-829-0515 (international oder lokal)
• 707-829-0104 (Fax)

Wir haben eine Webseite für dieses Buch, auf der wir Errata, Beispiele und zusätzliche Informationen auflisten. Du kannst diese Seite unter https://oreil.ly/css-the-definitive-guide-5e aufrufen .

Schreib eine E-Mail an [e-mail], um Kommentare oder technische Fragen zu diesem Buch zu stellen.

Neuigkeiten und Informationen über unsere Bücher und Kurse findest du unter https://oreilly.com.

Du findest uns auf LinkedIn: https://linkedin.com/company/oreilly-media.

Folge uns auf Twitter: https://twitter.com/oreillymedia.

Sieh uns auf YouTube: https://youtube.com/oreillymedia.

Danksagungen

Eric Meyer

Als Erstes möchte ich mich bei allen technischen Prüferinnen und Prüfern dieser Ausgabe bedanken, die ihre Zeit und ihr Fachwissen in die mühsame Aufgabe gesteckt haben, all die Stellen herauszufinden, an denen ich mich geirrt hatte, und das für weniger Geld, als sie verdient hätten. Alphabetisch, nach Familiennamen: Ire Aderinokun, Rachel Andrew, Adam Argyle, Amelia Bellamy-Royds, Chen Hui Jing, Stephanie Eckles, EvaFerreira, Mandy Michael, Schalk Neethling, Jason Pamental, Janelle Pizarro, Eric Portis, Miriam Suzanne, Lea Verou und Dan Wilson. Alle Fehler sind meine Schuld, nicht ihre.

Ein Dankeschön geht auch an alle technischen Rezensenten vergangener Ausgaben, die zu viele sind, um sie hier zu nennen, und an all die Menschen, die mir im Laufe der Jahre geholfen haben, verschiedene Dinge über CSS zu verstehen, die ebenfalls viel zu viele sind, um sie hier zu nennen. Wenn du mir jemals etwas über CSS erklärt hast, schreibe bitte deinen Namen in das folgende Feld: _______________________, ich bin dir zu Dank verpflichtet.

Vielen Dank an alle ehemaligen und aktuellen Mitglieder der CSS-Arbeitsgruppe, die eine erstaunliche Sprache zu erstaunlichen Höhen geführt haben... auch wenn eure Arbeit bedeutet, dass wir für die nächste Ausgabe dieses Buches vor einem echten Produktionsdilemma stehen, das schon jetzt an die Grenzen dessen stößt, was die Drucktechnik vernünftigerweise leisten kann.

Vielen Dank an alle, die das Mozilla Developer Network (MDN) am Laufen halten und auf dem Laufenden halten.

Ein besonderer Dank geht an die Leute von Open Web Docs für ihre Arbeit an MDN und dafür, dass sie mich gebeten haben, in ihrem Lenkungsausschuss mitzuarbeiten.

Meiner Koautorin Estelle danke ich für all deine Beiträge, dein Fachwissen und deine Bemühungen, das zu tun, was nötig war.

All den verschiedenen Freunden, Kollegen, Mitarbeitern, Bekannten und Passanten, die meinen seltsamen Enthusiasmus und mein seltsames Verhalten toleriert haben, danke ich für ihr Verständnis, ihre Geduld und ihre Freundlichkeit.

Und wie immer gilt meine grenzenlose Dankbarkeit meiner Familie - meiner Frau Kat und meinen Kindern Carolyn, Rebecca z''l und Joshua. Ihr seid mein Zuhause, die Sonnen an meinem Himmel und die Sterne, nach denen ich mich richte. Ich danke euch für alles, was ihr mich gelehrt habt.

Cleveland Heights, OH

Dezember 4, 2022

Estelle Weyl

Ich möchte allen danken, die daran mitgewirkt haben, CSS zu dem zu machen, was es heute ist, und allen, die dazu beigetragen haben, Vielfalt und Inklusion in der Tech-Branche zu verbessern.

Viele Menschen arbeiten unermüdlich mit Browseranbietern und Entwicklern an der Erstellung der CSS-Spezifikationen. Ohne die Mitglieder der CSS-Arbeitsgruppe - ehemalige, aktuelle und zukünftige - hätten wir keine Spezifikationen, keine Standards und keine browserübergreifendeKompatibilität. Ich bewundere den Denkprozess, der hinter jeder CSS-Eigenschaft und jedem Wert steckt, der der Spezifikation hinzugefügt oder weggelassen wird. Leute wie Tab Atkins, Elika Etimad, Dave Baron, Léonie Watson und Greg Whitworth arbeiten nicht nur an der Spezifikation, sondern nehmen sich auch die Zeit, Fragen zu beantworten und der breiten CSS-Öffentlichkeit, insbesondere mir, Feinheiten zu erklären.

Mein Dank gilt auch all denjenigen, die sich - ob sie nun in der CSS-Arbeitsgruppe mitarbeiten oder nicht - intensiv mit CSS-Funktionen beschäftigen und dabei helfen, die Spezifikation für den Rest von uns zu übersetzen, darunter Sarah Drasner, Val Head, Sara Souidan, Chris Coyier, Jen Simmons und Rachel Andrew. Außerdem danke ich den Leuten, die Tools entwickeln, die das Leben aller CSS-Entwickler/innen einfacher machen, insbesondere Alexis Deveria für die Entwicklung und Pflege des Can I Use-Tools.

Ich schätze auch all diejenigen, die sich mit ihrer Zeit und ihrem Einsatz für mehr Vielfalt und Inklusion in allen Bereichen der Entwicklergemeinschaft einsetzen. Ja, CSS ist großartig. Aber es ist wichtig, mit großartigen Menschen in einer großartigen Gemeinschaft zu arbeiten.

Als ich 2007 meine erste Tech-Konferenz besuchte, war das Teilnehmerfeld zu 93% männlich und zu 100% weiß. Im Publikum war die Geschlechtervielfalt etwas geringer und die ethnische Vielfalt nur geringfügig größer. Ich hatte mir diese Konferenz ausgesucht, weil das Programm vielfältiger war als die meisten anderen: Es hatte sogar eine Frau dabei. Als ich mich im Raum umsah, wusste ich, dass sich etwas ändern musste, und mir wurde klar, dass ich etwas tun musste. Was ich damals nicht wusste, war, wie viele unbesungene Helden ich in den nächsten 10 Jahren kennenlernen würde, die sich für Vielfalt und Inklusion in allen Bereichen der Tech-Branche und des Lebens im Allgemeinen einsetzen.

Es gibt zu viele Menschen, die unermüdlich, im Stillen und oft mit wenig oder gar keiner Anerkennung arbeiten, um sie alle zu nennen, aber ich möchte einige hervorheben. Ich kann gar nicht in Worte fassen, wie viel positiven Einfluss Menschen wie Erica Stanley von Women Who Code Atlanta, Carina Zona von Callback Women und Jenn Mei Wu vom Oakland Maker Space haben. Gruppen wie The Last Mile, Black Girls Code, Girls Incorporated, Sisters Code und so viele andere haben mich dazu inspiriert, eine Feeding the Diversity Pipeline-Liste zu erstellen, um sicherzustellen, dass der Weg zu einer Karriere in der Webentwicklung nicht nur für Privilegierte offen ist.

Danke an euch alle. Vielen Dank an alle. Dank eurer Bemühungen wurde mehr erreicht, als ich mir vor 10 Jahren in dieser Konferenz vorstellen konnte.

San Francisco, CA

14. Februar 2023