CSS Secrets -  Lea Verou

CSS Secrets (eBook)

Typische Webdesign-Probleme klug gelöst

(Autor)

eBook Download: PDF
2016 | 1. Auflage
400 Seiten
O'Reilly Verlag
978-3-96010-057-7 (ISBN)
Systemvoraussetzungen
34,90 inkl. MwSt
  • Download sofort lieferbar
  • Zahlungsarten anzeigen
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

Lea Verou ist Invited Expert der CSS-Arbeitsgruppe des W3C - des Gremiums, das unter anderem die Sprache CSS entwickelt. Zuvor hat Lea Verou als Developer Advocate beim W3C gearbeitet. Lea führt Forschungsprojekte im Bereich Human Interaction am Massachusetts Institute of Technology (MIT) durch. Außerdem bloggt sie, ist auf zahlreichen internationalen Konferenzen als Vortragende präsent und unterstützt andere Entwickler, indem sie zu einigen bekannten Open-Source-Projekten ihren Teil Code beisteuert.

Lea Verou ist Invited Expert der CSS-Arbeitsgruppe des W3C – des Gremiums, das unter anderem die Sprache CSS entwickelt. Zuvor hat Lea Verou als Developer Advocate beim W3C gearbeitet. Lea führt Forschungsprojekte im Bereich Human Interaction am Massachusetts Institute of Technology (MIT) durch. Außerdem bloggt sie, ist auf zahlreichen internationalen Konferenzen als Vortragende präsent und unterstützt andere Entwickler, indem sie zu einigen bekannten Open-Source-Projekten ihren Teil Code beisteuert.

Inhaltsverzeichnis 9
Vorwort 15
Einleitung 17
Danksagungen 19
Making of … 22
Über dieses Buch 24
Kapitel 1: Einführung 35
Webstandards: Freund oder Feind? 36
Tipps zum Schreiben von CSS 44
Kapitel 2: Hintergründe & Rahmen
Durchscheinende Rahmen 62
Mehrfache Rahmen 66
Flexible Hintergrundpositionierung 70
Innen abgerundete Ecken 74
Gestreifte Hintergründe 78
Komplexe Hintergrundmuster 88
(Pseudo-)zufällige Hintergrundmuster 100
Durchgehende Bildrahmen 106
Kapitel 3: Formen 113
Flexible Ellipsen 114
Parallelogramme 122
Rauten 128
Abgeschnittene Ecken 134
Trapezförmige Tabs 148
Einfache Tortendiagramme 154
Kapitel 4: Visuelle Effekte 171
Einseitige Schatten 172
Unregelmäßige Schattenwürfe 176
Farbtönungen 180
Milchglas- Effekt 188
Eselsohren- Effekt (abgeknickte Ecken) 198
Kapitel 5: Typografie 209
Silbentrennung 210
Zeilenumbrüche einfügen 214
Abwechselnd gestreifte Textzeilen 220
Die Tabulatorweite anpassen 224
Ligaturen 226
Schönere Ampersand- Zeichen 230
Eigene Unterstreichungen 238
Realistische Text-Effekte 244
Kreisförmiger Text 256
Kapitel 6: User Experience 263
Den richtigen Cursor wählen 264
Den anklickbaren Bereich vergrößern 268
Eigenes Design für Checkboxen 272
Ablenkung vermeiden durch Abblenden von Elementen 278
Ablenkung durch Weichzeichnung vermeiden 284
Hinweise auf Scrollbarkeit 288
Interaktive Bildvergleiche 294
Kapitel 7: Struktur & Layout
Intrinsische Größenanpassung 306
Spaltenbreiten in Tabellen zähmen 310
Stildefinitionen anhand der Anzahl der Geschwisterelemente 314
Anpassungsfähiger Hintergrund, fester Inhalt 322
Vertikale Zentrierung 326
Fest verankerte Footer 334
Kapitel 8: Übergänge & Animationen
Elastische Übergänge 340
Schrittweise Animationen 354
Blinkender Text 360
Animierte Texteingabe 366
Zustände von Elementen sanft animieren 374
Animation entlang eines kreisförmigen Pfads 380
Index 393
www.oreilly.de 0

