Sie sind hier
E-Book

CSS Secrets

Typische Webdesign-Probleme klug gelöst

AutorLea Verou
VerlagO'Reilly Verlag
Erscheinungsjahr2016
Seitenanzahl400 Seiten
ISBN9783960100577
FormatPDF/ePUB
KopierschutzWasserzeichen
GerätePC/MAC/eReader/Tablet
Preis27,99 EUR
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.

Kaufen Sie hier:

Horizontale Tabs

Leseprobe

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...

Blick ins Buch
Inhaltsverzeichnis
Inhaltsverzeichnis9
Vorwort15
Einleitung17
Danksagungen19
Making of …22
Über dieses Buch24
Kapitel 1: Einführung35
Webstandards: Freund oder Feind?36
Tipps zum Schreiben von CSS44
Kapitel 2: Hintergründe & Rahmen61
Durchscheinende Rahmen62
Mehrfache Rahmen66
Flexible Hintergrundpositionierung70
Innen abgerundete Ecken74
Gestreifte Hintergründe78
Komplexe Hintergrundmuster88
(Pseudo-)zufällige Hintergrundmuster100
Durchgehende Bildrahmen106
Kapitel 3: Formen113
Flexible Ellipsen114
Parallelogramme122
Rauten128
Abgeschnittene Ecken134
Trapezförmige Tabs148
Einfache Tortendiagramme154
Kapitel 4: Visuelle Effekte171
Einseitige Schatten172
Unregelmäßige Schattenwürfe176
Farbtönungen180
Milchglas- Effekt188
Eselsohren- Effekt (abgeknickte Ecken)198
Kapitel 5: Typografie209
Silbentrennung210
Zeilenumbrüche einfügen214
Abwechselnd gestreifte Textzeilen220
Die Tabulatorweite anpassen224
Ligaturen226
Schönere Ampersand- Zeichen230
Eigene Unterstreichungen238
Realistische Text-Effekte244
Kreisförmiger Text256
Kapitel 6: User Experience263
Den richtigen Cursor wählen264
Den anklickbaren Bereich vergrößern268
Eigenes Design für Checkboxen272
Ablenkung vermeiden durch Abblenden von Elementen278
Ablenkung durch Weichzeichnung vermeiden284
Hinweise auf Scrollbarkeit288
Interaktive Bildvergleiche294
Kapitel 7: Struktur & Layout305
Intrinsische Größenanpassung306
Spaltenbreiten in Tabellen zähmen310
Stildefinitionen anhand der Anzahl der Geschwisterelemente314
Anpassungsfähiger Hintergrund, fester Inhalt322
Vertikale Zentrierung326
Fest verankerte Footer334
Kapitel 8: Übergänge & Animationen339
Elastische Übergänge340
Schrittweise Animationen354
Blinkender Text360
Animierte Texteingabe366
Zustände von Elementen sanft animieren374
Animation entlang eines kreisförmigen Pfads380
Index393
www.oreilly.de0

Weitere E-Books zum Thema: Internet - Intranet - Webdesign - Security

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

TCP/IP-Praxis

E-Book TCP/IP-Praxis
Dienste, Sicherheit, Troubleshooting Format: PDF

Netzwerke modernen Standards verlangen weniger nach Rezepten für Neu - Design als vielmehr nach Wegen, Maßnahmen zur Integration in eine bestehende Infrastruktur aufzuzeigen. Diesem Aspekt trägt TCP/…

E-Learning

E-Book E-Learning
Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

E-Learning

E-Book E-Learning
Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

Weitere Zeitschriften

arznei-telegramm

arznei-telegramm

Das arznei-telegramm® informiert bereits im 53. Jahrgang Ärzte, Apotheker und andere Heilberufe über Nutzen und Risiken von Arzneimitteln. Das arznei-telegramm®  ist neutral und ...

Ärzte Zeitung

Ärzte Zeitung

Zielgruppe:  Niedergelassene Allgemeinmediziner, Praktiker und Internisten. Charakteristik:  Die Ärzte Zeitung liefert 3 x pro Woche bundesweit an niedergelassene Mediziner ...

Card-Forum

Card-Forum

Card-Forum ist das marktführende Magazin im Themenbereich der kartengestützten Systeme für Zahlung und Identifikation, Telekommunikation und Kundenbindung sowie der damit verwandten und ...

SPORT in BW (Württemberg)

SPORT in BW (Württemberg)

SPORT in BW (Württemberg) ist das offizielle Verbandsorgan des Württembergischen Landessportbund e.V. (WLSB) und Informationsmagazin für alle im Sport organisierten Mitglieder in Württemberg. ...

DGIP-intern

DGIP-intern

Mitteilungen der Deutschen Gesellschaft für Individualpsychologie e.V. (DGIP) für ihre Mitglieder Die Mitglieder der DGIP erhalten viermal jährlich das Mitteilungsblatt „DGIP-intern“ ...

Die Versicherungspraxis

Die Versicherungspraxis

Behandlung versicherungsrelevanter Themen. Erfahren Sie mehr über den DVS. Der DVS Deutscher Versicherungs-Schutzverband e.V, Bonn, ist der Interessenvertreter der versicherungsnehmenden Wirtschaft. ...

DSD Der Sicherheitsdienst

DSD Der Sicherheitsdienst

Der "DSD – Der Sicherheitsdienst" ist das Magazin der Sicherheitswirtschaft. Es erscheint viermal jährlich und mit einer Auflage von 11.000 Exemplaren. Der DSD informiert über aktuelle Themen ...