1 Einführung


Webstandards: Freund oder Feind?


Der Standardisierungsprozess

Entgegen einer weit verbreiteten Meinung »macht« dasW3C die Webstandards nicht. Stattdessen dient das W3C als Forum für interessierte Parteien, um die Standards in verschiedenen Arbeitsgruppen (»Working Groups«) weiterzuentwickeln. Natürlich ist das W3C nicht nur Beobachter: Es legt die Grundregeln fest und überwacht den Standardisierungsprozess. Jedoch werden die Spezifikationen (fast) nicht von W3C-Beschäftigten geschrieben.

Abbildung 1.1
»Webstandards sind wie Würstchen: Man sieht besser nicht dabei zu, wie sie hergestellt werden.« – Anonymes Mitglied der W3C-Arbeitsgruppe

Spezifikationen stammen in der Regel von Mitgliedern der CSS-Working Group (kurz: CSS WG). Beim Schreiben dieses Buchs bestand sie aus 98 Mitgliedern, die sich wie folgt zusammensetzen:

  • 86 Vertreter von Unternehmensmitgliedern (88%)

  • 7 Eingeladene Experten, zu denen auch ich gehöre (7%)

  • 5 W3C-Beschäftigte (5%)

Wie Sie sehen, besteht die Arbeitsgruppe größtenteils aus Vertretern der W3C-Unternehmensmitglieder (88%). Hierzu gehören Browserhersteller, Betreiber beliebter Websites, Forschungseinrichtungen, allgemeine Technologieunternehmen etc., die ein besonderes Interesse an der Entwicklung der Webstandards haben. Dabei stellen die jährlichen Mitgliedsbeiträge die Haupteinnahmequelle des W3C dar. Hierdurch ist es dem Konsortium im Gegensatz zu anderen Standardisierungsorganisationen, die dafür Geld nehmen, überhaupt erst möglich, seine Spezifikationen kostenlos und offen zur Verfügung zu stellen.

Abbildung 1.2
Die Zusammensetzung der CSS-Arbeitsgruppe:
Unternehmensmitglieder
Eingeladene Experten
W3C-Beschäftigte

Eingeladene Experten sind Webentwickler, die man gebeten hat, am Standardisierungsprozess mitzuwirken. Voraussetzung ist eine dauerhafte Bereitschaft zur Mitarbeit und ein technischer Hintergrund, der ausreicht, um sich an den Diskussionen zu beteiligen.

Letzlich gibt es tatsächlich einige W3C-Beschäftigte, die direkt für das Konsortium arbeiten und die Kommunikation zwischen der Arbeitsgruppe und dem W3C ermöglichen.

Es ist ein weit verbreiteter Irrtum unter Webentwicklern, dass das W3C die Standards von oben herab diktiert und die armen Browser diese dann befolgen müssen, ob sie wollen oder nicht. Die Wahrheit ist komplett anders: Gerade die Browserhersteller haben ein großes Wort dabei mitzureden, was Teil der Standards wird und was nicht, wie die oben gezeigten Zahlen beweisen.

Und obwohl einige Leute das glauben, werden die Standards auch nicht im luftleeren Raum hinter verschlossenen Türen festgelegt. Vielmehr ist der CSS-Arbeitsgruppe Transparenz sehr wichtig, und sämtliche Kommunikationsvorgänge sind öffentlich nachvollziehbar. Überprüfung und Teilnahme sind willkommen:

  • Die meisten Diskussionen finden auf der Mailingliste (http://lists.w3.org/Archives/Public/www-style) statt. www-style verfügt über ein öffentlich zugängliches Archiv und steht jedem zur Teilnahme offen.

  • Zusätzlich gibt es eine wöchentliche Telefonkonferenz, die jeweils eine Stunde dauert. Die Konferenz selbst ist nur für W3C-Mitglieder zugänglich, wird aber öffentlich und in Echtzeit auf dem #css-Kanal des IRC-Servers des W3C (http://irc.w3.org/) protokolliert. Das Protokoll wird danach bereinigt und ein paar Tage später auf der Mailingliste veröffentlicht.

  • Außerdem gibt es vierteljährliche persönliche Treffen, die auf die gleiche Art prokolliert werden wie die Telefonkonferenzen. Diese Treffen stehen nach Genehmigung durch die Vorsitzenden der Arbeitsgruppe ebenfalls zur Einsicht (Überprüfung) offen.

Alle diese Dinge gehören zum W3C-Prozess und dienen der Entscheidungsfindung. Diejenigen, die diese Entscheidungen schließlich schriftlich fixieren, sind die Spezifikations-Redakteure (Spec Editors). Das können entweder W3C-Mitarbeiter, Browserentwickler, eingeladene Experten oder Angestellte der Unternehmensmitglieder sein. Letztere sind meist Vollzeitmitarbeiter, die von ihren Unternehmen bezahlt werden, um die Standards für das Gemeinwohl voranzubringen.

Jede Spezifikation durchläuft auf dem Weg von der ersten Idee bis zur Reife eine Reihe verschiedener Stadien:

Wollen Sie mehr erfahren? Elika Etemad (fantasai) hat eine Reihe sehr guter Artikel über die Arbeitsweise der CSS-Arbeitsgruppe geschrieben (http://fantasai.inkedblade.net/weblog/2011/inside-csswg). Äußerst empfehlenswert.

  1. Editor’s Draft (ED, Redakteursentwurf): Der erste Schritt einer Spezifikation ist manchmal einfach nur eine Ideensammlung eines Spec Editors. Für diesen Schritt gibt es keinerlei Anforderungen, aber auch keine Garantie, dass die Ideen von der Arbeitsgruppe akzeptiert werden. Trotzdem ist dies die erste Phase jeder Revision: Alle Änderungen werden zunächst in einem ED vorgenommen und dann veröffentlicht.

  2. First Public Working Draft (FPWD, erster öffentlicher Arbeitsentwurf): Die erste veröffentlichte Version einer Spezifikation, nachdem die Arbeitsgruppe der Meinung ist, dass sie bereit für öffentliche Rückmeldungen ist.

  3. Working Draft (WD, Arbeitsentwurf): Auf den ersten Arbeitsentwurf folgen eine Menge weitere, jeder – unter Berücksichtigung des Feedbacks von Arbeitsgruppe und Öffentlichkeit – ein wenig besser. Oftmals beginnen die ersten Implementierungen in dieser Phase, obwohl experimentelle Implementierungen manchmal auch schon in einem früheren Stadium einer Spezifikation vorgenommen werden.

  4. Candidate Recommendation (CR, Empfehlungskandidat): Spezifikationen in diesem Stadium gelten als recht stabil. Jetzt ist die Zeit für Implementierungen und Tests gekommen. Eine Spezifkation kann das nächste Stadium nur erreichen, wenn es eine komplette Testsuite und mindestens zwei unabhängige Implementierungen gibt.

  5. Proposed Recommendation (PR, Empfehlungsvorschlag): Dieses Stadium ist die letzte Chance für W3C-Unternehmensmitglieder, zu erklären, dass sie mit der Spezifikation nicht einverstanden sind. Das passiert aber nur selten. Daher ist es meist nur eine Frage der Zeit, bis eine PR den nächsten und abschließenden Schritt erreicht.

  6. Recommendation (REC, Empfehlung): Das finale Stadium einer W3CSpezifikation.

Ein oder zwei Mitglieder der Arbeitsgruppe haben die Rolle von Vorsitzenden (chairs). Diese sind für die Organisation von Treffen, die Koordinierung der Telefonkonferenzen, die Zeiterfassung und die allgemeine Moderation der ganzen Sache zuständig. Die Rolle eines Vorsitzenden erfordert einen hohen Zeit- und Kraftaufwand und wird gerne mit dem Hüten von Katzen verglichen. Natürlich weiß jeder, der mit den Standards zu tun hat, dass das Quatsch ist: Das Hüten von Katzen ist viel einfacher.

Abbildung 1.3
Der Vorsitz einer W3C-Arbeitsgruppe wird häufig damit verglichen, Katzen zu hüten.

CSS3, CSS4 und andere Sagenwesen

CSS 1 war eine ziemlich kurze und einfache Spezifikation, die 1996 von Håkon Wium Lie und Bert Bos veröffentlicht wurde. Sie war so klein, dass der gesamte Inhalt auf einer einzigen HTML-Seite enthalten war, für deren Ausdruck gerade einmal 64 DIN-A4-Seiten benötigt wurden.

CSS 2, 1998 veröffentlicht, war deutlich strenger definiert und besaß eine Vielzahl neuer Merkmale sowie zwei zusätzliche Redakteure Chris Lilley and Ian Jacobs. An diesem Punkt war die Spezifikation bereits auf 480 (!) gedruckte Seiten angewachsen und so groß, dass kein einzelner Mensch sie mehr komplett im Kopf behalten konnte.

Nach CSS Level 2 gelangte die CSS-Arbeitsgruppe zu dem Schluss, dass die Sprache zu groß sei, um sie weiterhin in einer einzigen Spezifikation pflegen zu können. Die Spezifikation nicht nur schwer zu lesen und zu bearbeiten, sondern wurde mehr und mehr zu einer Bremse für die Entwicklung von CSS selbst. Damit eine Spezifikation zum Abschluss gebracht werden kann, müssen für jedes einzelne Feature zunächst zwei unabhängige Implementierungen und ausgiebige Tests durchgeführt werden. Das war nicht länger praktikabel. Daher wurde beschlossen, CSS in mehrere Spezifikationen (Module) aufzuteilen, die jeweils eine eigene Versionierung erhielten. Module, die eine Erweiterung von Merkmalen aus CSS 2.1 darstellten, wurden mit der Versionsnummer 3 versehen. Dies sind z.B.:

  • CSS...

Erscheint lt. Verlag 21.10.2016
Übersetzer Jørgen W. Lang
Verlagsort Heidelberg
Sprache deutsch
Themenwelt Mathematik / Informatik Informatik Web / Internet
Schlagworte Checkboxen • CSS 2.1 • CSS3 • CSS Animations • CSS Backgrounds • CSS Borders • CSS Hintergründe • CSS Masking • CSS-Spezifikation • CSS Text Level 4 • CSS Transitions • DRY-Code • Ellipsen mit CSS • Eselsohren-Effekt mit CSS • Formen mit CSS • LESS • Media Queries • Milchglaseffekt mit CSS • Parallelogramme mit CSS • Praprozessoren • Rahmen mit CSS • Responsive Webdesign • sass • Scalable Vector Graphics • Schattenmit CSS • SVG • User Experience • W3C
ISBN-10 3-96010-057-4 / 3960100574
ISBN-13 978-3-96010-057-7 / 9783960100577
Haben Sie eine Frage zum Produkt?
PDFPDF (Wasserzeichen)
Größe: 53,7 MB

DRM: Digitales Wasserzeichen
Dieses eBook enthält ein digitales Wasser­zeichen und ist damit für Sie persona­lisiert. Bei einer missbräuch­lichen Weiter­gabe des eBooks an Dritte ist eine Rück­ver­folgung an die Quelle möglich.

Dateiformat: PDF (Portable Document Format)
Mit einem festen Seiten­layout eignet sich die PDF besonders für Fach­bücher mit Spalten, Tabellen und Abbild­ungen. Eine PDF kann auf fast allen Geräten ange­zeigt werden, ist aber für kleine Displays (Smart­phone, eReader) nur einge­schränkt geeignet.

Systemvoraussetzungen:
PC/Mac: Mit einem PC oder Mac können Sie dieses eBook lesen. Sie benötigen dafür einen PDF-Viewer - z.B. den Adobe Reader oder Adobe Digital Editions.
eReader: Dieses eBook kann mit (fast) allen eBook-Readern gelesen werden. Mit dem amazon-Kindle ist es aber nicht kompatibel.
Smartphone/Tablet: Egal ob Apple oder Android, dieses eBook können Sie lesen. Sie benötigen dafür einen PDF-Viewer - z.B. die kostenlose Adobe Digital Editions-App.

Buying eBooks from abroad
For tax law reasons we can sell eBooks just within Germany and Switzerland. Regrettably we cannot fulfill eBook-orders from other countries.

Mehr entdecken
aus dem Bereich