Das Beste an HTML & CSS: Best Practices für standardkonformes Webdesign 3897216175, 9783897216174

Citation preview

---

Effizientes Design, sauberer Code

Das Beste an HTML & CSS Best Practices für standardkonformes Webdesign

O’REILLY

Ben Henick Deutsche Übersetzung von Jørgen W. Lang

Das Beste an HTML & CSS Best Practices für standardkonformes Webdesign

Das Beste an HTML & CSS Best Practices für standardkonformes Webdesign

Ben Henick Deutsche Übersetzung von Jørgen W. Lang

Beijing
Cambridge
Farnham
Köln
Sebastopol
Taipei
Tokyo

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. Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im wesentlichen nach den Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

Kommentare und Fragen können Sie gerne an uns richten: O’Reilly Verlag Balthasarstr. 81 50670 Köln Tel.: 0221/9731600 Fax: 0221/9731608 E-Mail: [email protected] Copyright der deutschen Ausgabe:  2010 by O’Reilly Verlag GmbH & Co. KG 1. Auflage 2010

Die Originalausgabe erschien 2009 unter dem Titel HTML & CSS The Good Parts im Verlag O’Reilly Media, Inc.

Die Darstellung eines Katzenfretts im Zusammenhang mit dem Thema HTML und CSS ist ein Warenzeichen von O’Reilly Media, Inc.

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.

Lektorat: Inken Kiupel & Susanne Gerbert, Köln Korrektorat: Friederike Daenecke, Zülpich Satz: Reemers Publishing Services GmbH, Krefeld; www.reemers.de Umschlaggestaltung: Michael Oreal, Köln Produktion: Karin Driesen, Köln Belichtung, Druck und buchbinderische Verarbeitung: Druckerei Kösel, Krugzell; www.koeselbuch.de ISBN 13 978-3-89721-617-4 Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.

Inhalt

Einleitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XV 1 Hypertext von innen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das Web ohne Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . URIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mit Links umgehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Den Anwenderkomfort durch Links verbessern . . . . . . . . . . Herausforderungen bei der Implementierung von Hypertext

1

.............

1

.............

2

.............

3

.............

3

.............

4

2 Mit HTML-Markup arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

HTML-Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tags, Elemente und Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Seitenstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Darstellungsmodi, Varianten von HTML und Dokumenttyp-Deklarationen HTML oder XHTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Strict, Transitional oder Frameset? . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Geschichte der zwei Boxmodelle . . . . . . . . . . . . . . . . . . . . . . . . . . Der richtige Dokumenttyp für Ihr Projekt . . . . . . . . . . . . . . . . . . . . . . . Die schönen Seiten: universelle Attribute . . . . . . . . . . . . . . . . . . . . . . . . . Stylesheet-Anweisungen per »class« und »id« einbinden . . . . . . . . . . . . Inhalt beschreiben mit »title« und »lang« . . . . . . . . . . . . . . . . . . . . . . . Das Attribut »contenteditable« in HTML 5 . . . . . . . . . . . . . . . . . . . . . . Die Trennung von Inhalt, Strukur, Präsentation und Verhalten . . . . . . . . . Die Trennung in der Praxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mit Dokumentenbäumen arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . Browser, Parsing und Rendering. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dynamisches HTML, Ajax und Rendering . . . . . . . . . . . . . . . . . . . . . .

....

7

....

8

....

10

....

10

....

11

....

11

....

12

....

13

....

13

....

14

....

15

....

16

....

17

....

18

....

18

....

20

....

21

|

V

3 CSS-Überblick

................................................

23

Stylesheets und HTML-Dokumente verbinden . . . . . . . . . . . . . . . . . . . . . . . . . Ein Stylesheet per »link«-Element einbinden . . . . . . . . . . . . . . . . . . . . . . . . . Conditional Comments zum Ansprechen verschiedener Versionen des Internet Explorers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . »link« durch »style« ersetzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Verwendung von »@import« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finger weg vom »style«-Attribut! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Regeln für bestimmte Medientypen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Selektoren für Elemente, die mit Stilen versehen werden sollen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Eltern, Kinder und Geschwister: Beziehungen zwischen Elementen . . . . . . . . Einfache Selektoren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Gruppierte Selektoren und Selektoren für Nachfahrenelemente . . . . . . . . . . . Kindelemente direkt auswählen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Regelkonflikte, Priorität und Präzedenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Priorität der Selektoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Regelkonflikte vermeiden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vererbte Werte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Untersuchung von CSS-Eigenschaften und -Werten . . . . . . . . . . . . . . . . . . . . . . CSS-Maßeinheiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Medienübergreifende Längen- und Maßeinheiten . . . . . . . . . . . . . . . . . . . . . Pixelwerte und Punktdichte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Druckfreundliche Längeneinheiten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Schriftgrößen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Farbwerte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die wichtigsten CSS-Eigenschaften für das Layout . . . . . . . . . . . . . . . . . . . . . . .

23 23 24 25 25 26 26 28 28 29 30 31 31 31 32 33 34 34 34 35 36 37 37 38

4 Eine gesunde Beziehung zu den Webstandards entwickeln . . . . . . . . . . . . . 41 Viele Standards fürs Web . . . . . . Wozu Webstandards? . . . . . . . . . Interoperabilität . . . . . . . . . . . Die Kräfte des Marktes . . . . . . Vorwärtskompatibilität . . . . . . Zugänglichkeit . . . . . . . . . . . . Prioritäten der Hersteller . . . . . Altlasten als Bremse . . . . . . . . Best Practices (und ihr Fehlen) . Strikte Gesetzesauslegung . . . . VI

|

Inhalt

..................................

41

..................................

42

..................................

43

..................................

43

..................................

43

..................................

43

..................................

44

..................................

44

..................................

45

..................................

45

Der Mittelweg: Standardfreundlichkeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vorteile der Standardfreundlichkeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Regeln für standardfreundliche Entwicklung . . . . . . . . . . . . . . . . . . . . . .

45 46 46

5 Effektive Stylesheets und Dokumentenstrukturen . . . . . . . . . . . . . . . . . . . . 49 Die vier wichtigsten Angewohnheiten für effektive Stylesheets . . . . . . Angewohnheit 1: In der Kürze liegt die Würze . . . . . . . . . . . . . . . Angewohnheit 2: Flexibilität . . . . . . . . . . . . . . . . . . . . . . . . . . . . Angewohnheit 3: Konsistenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . Angewohnheit 4: Auf Kurs bleiben . . . . . . . . . . . . . . . . . . . . . . . . CSS-Zen und die Erfahrung des Gestalters . . . . . . . . . . . . . . . . . . . . Die Funktionsprinzipien des CSS-Zen . . . . . . . . . . . . . . . . . . . . . Informationsarchitektur und Usability des Webs . . . . . . . . . . . . . . . . Mehrdimensionalität . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Navigation: Ortsbestimmung und Orientierungshilfen . . . . . . . . . Besucherstrategien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Richtlinien für die Erstellung benutzbarer Schnittstellen . . . . . . . . Szenarios und Benutzertests zur Vorhersage von Besucherverhalten Taxonomie und Nomenklatur . . . . . . . . . . . . . . . . . . . . . . . . . . . Taxonomie auf die Kaskade anwenden . . . . . . . . . . . . . . . . . . . . . Neue Strukturelemente (HTML 5) . . . . . . . . . . . . . . . . . . . . . . . .

6 Lösungen für das CSS-Layout-Puzzle

........

49

........

50

........

53

........

55

........

58

........

60

........

60

........

61

........

62

........

64

........

65

........

66

........

68

........

69

........

70

........

73

..............................

75

Das CSS-Boxmodell und die Größe von Elementen . . . . . . . . . . . . . . . . . Quirks Mode und Strict Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . auto-Werte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Eigenschaft »overflow« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Länge und Breite für Elemente anstelle expliziter Werte nur begrenzen . Mit Unwägbarkeiten umgehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rahmen, Innen- und Außenabstände . . . . . . . . . . . . . . . . . . . . . . . . . . . Negative Außenabstände . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Zusammengefasste Außenabstände . . . . . . . . . . . . . . . . . . . . . . . . . . Rahmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Innenabstände . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das Box-Verhalten der Wurzelelemente des Dokuments . . . . . . . . . . . Längenangaben für Box-Eigenschaften und Prozentwerte. . . . . . . . . . . Darstellungsrollen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inline-Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Block-Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.....

75

.....

76

.....

76

.....

77

.....

79

.....

80

.....

81

.....

81

.....

82

.....

83

.....

84

.....

84

.....

85

.....

85

.....

86

.....

86

Inhalt

|

VII

Inline-Block-Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das Flussverhalten eines Elements mit »display« ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Eigenschaft »display« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Eigenschaften »float« und »clear« . . . . . . . . . . . . . . . . . . . . . . . . . . . Das Verhalten von Floats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das »float«-Verhalten mit der Eigenschaft »clear« steuern . . . . . . . . . . »float«-Kontext . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mehrspaltige Layouts implementieren . . . . . . . . . . . . . . . . . . . . . . . . . . Ein zweispaltiges Tabellen-Layout nach CSS portieren . . . . . . . . . . . . . Die Regeln für das zweispaltige Layout . . . . . . . . . . . . . . . . . . . . . . . . Vorteile der Beschränkung von Layout-Anweisungen auf Stylesheets . . Zwei Spalten auf drei Spalten erweitern . . . . . . . . . . . . . . . . . . . . . . . Mehr als drei Spalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Semantisch leere Container für mehrspaltige Layouts . . . . . . . . . . . . . Fortgeschrittenes Layout mit CSS 3 . . . . . . . . . . . . . . . . . . . . . . . . . . CSS-Eigenschaften für die Positionierung . . . . . . . . . . . . . . . . . . . . . . . . Wie die Positionierung funktioniert . . . . . . . . . . . . . . . . . . . . . . . . . . Positionierte Elemente begrenzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Eigenschaften »visibility« und »z-index« . . . . . . . . . . . . . . . . . . . . . . Ändern der Sichtbarkeit ohne Auswirkungen auf den Dokumentenfluss Stapelung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Quellcode-Reihenfolge und präzises Layout für die Navigation . . . . . . . . . Die Liste ausrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Navigationslisten genau platzieren . . . . . . . . . . . . . . . . . . . . . . . . . . . Layouttypen und Hilfslinien-Raster . . . . . . . . . . . . . . . . . . . . . . . . . . . . Feste, proportionale und flexible Layouts . . . . . . . . . . . . . . . . . . . . . . Hilfslinien definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Drittelregel, der Goldene Schnitt und die Fibonacci-Folge . . . . . . . Implementierung eines flexiblen Layoutrasters . . . . . . . . . . . . . . . . . .

7 Listen

|

87

.....

87

.....

88

.....

89

.....

89

.....

90

.....

91

.....

91

.....

92

.....

94

.....

95

.....

96

.....

98

.....

98

.....

99

.....

99

.....

99

.....

101

.....

103

.....

103

.....

103

.....

105

.....

105

.....

106

.....

108

.....

108

.....

111

.....

113

.....

114

......................................................

117

Geordnete und ungeordnete Listen . . . . . . . . . . . . . . . . . . . . . . . . . . Browser-Standarddarstellung für geordnete und ungeordnete Listen . Gültige geordnete und ungeordnete Listen erstellen. . . . . . . . . . . . . Die Eigenschaft »list-style-type« und das Attribut »type« . . . . . . . . . Das »nav«-Element (HTML 5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Zählweise in geordneten Listen anpassen . . . . . . . . . . . . . . . . .

VIII

.....

Inhalt

.......

117

.......

117

.......

118

.......

118

.......

119

.......

121

Andere Verwendungen für Listen . . . . . . . . . . . . . . . . . . . . . . . . . . . Gliederungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Aufzählungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das Layout für Links im Fußteil anpassen . . . . . . . . . . . . . . . . . . Aufzählungszeichen als Hintergrundbild? . . . . . . . . . . . . . . . . . . . Stile für Navigationselemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Platzierung der primären Navigation in der Quellcode-Reihenfolge. Rezept für die primäre Navigation . . . . . . . . . . . . . . . . . . . . . . . . Rezept für die Navigation im Fußteil . . . . . . . . . . . . . . . . . . . . . . Definitionslisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Stile für Definitionslisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wörterbuch-Beispiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Beispiel für einen Dialog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

........

122

........

122

........

122

........

123

........

123

........

124

........

124

........

125

........

126

........

127

........

127

........

128

........

130

8 Überschriften, Hyperlinks, Inline-Elemente und Zitate . . . . . . . . . . . . . . . . . 133 Überschriften und gutes Schreiben . . . . . . . . . . . . . . . . . . . . . . . . . . . Gedruckte Überschriften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Optimale Platzierung für Überschriften . . . . . . . . . . . . . . . . . . . . . Stile für Überschriften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Größe und Schriftart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Größen von Überschriften anpassen . . . . . . . . . . . . . . . . . . . . . Überschriften hervorheben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Markup für Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Link-Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Virtuose Verwendung des »href«-Attributs . . . . . . . . . . . . . . . . . . . Links auf bestimmte Teile eines Dokuments . . . . . . . . . . . . . . . . . . Effektiver Inhalt für Links und Werte für das »title«-Attribut . . . . . . Stildefinitionen für Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pseudoklassen für Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mit »display: block« den anklickbaren Bereich von Links vergrößern Die Eigenschaft »text-decoration« . . . . . . . . . . . . . . . . . . . . . . . . . Die Eigenschaft »cursor« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Semantische Bedeutung durch Inline-Elemente . . . . . . . . . . . . . . . . . . Zitate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.......

133

.......

134

.......

135

.......

135

.......

135

.......

136

.......

137

.......

137

.......

137

.......

138

.......

139

.......

139

.......

141

.......

141

.......

142

.......

143

.......

144

.......

144

.......

146

9 Farben und Hintergründe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Farbenlehre und Webfarben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Usability, Zugänglichkeit und Farbe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Das additive Farbmodell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Inhalt

|

IX

Das HSB-Farbmodell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das subtraktive Farbmodell . . . . . . . . . . . . . . . . . . . . . . . . . . Design, Kontrast und Komplementärfarben . . . . . . . . . . . . . . Farben identifizieren, Kurzfassung . . . . . . . . . . . . . . . . . . . . . Monitore und die »websichere« Farbpalette . . . . . . . . . . . . . . Eigene Farbpaletten erstellen . . . . . . . . . . . . . . . . . . . . . . . . . CSS-Hintergründe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die richtigen Werte für »background-position« . . . . . . . . . . . . Die CSS-Kurzschrift-Eigenschaft »background« . . . . . . . . . . . . Hintergrundbilder erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . »Faux Columns«. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Gekachelte Hintergrundtexturen und -muster . . . . . . . . . . . . . Größere Hintergrundtexturen und nicht wiederholte Embleme Schattenwürfe, Gel-Effekte und abgerundete Ecken . . . . . . . . . Grafische Schriften und das Fahrner Image Replacement . . . . . . . Die FIR-Stylesheet-Regeln . . . . . . . . . . . . . . . . . . . . . . . . . . . Nachteile der FIR-Methode . . . . . . . . . . . . . . . . . . . . . . . . . . Die Serverlast mit Sprites verringern . . . . . . . . . . . . . . . . . . . . . .

...........

149

...........

149

...........

150

...........

151

...........

153

...........

154

...........

155

...........

155

...........

157

...........

157

...........

158

...........

160

...........

161

...........

162

...........

162

...........

164

...........

164

...........

165

10 (Daten-)Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Nachteile von Layout-Tabellen . . . . . . . . . . . . . . . . Quellcode-Reihenfolge: Die Quadratur des Kreises Vom CSS-Zen bleibt nur ein Mythos . . . . . . . . . . Die unvermeidliche Abhängigkeit von Templates . Positionierung ist bei Tabellen-Layouts wertlos . . . Bestandteile einer Datentabelle. . . . . . . . . . . . . . . . . Beispiel: Die volle Packung Tabellen-Markup . . . . Tabellenzellen anlegen . . . . . . . . . . . . . . . . . . . . . . Tabellen- und Datenanordnung . . . . . . . . . . . . . . Tabellenkopf- und -fußteil und ihre Zellen . . . . . . . . Attribute und Kindselektoren . . . . . . . . . . . . . . . Den Kontrast für Kopf- und Fußteil reduzieren . . . Rollover-Effekte für Tabellen . . . . . . . . . . . . . . . .

....................

167

....................

167

....................

168

....................

168

....................

169

....................

169

....................

170

....................

173

....................

174

....................

176

....................

177

....................

178

....................

179

11 Bilder und Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Ersetzte Elemente . . . . . . . . Bilder vorbereiten . . . . . . . . Das »alt«-Attribut . . . . . . Bildgrößen und Rahmen . X

|

Inhalt

......................................

181

......................................

182

......................................

183

......................................

183

Bilder erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Beschneiden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . »Matting«: Ein virtuelles Passepartourt . . . . . . . . . . . . . . . . . . . . . . . . . . Skalieren: Die absolute Bildgröße ändern . . . . . . . . . . . . . . . . . . . . . . . . Tonwert und Kontrast anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mehrere Anpassungen auf einmal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mit Farbprofilen arbeiten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bildoptimierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das richtige Dateiformat wählen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die goldene Mitte zwischen Dateigröße und Bildqualität . . . . . . . . . . . . . Bilder veröffentlichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bilder richtig ordnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bilder mit einem CMS verwalten und veröffentlichen . . . . . . . . . . . . . . . Etikette beim Veröffentlichen von Bildern . . . . . . . . . . . . . . . . . . . . . . . . Stile für Bilder und Plugin-Inhalte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bildlayout innerhalb einer Spalte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bildbeschriftungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vorschaubilder für Galerien und Diaschauen (Slideshows) . . . . . . . . . . . . Lightbox: Vorschaubilder, Galerien und Diaschauen . . . . . . . . . . . . . . . . SlideShowPro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Integration von Videos und Präsentationen im Flash-Format mit SWFObject Multimediadaten integrieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Geschichte dreier Firmen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Flash als möglicher Ausweg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Multimedia-Inhalte mit reinem Markup einbinden . . . . . . . . . . . . . . . . . Probleme mit Stilen für Plugin-Inhalte . . . . . . . . . . . . . . . . . . . . . . . . . . Plugin-Probleme mit dem HTTP-Header »Content-Disposition« umgehen Eine offene Haltung bewahren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Elemente »video« und »audio« (HTML 5). . . . . . . . . . . . . . . . . . . . . Das »canvas«-Element (HTML 5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

...

184

...

184

...

185

...

186

...

187

...

189

...

189

...

191

...

191

...

191

...

192

...

192

...

193

...

194

...

195

...

195

...

195

...

197

...

198

...

199

...

200

...

201

...

202

...

202

...

203

...

203

...

204

...

204

...

205

...

206

12 Web-Typografie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Eine kurze Geschichte der Schrift . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Herkunft moderner westlicher Buchstabenformen . . . . . . . . . . . Gutenbergs Druckerpresse und die Kunst der Typografie . . . . . . . . . Das Aufkommen des Digitalsatzes . . . . . . . . . . . . . . . . . . . . . . . . . Verschiedene Beschränkungen, aber keine veränderten Erwartungen Ein kurzes Glossar der Typografie . . . . . . . . . . . . . . . . . . . . . . . . . . . Schriftenglättung: Aliasing und Anti-Aliasing . . . . . . . . . . . . . . . . . . .

.......

209

.......

210

.......

210

.......

211

.......

211

.......

212

.......

215

Inhalt

|

XI

Schriftstile, Lesbarkeit und Erkennbarkeit . . . . . . . . . . . . . . . . . . . . . . . Stildefinitionen zum Erhöhen der Lesbarkeit . . . . . . . . . . . . . . . . . . . Stildefinitionen zum Erhöhen der Erkennbarkeit . . . . . . . . . . . . . . . . Der »Knick« und kleine Schriften . . . . . . . . . . . . . . . . . . . . . . . . . . . Schriftgrößen angeben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die richtigen Längeneinheiten für Schriftgrößen . . . . . . . . . . . . . . . . Berechnung der Werte für em-Einheiten und Prozentangaben . . . . . . Schlüsselwörter für Schriftgrößen . . . . . . . . . . . . . . . . . . . . . . . . . . . Arbeit mit Schriften und Schriftschnitten . . . . . . . . . . . . . . . . . . . . . . . Das Problem der geringen Auswahl . . . . . . . . . . . . . . . . . . . . . . . . . Eigene Schriften definieren: Die Eigenschaft »font-family« . . . . . . . . . Die richtigen Schriftnamen finden . . . . . . . . . . . . . . . . . . . . . . . . . . Mit der Eigenschaft »font« auf Systemschriften zugreifen . . . . . . . . . . Überblick über die Zeichenkodierung . . . . . . . . . . . . . . . . . . . . . . . . . . Was ist Zeichenkodierung? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ASCII, ISO 8859-1, Unicode und UTF-8 . . . . . . . . . . . . . . . . . . . . . Das richtige Kodierungsschema wählen . . . . . . . . . . . . . . . . . . . . . . Zeichen-Entities zur Definition von Nicht-ASCII-Zeichen . . . . . . . . . Ausgewogene Schriftgestaltung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vorhersagbarkeit und Panik . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Grenzen von Inhalten ermitteln . . . . . . . . . . . . . . . . . . . . . . . . . Schrift unterscheiden: Schriftschnitt, Größe, Gewicht, Stil und Farbe . Das »Überlaufen« von Text verhindern. . . . . . . . . . . . . . . . . . . . . . . Stile für Textpassagen mit gleicher Priorität . . . . . . . . . . . . . . . . . . . Schriftübersichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Verschiedene typografische Aspekte von CSS . . . . . . . . . . . . . . . . . . . . Die Eigenschaft »line-height« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Eigenschaften »font-variant« und »text-transform« . . . . . . . . . . . Die Eigenschaften »letter-spacing« und »word-spacing« . . . . . . . . . . . Die Eigenschaft »white-space« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Gute Webtypografie in der Praxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13 Saubere und zugängliche Formulare

|

Inhalt

218 218

......

218

......

219

......

221

......

221

......

222

......

223

......

223

......

223

......

226

......

227

......

229

......

229

......

230

......

230

......

231

......

232

......

234

......

235

......

235

......

236

......

238

......

239

......

240

......

240

......

241

......

241

......

242

......

242

......

242

..............................

243

Effektive Formulare erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Webapplikationen, Benutzerperspektive und Design-Entscheidungen . Benutzerschnittstellen nach Funktion ordnen . . . . . . . . . . . . . . . . . . Zehn Regeln für effektive Webformulare und -applikationen . . . . . . . Einschätzung und Struktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Anforderungen ermitteln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XII

...... ......

......

243

......

243

......

244

......

245

......

247

......

248

Markup und Struktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Grundsätzliche Struktur, Darstellung und Verhalten von Formularen . . Vom Formular ausgelöste GET-Requests . . . . . . . . . . . . . . . . . . . . Die POST-Methode und das Hochladen von Dateien . . . . . . . . . . . Die Größe und das Aussehen einzelner Formularelemente anpassen . Prototyping und Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das Einmaleins des Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . Design-Templates, Grundstile und Formular-Layout . . . . . . . . . . . . Einheitliche Gestaltung von gleichen Formularelementen. . . . . . . . . Erforderliche Formularfelder und Eingabeformate . . . . . . . . . . . . . . . . Erforderliche Felder hervorheben . . . . . . . . . . . . . . . . . . . . . . . . . . Eingabefehler aufspüren und identifizieren . . . . . . . . . . . . . . . . . . . Die Attribute »disabled« und »readonly« . . . . . . . . . . . . . . . . . . . . Zugängliche Formulare erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . Zugängliche Formulare implementieren . . . . . . . . . . . . . . . . . . . . . Formulare über die Tastatur steuern. . . . . . . . . . . . . . . . . . . . . . . . Neue Merkmale in HTML 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Neue Eingabeelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das Attribut »required« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.......

250

.......

253

.......

254

.......

256

.......

256

.......

258

.......

258

.......

259

.......

261

.......

262

.......

263

.......

264

.......

265

.......

265

.......

266

.......

268

.......

269

.......

269

.......

270

14 Die schlechten Seiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Die schlechten Manieren des Internet Explorers (speziell IE 6) Browserkrieg 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fehlende oder schlechte Unterstützung für Selektoren . . . . »hasLayout« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Verdoppelte Außenabstände: Der »Double Margin Bug« . . »expression()«-Werte . . . . . . . . . . . . . . . . . . . . . . . . . . . ActiveX-Filter, Transparenz und Farbverläufe . . . . . . . . . . PNG-Unterstützung (oder ihr Fehlen) . . . . . . . . . . . . . . . Schlecht unterstützte CSS-Eigenschaften . . . . . . . . . . . . . Probleme mit XHTML und XML . . . . . . . . . . . . . . . . . . . Ein hässliches System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Zerbrechliche Templates und Inhalte von Drittanbietern . . Markup-Validierung als Voraussetzung für korrekte Stylesheet-Implementierung. . . . . . . . . . . . . . . . . . . . . . . »Optimiert für …« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abgestufte Unterstützung . . . . . . . . . . . . . . . . . . . . . . . . »embed« oder »object« . . . . . . . . . . . . . . . . . . . . . . . . . . Formularelemente, Plugins und der Stapelkontext . . . . . . .

..............

273

..............

274

..............

275

..............

276

..............

277

..............

277

..............

278

..............

278

..............

279

..............

279

..............

280

..............

280

..............

280

..............

281

..............

281

..............

283

..............

283

Inhalt

|

XIII

Obskure Gründe für ungültiges Markup . . . . . . . . . . . . . . . . . . . . . . . Sackgassen und die bösen Nachbarn von HTML . . . . . . . . . . . . . . . . . . . Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das Element »strike« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das Attribut »name« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Elemente »noscript« und »noframes« . . . . . . . . . . . . . . . . . . . . . . Semantische Verrenkungen und der begrenzte Wortschatz von HTML . Präsentationselemente und wie Sie sie vermeiden . . . . . . . . . . . . . . . . Vertikalen Leerraum verändern: »hr« und »br« . . . . . . . . . . . . . . . . . . Das Element »pre« und die Eigenschaft »white-space« . . . . . . . . . . . . . CSS-Travestien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . @-Direktiven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Berechnete Werte und Rundungsunterschiede . . . . . . . . . . . . . . . . . . Herstellerspezifische Präfixe: »-moz« und »-webkit« . . . . . . . . . . . . . . Der Wert »inherit« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dinge verstecken: »z-index« und »clip« . . . . . . . . . . . . . . . . . . . . . . . Zähler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Regeln für den Fluss der Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . Unicode-Werte und die Eigenschaft »content« . . . . . . . . . . . . . . . . . . Die furchtbaren Seiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Elemente »marquee« und »blink« . . . . . . . . . . . . . . . . . . . . . . . . . Eigenschaften der Benutzeroberfläche (IE) . . . . . . . . . . . . . . . . . . . . . Das Attribut »align« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das Attribut »style« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Div-itis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Attribute für Event-Handler. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Überflüssige Unterstreichungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das Attribut »http-equiv« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Das Puzzle wieder zusammensetzen . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.....

284

.....

285

.....

285

.....

287

.....

287

.....

288

.....

288

.....

289

.....

290

.....

290

.....

290

.....

291

.....

291

.....

292

.....

292

.....

293

.....

294

.....

294

.....

295

.....

296

.....

296

.....

296

.....

297

.....

297

.....

297

.....

298

.....

299

.....

299

.....

300

Anhang: URIs, Client-Server-Architektur und HTTP . . . . . . . . . . . . . . . . . . . . . . . 301 Glossar

........................................................

307

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

XIV

|

Inhalt

Einleitung

HTML und CSS sind schon recht alte Technologien, die bereits über 10 Jahre im Einsatz sind und sich immer noch weiterentwickeln. Langjährige Webentwickler (mit 15 Jahren Berufserfahrung und mehr) haben Projekte für die unterschiedlichsten Browser realisiert, mit diversen Funktionen experimentiert und dabei deren Vor- und Nachteile kennengelernt. Trotz bester Absichten haben die Erfinder von HTML und CSS nicht alles richtig gemacht. Manche Experimente sind eher misslungen, andere Teile haben sich als wesentlich nützlicher herausgestellt, als ursprünglich geplant. Wer diese Technologien meistern will, muss wissen, welche Teile der Spezifikationen nur überflüssiger Müll sind und welche die echten Goldstücke, die möglichst oft verwendet werden sollten. Wenn Sie sich auf die besten Methoden (Best Practices) konzentrieren, können Sie in kürzerer Zeit bessere Websites erstellen.

Über dieses Buch Hoffentlich halten Sie dieses Buch in den Händen, weil Sie auf Ihrer Lieblings-Website eine fabelhafte Rezension gelesen haben oder weil ein Bekannter Ihnen gesagt hat, dass Sie dieses Buch unbedingt lesen müssen. (Der Traum jedes Autors.) Vermutlich brauchen Sie ein paar weitere Informationen zu der Frage: Ist dies das richtige Buch für Sie? Wenn Sie sich und Ihre Schwerpunkte auf den nächsten Seiten wiederfinden, dann sollten Sie mit diesem Buch unter dem Arm aus dem Geschäft laufen – oder sich zumindest auf den nächsten Stuhl setzen und gleich mit dem Lesen anfangen.

Was ist das Beste an HTML und CSS Der größte Teil von HTML und CSS ist zweifellos ziemlich langweilig. Und damit meine ich: zum Einschlafen. So gesehen, haben Webtechnologien Ähnlicheit mit gewissen Filmen. Der Betrachter würde gern die Einführung überspringen und gleich dort beginnen, wo es interessant wird. |

XV

Dieses Buch soll genau diesem Gefühl Rechnung tragen. Der gesamte Einstieg ins Thema – zu dessen Studium wir unsere Leser herzlich einladen – wird in den Kapiteln 2 und 3 abgehandelt. Hier können Sie schnell mal etwas nachlesen, falls Sie meinen, irgendetwas verpasst zu haben. So richtig zur Sache geht es aber in den Teilen danach: Sie lernen, solide Layouts zu entwickeln, sich von Programmierfehlern nicht einschüchtern zu lassen, Templates zu bauen, die auch nach einem Redesign noch funktionieren, und vieles andere.

Was Sie vor dem Lesen dieses Buches wissen sollten Um dieses Buch zu verstehen, sollten Sie ein paar Dinge bereits wissen: Sie sollten sich mit HTML 4.01-Elementen, CSS-Selektoren und CSS-Eigenschaft/Wert-Paaren auskennen. Auf der englischen Website zu diesem Buch (http://www.htmlcssgoodparts.net) finden Sie Referenztabellen mit Links auf umfangreiche Beschreibungen von HTML und CSS auf anderen Websites. Es ist allerdings deutlich einfacher, diesem Buch zu folgen, wenn Sie sich bereits mit CSS und HTML auskennen. Dieses Buch ist außerdem leichter verständlich, wenn Sie wissen, was mit der Trennung von Präsentation, Inhalt und Struktur in einer Website oder -applikation gemeint ist. Wenn Sie sich mit diesen Begriffen nicht wohlfühlen, finden Sie Trost und Rat in O’Reillys umfassenden Handbüchern zu HTML und CSS und den Bänden aus der Taschenbibliothek (kurz & gut). Zum Wohle der Leser, die ihr Wissen etwas überschätzt haben, werden die Grundlagen zur Struktur von Webseiten, Stylesheets und HTML-Elementen trotzdem angesprochen, allerdings so kurz wie möglich.

Der ideale Leser Wenn einer der folgenden Punkte auf Sie zutrifft, können Sie sich als idealen Leser dieses Buches bezeichnen: • Sie kennen sich mit der Serverseite einer Webapplikation aus. Ein Redesign ist aber nichts für Sie, weil Sie dafür zu tief in den Code eintauchen müssen, um den enthaltenen Markup-Code anzupassen. Die effektivste Lösung dieses Problems besteht in der Verwendung der »CSS Zen«-Technik, die im CSS Zen Garden (http://www.csszengarden.com/) von Dave Shea zu sehen ist. Dieses Buch zeigt Ihnen den Weg des CSS Zen – die Strukturierung des Markup-Codes auf eine Weise, die ein Redesign vollkommen auf Stylesheets beschränkt – aus einer Perspektive, die auch für Entwickler verständlich ist. • Sie sind geschickt in der Verwendung von Tools zur Website-Erstellung wie Adobe Dreamweaver oder Microsoft Visual Studio, aber Ihre Erwartungen kollidieren ständig mit den Einschränkungen dieser Systeme. Wenn Sie nicht aufpassen, füllen diese Tools Ihre Webseiten mit jeder Menge Krempel (soll heißen: nutzlosem, überflüssigem Müll) und verstoßen dabei gegen das KISS-Prinzip. Hiermit ist nicht die XVI

|

Einleitung

Rockgruppe gemeint, sondern der Tipp »Keep it simple, stupid!« – »Einfacher ist besser«. Das passiert, weil Web-Entwicklungsumgebungen eben nur Konfektionsgrößen bieten, keinen Maßanzug. Dieses Buch erklärt HTML und CSS so detailliert, dass Sie Ihre Werkzeuge genau auf Ihren Arbeitsalltag abstimmen können. • Sie haben, aus welchem Grund auch immer, eine Menge schlechter Angewohnheiten, die Sie durch bessere ersetzen wollen. Einige unter Ihnen verwenden womöglich immer noch HTML, um nicht nur die Struktur, sondern auch die Darstellung von Webseiten zu steuern. CSS kommt Ihnen dagegen wie ein undurchdringlicher Dschungel vor. Dieses Buch bringt Licht in das CSS-Dickicht. • Sie sind ein Grafikdesigner aus dem Printbereich. Um einen Karriereknick zu vermeiden, müssen Sie die Stärken und Schwächen des Webs als Medium verstehen. Sie haben einen Blick auf HTML und CSS geworfen und glauben, dass beides gut zusammenpasst, aber Sie verstehen einfach nicht, wie. In diesem Buch betrachten wir die Verbindung beider Techniken, um Designelemente genau am gewünschten Ort zu platzieren. • Sie müssen sich in Ihrem Beruf an bestimmte Richtlinien für die Barrierefreiheit (Accessibility) der Seiten halten oder Anforderungen an die medienübergreifende Benutzbarkeit erfüllen. Ist Ihr Markup-Code nicht für die Verwendung von CSS vorbereitet, gibt es wenig Hoffnung, medienübergreifende Websites zu erstellen, geschweige denn, diese für Benutzer mit Behinderungen zugänglich zu machen. Dieses Buch erklärt, wie Sie bestimmte Standards zur Zugänglichkeit einhalten können, ohne hierfür mehrere Websites parallel erstellen zu müssen. • In einem Bereich außerhalb der Präsentationsschicht haben Sie bereits Expertenwissen und wollen sich Ihren Job erleichtern. Eine zu starke Spezialisierung führt möglicherweise zu einem Mangel an Überschneidungen bei den Fähigkeiten des Einzelnen. Das schafft Barrieren bei der Kommunikation im Team. Dieses Buch zeigt, welche Prioritäten bei der Arbeit für Entwickler am direktesten mit den Besuchern der Site zu tun haben, und gibt Ihnen dadurch die Informationen für eine effektivere Kommunikation im Team. • Sie haben es einfach satt, ständig mit dem Schädel gegen die Wand namens Internet Explorer 6 zu knallen. Mehrere Websites, insbesondere Position Is Everything (http://www.positioniseverything.net/), helfen Ihnen, das Bereitstellen zusätzlicher Stylesheets für alte Versionen von Internet Explorer zu vermeiden. Hierbei befassen sich die meisten Online-Ressourcen jedoch mit speziellen Programmierfehlern und Eigenarten. In Kapitel 14 finden Sie eine erklärende Zusammenfassung der Macken »unter der Haube«, die zu ungewollten Zusammenstößen und Reifenpannen führen können. Außerdem finden Sie in diesem Teil ein Kochbuch mit Praktiken und Techniken, mit denen Sie diese Probleme gleich ganz vermeiden können.

Eine Warnung zum Thema (mangelnde) Kenntnis Teilweise sind Ihnen die Inhalte dieses Buches möglicherweise schon vertraut. Dieses Buch richtet sich an einen großen Kreis von Spezialisten. Dadurch kann es gelegentlich Einleitung

|

XVII

passieren, dass z.B. Dinge, die für Entwickler gedacht sind, den Designern unter Ihnen so offensichtlich vorkommen, dass es fast schon wehtut, und umgekehrt. Es kann auch passieren, dass Ihnen die Diskussion mancher Themen vorkommt wie ein Streitgespräch. Oft fallen kreative Entscheidungen und solche zur Implementierung nicht aus Vernunft, sondern aus einer Position politischer Stärke. Wir hoffen, dass dieses Buch dabei hilft, vernunftbasierte Argumente gegen schlechte Ideen durchzusetzen. Wenn Ihnen alles in diesem Buch neu vorkommt, kann es sein, dass Sie sich ein bisschen überschätzt haben. In diesem Fall kann hoffentlich die Website zu diesem Buch weiterhelfen. Sie soll sicherstellen, dass alle Käufer dieses Buches etwas davon haben. Erscheint Ihnen das Material trotzdem etwas zu komplizert, sollten Sie sich auf Schwierigkeiten einstellen. Das Problem lässt sich am besten mit Geduld lösen und indem Sie Ihren Freunden und Kollegen eine Menge Fragen stellen.

Ziele dieses Buches Oft sind die Eigenheiten von HTML, CSS und des Dokumentenbaums ohne gute Anleitung oder Erfahrung nur schwer zu verstehen. Dieses Buch soll Ihnen diese Dinge in verständliches Deutsch übersetzen. Hierzu gehören unter anderen die folgenden Themen: •

die Auswahl und Verwendung der besten HTML-Version für Ihr Projekt

•

wie Sie die Hindernisse zwischen Ihrer gegenwärtigen Vorgehensweise und durchgehend gültigem Markup-Code überwinden

•

wie Sie HTML für die Strukturierung – aber nicht für die Darstellung verwenden, unter der bestmöglichen Nutzung von CSS

•

seltsame und trotzdem nützliche HTML-Elemente

•

wie Sie Plugin-Inhalte zum Laufen bringen

•

die richtige und effektive Verwendung von Tabellen

•

wie Sie CSS-Selektoren verstehen und verwenden, besonders diejenigen für Nachfahren-Elemente

•

welche CSS-Selektoren vor anderen Vorrang haben

•

die Zusammenhänge des CSS-Block-Layouts

•

zusammengefasste CSS-Außenabständen (Margins)

•

Programmierfehler und andere Seltsamkeiten in Internet Explorer 6

•

wie Sie die Darstellung von Formularen in den Griff bekommen

•

die Geschichte der Programmierfehler in Webbrowsern

•

was HTTP tut, wenn Sie gerade nicht hinsehen (und warum das wichtig ist)

Dieses Buch versucht, alle Dinge abzudecken, die Frontend-Entwickler wissen sollten. Es soll die Beziehungen zwischen den Schichten der Webtechnologien beschreiben, mit

XVIII

|

Einleitung

denen Designer und Entwickler der Präsentationsschicht zu tun haben. Außerdem sollen die Stärken von HTML und CSS aufgezeigt werden. Dieses Buch gibt den weniger erfahrenen Lesern außerdem eine lange Liste mit CSSLayout-»Tricks« an die Hand, die für die Darstellung, Zugänglichkeit und Optimierung für Suchmaschinen (Search Engine Optimization, SEO) essenziell sind. Hierzu gehören: • Inhalte zentrieren • eine erweiterte Version der »Fahrner Image Replacement«-Methode zur Bildersetzung, um mehr Kontrolle über die Schriftart und Gestaltung von Überschriften zu bekommen • die Erstellung von Layouts mit ausgerichteten Spalten mit (scheinbar) gleicher Höhe • die Verwendung der CSS-Eigenschaft float für die optimale Nutzung der Spaltendarstellung und der Reihenfolge des Markup-Codes • die Erstellung vielseitiger und optisch ansprechender Navigationsbereiche • die Entwicklung von Arbeitsangewohnheiten, die Ihre Websites auf den Einsatz von Ajax vorbereiten • wie Sie die CSS-Eigenschaft position möglichst effizient nutzen • die Erstellung vielseitiger Grid-Layouts für Ihre Websites Nach der Lektüre dieses Buches sollten Sie beliebige Kombinationen aus Struktur- und Darstellungscode in die Präsentations- und Inhaltsschicht einer barrierefreien, anwenderfreundlichen und von Suchmaschinen indizierbaren Website verwandeln können – und das unabhängig davon, wie hanebüchen die Anforderungen scheinbar sind.

Was Sie nicht in diesem Buch finden Dieses Buch konzentriert sich auf Praktiken, die die Effektivität von Markup-Code und Stylesheets maximieren. Aus diesem Grund werden Sie einige Dinge hier nicht finden: Kaum unterstützte Teile von plattformspezifischem CSS-Code Mit CSS lässt sich eine Menge anstellen – leider funktioniert einiges davon nur mit schlecht unterstützten CSS-Selektoren und Eigenschaften. Solche Fälle behandeln wir ergebnisabhängig, d.h.: Gibt es für einen ActiveX-Filter in Firefox eine Entsprechung, wird er vermutlich erwähnt. Das Gleiche gilt für -moz-*-Eigenschaften, für die es Analogien in der IE-Laufzeitumgebung gibt. Damit etwas in diesem Buch erwähnt wird, muss es mindestens von Firefox 3 und von Internet Explorer 8 unterstützt werden. Damit Sonderfunktionen erwähnt werden, müssen sie von einer größeren Menge an Plattformen unterstützt werden. CSS-Eigenschaften für vergleichsweise seltene Medientypen Die in diesem Buch behandelten Produktionstechniken helfen Ihnen, barrierefreie Sites zu erstellen. Allerdings können wir hier aus Platzgründen nur eine Einführung in diese Methoden geben.

Einleitung

|

XIX

JavaScript und das Document Object Model (DOM) Obwohl JavaScript in diesem Buch erwähnt wird und gelegentlich sogar ein paar Codeschnipsel auftauchen, liegt das Hauptaugenmerk auf HTML und CSS. Die Manipulation von HTML und CSS mit JavaScript oder dem Document Object Model wird hier nicht behandelt. Die Integration in Frameworks wie jQuery und YUI Über JavaScript-Frameworks gibt es viele gute Dinge zu sagen. In diesem Buch werden Sie allerdings nichts dazu finden. Obwohl Sie in vielen Umgebungen nützlich sind, haben wir hier auf ihre Behandlung verzichtet, um den Rahmen des Buches nicht zu sprengen. Die besten Ressourcen, um die Arbeit mit JavaScript-Frameworks, den dazugehörigen Stildefinitionen und dem passenden Markup-Code zu lernen, finden Sie im Web und in Büchern, die sich spziell mit diesen Frameworks befassen. Eine umfassende Diskussion von CSS-Frameworks wie YUI Grids und Blueprint Ein Ziel dieses Buches besteht darin, Ihren Talenten den nötigen Feinschliff zu geben. Ihr Lebenslauf soll für die Leute der Personalabteilung genauso angenehm aussehen wie für diejenigen, die Ihnen schließlich einen Job geben (hoffentlich!). Das Lesen dieses Buches kann Ihnen dabei helfen, das CSS-Framework zu verstehen, für das Sie sich gerade entschieden haben, ohnedass wir hier eine Anleitung für ein bestimmtes Framework geben. Techniken zur Webserver-Konfigurierung Die Standardeinstellungen vieler Webserver vernachlässigen eine Reihe von Optionen, mit denen die Usability (Benutzerfreundlichkeit), Barrierefreiheit und Standardkonformität erhöht werden können. Allerdings sind diese Dinge eher die Aufgabe von Systemadministratoren. Eine Reihe von anderen O’Reilly-Titeln, insbesondere Webmaster in a Nutshell (http://oreilly.com/catalog/9780596003579/) und Website Optimization (http://oreilly.com/catalog/9780596515089/), befassen sich speziell mit diesem Interessengebiet. Zusätzlich befassen sich verschiedene Online-Communities und Blogs gelegentlich mit diesem Thema. Entwicklung für das mobile Web Sie haben das Pech, dass dieses Buch von einem lebenslangen Bewohner der USA geschrieben wurde, eines Landes, in dem die Fähigkeiten und die Verlässlichkeit mobiler Webzugänge noch sehr zu wünschen übrig lassen. Die Beliebtheit des iPhones hat die Situation zwar verbessert, aber längst noch nicht erträglich gemacht. Nur wenige Benutzer mobiler Endgeräte in den USA (wie auch in Deutschland, Anm. d. Ü.) können vom mobilen Web einen ähnlich hohen Standard erwarten wie die Benutzer von PCs. Zusätzlich erschwert wird die Entwicklung von mobilen Inhalten durch die Kosten bei den Prepaid-Tarifen und das Fehlen von unbelasteten Emulatoren für Mobilplattformen. Ich hoffe sehr, in die folgende Auflage dieses Buches auch Entwicklungstechniken für mobile Endgeräte aufnehmen zu können. Die Erwähnung von Opera für Desktop-Computer Wenn mir eine Sache in diesem Buch wirklich fehlt, so ist es die Erwähnung des Opera-Browsers für Desktop-Computer in der Diskussion des Browserverhaltens. XX

|

Einleitung

Beim Abwägen des Marktanteils von Opera gegen den Testaufwand, der für dieses Buch nötig gewesen wäre, war das Ergebnis äußerst entmutigend. Da ich Chris Mills von Opera für Vermittlung des Vertrages zu diesem Buch direkten Dank schulde, können Sie sicher sein, dass mir diese Entscheidung nicht leichtfiel. Sollte es auch nur ein geringes Leserinteresse an einer Diskussion von Opera geben, werde ich diese auf der Website zu diesem Buch nachreichen.

Über Webstandards Zum Schluss noch ein paar Worte zur Konformität mit den Empfehlungen des World Wide Web Consortiums (W3C) in kommerziellen Umgebungen, hier insbesondere bei Großunternehmen. Mir war es immer wichtig, zwischen »Standardfreundlichkeit« und der »buchstabengetreuen Befolgung« der Standards zu unterscheiden. Im ersten Fall geht es darum, dem Geist der sogenannten Webstandards gerecht zu werden, was sich in der Praxis leicht erreichen lässt. Der zweite Fall bedeutet, den Empfehlungen buchstabengetreu zu folgen, was manchmal schlicht unmöglich ist. Die Effektivität einer Website wird wesentlich mehr durch ihre Standardfreundlichkeit erhöht als dadurch, dass sie die Standards komplett einhält. Hierbei basieren die größten Verbesserungen darauf, beiden Zielen möglichst treu zu bleiben. Dieses Buch bevorzugt die Kompromisse und Ausweichlösungen, bei denen die Standardfreundlichkeit trotz ungünster Entwicklungsbedingungen gewahrt bleibt und es nur selten lange Gesichter gibt. Sie haben vielleicht gemerkt, dass ich den Begriff »sogenannte« Webstandards verwendet habe. Dieser Ausdruck basiert auf der Ironie, dass Webstandards eben keine Standards sind – jedenfalls nicht im wörtlichen Sinne. Standardisierung erfordert industrieübergreifend die gewissenhafte Verwendung eines formal definierten Systems. Hierfür sind Standardisierungsinstitutionen zuständig, deren Arbeit direkt oder indirekt in die Entscheidungen und Veröffentlichungen der International Organization for Standardization (ISO) einfließt. Ein weiteres Hauptmerkmal echter Standards sind objektive Kriterien, mit denen die Einhaltung von Standards durchgesetzt werden kann – eine Fähigkeit, die dem W3C in weiten Teilen fehlt. Aus diesen Gründen ist die beliebte Definition der W3C-Empfehlungen als »Standards« zwar sinngemäß vertretbar, echte Standards sind sie aber nicht. Allerdings hat sich die Praxis der Webstandards seit den Pionierjahren der 1990er enorm verbessert. Auch hierauf wird auf der Website zu diesem Buch detaillierter eingegangen.

Einleitung

|

XXI

Über Photoshop In den Kapiteln 9 und 11 wird die Erstellung von Bildern und Grafiken detailliert beschrieben. Die dort behandelten Vorgehensweisen beziehen sich auf Adobe Photoshop. Ich habe diesen Ansatz gewählt, weil in einer genügend großen Gruppe von Webprofis äußerst verschiedene Werkzeuge und Implementierungstechniken zum Einsatz kommen – bis es um die Arbeit mit Grafiken geht. Alternativen zu Photoshop (besonders Fireworks, ein weiteres Adobe-Produkt) haben ebenfalls ihre Anhänger. Aber selbst diese werden mir zustimmen, dass Grundkenntnisse zu den Werkzeugen von Photoshop und dessen Benutzeroberfläche äußerst nützlich sind. Meine Wahl basiert außerdem auf persönlicher Erfahrung. Ich habe seit meiner Anfängerzeit nie etwas anderes als Photoshop benutzt, um Webgrafiken zu bearbeiten. Ich hoffe, dass die Besucher der Website zu diesem Buch ihre eigenen Rezepte als Ergänzung zu den hier beschriebenen Arbeitsweisen beitragen werden. Außerdem unterstreicht die Verwendung von Photoshop, wie wichtig das richtige Werkzeug für eine effektive Zusammenarbeit ist. Kapitel 4 verdeutlicht den Wert von Produktionsstandards und Codebibliotheken, wobei sich die Vorteile einheitlicher Werkzeuge auch auf Software »von der Stange« erstrecken.

Was Sie auf der Website zu diesem Buch finden Die englische Website zu diesem Buch, www.htmlcssgoodparts.net, enthält eine Menge Informationen. Hierzu gehören unter anderem: • Errata und Korrekturen (englisch) • Blog-Einträge zu Leserfragen, aktuellen technischen Entwicklungen und besten Vorgehensweisen • schrittweise Demonstrationen der in diesem Buch besprochenen Techniken, inklusive Markup-Quellcode und Stylesheet-Regeln. • Vorlagen und/oder Templates für mehrzeilige Layouts und andere Website-Bausteine (Widgets) • HTML- und CSS-Referenztabellen, die auf diverse externe Dokumentationsquellen verweisen • Besucherrezensionen von Büchern und Programmen, die für die Leser dieses Buchs von Interesse sein könnten

Nomenklatur Im Webdesign gibt es viele Fachbegriffe, die uneinheitlich verwendet werden. Um die Gefahr der Verwirrung möglichst klein zu halten, werden die im Folgenden hervorgehobenen Begriffe durchgängig in diesem Buch verwendet. Dateien sind eigenständige Knoten im Dateisystem des Serverrechners, während Ressourcen Dokumente oder Teile davon sind, auf die mit separaten URIs (Uniform Resource XXII

|

Einleitung

Identifiers) verwiesen wird. Nicht alle Dateien besitzen entsprechende URIs, und nicht alle URIs verweisen auf einzelne Dateien. So kann ein URI beispielsweise auf die Ergebnisse einer Datenbankabfrage oder Datenströme verweisen. Gleichzeitig kann eine Datei auch einfach nur die Logik sein, die den Inhalt mehrerer URIs bestimmt. Seiten oder Dokumente enthalten eine oder mehrere Ressourcen beliebiger Art. Sie entsprechen der Ausgabe, die ein Benutzer auf die Anforderung eines einzelnen URI erhält (bzw. auch mehrerer URIs, wenn auf der Website Ajax eingesetzt wird). Der Unterschied zwischen den Begriffen »URI« und »URL« wird in diesem Buch als unerheblich betrachtet. Das liegt teilweise daran, dass der Begriff »Ressource« aufgrund der schnellen Entwicklung selbst fast schon bedeutungslos geworden ist. Als Inhalt bezeichnen wir die Dinge, um die herum eine Website aufgebaut ist. HTML-, XHTML- und XML-Code wird allgemein als Markup bezeichnet. Als Stylesheets bezeichnet man den Inhalt von CSS-Dateien oder style-Elementen. Stylesheet-Regeln definieren die Darstellung eines oder mehrerer Elemente einer Seite. Stylesheet-Regeln besitzen einen Selektor. Dieser definiert, auf welche Elemente einer Seite die Regel angewandt werden soll. Die Regel selbst besteht aus einem oder mehreren Paaren aus CSS-Eigenschaft und einem dazugehörigen Wert. Browser werden auch als Benutzerprogramm, User Agent oder Client bezeichnet. HTML und CSS werden seriell geparst. Das Ergebnis ist die Darstellung (das »Rendering«) der Seite im Browser. JavaScript ist ein eingetragenes Warenzeichen von Sun Microsystems. Es bezeichnet in diesem Buch die Programmiersprache, mit der in Form von Skripts die Datenverarbeitung und verschiedene interaktive Elemente im Browser gesteuert werden können. Um rechtliche Probleme zu vermeiden, benutzen einige Browserhersteller gelegentlich leicht abweichende Namen. Wo ein Browser ist, ist aber normalerweise ein JavaScript-Interpreter nicht weit. Das Document Object Model (oder DOM) ist steht einerseits für die Darstellung der Dokumentstruktur. Gleichzeitig definiert das DOM aber auch, wie diese Struktur durch Programme organisiert, abgefragt und verändert werden kann. Zwar gibt es unterschiedliche DOM-Spezifikationen für Webdokumente, von diesen ist allerdings nur eine vom W3C offiziell abgesegnet. Zur Schicht der webbasierten Dienste gehören dem allgemeinen Verständnis nach ein Betriebssystem, ein Webserver, eine relationale Datenbank, eine serverseitige Skriptsprache, HTML, CSS und JavaScript. Die Plattformen, die für die ersten vier Ebenen dieser Schicht verwendet werden, können unterschiedlich ausfallen. Allgemein spricht man bei den ersten vier Ebenen von der serverseitigen Umgebung, während die letzten drei Ebenen der clientseitigen Umgebung zuzuordnen sind. Die clientseitige Umgebung wird künstlich in vier Unterschichten unterteilt: Struktur (definiert durch das Markup), Inhalt (von Markup umgeben), Präsentation (mit CSS definiert) und Verhalten (mit JavaScript definiert). Zusammengenommen bilden diese

Einleitung

|

XXIII

Schichten eine MVC-(Model, View, Controller-)Architektur, die die MVC-Architektur auf der Serverseite widerspiegelt und mit dieser interagiert. Ajax steht für Asynchronous JavaScript And XML. Hierbei handelt es sich um einen Implementierungsansatz, der durch die GetXMLHttpRequest-Programmierschnittstelle (API) ermöglicht wird. HTML-Elemente sind die Hauptbestandteile des HTML-Namensraums. Tags bilden das eigentliche Markup. Sie können verschiedene Attribute enthalten, die bestimmte Werte besitzen. Tags umgeben in den meisten Fällen den Inhalt. Eine Dokumenttyp-Deklaration kann (und sollte in der Regel auch) am Anfang eines Webdokuments stehen. Sie definiert, gegen welche HTML-Version das Dokument validieren sollte. Die DTD (Dokumenttyp-Definition) besteht aus einer eine Reihe maschinenlesbarer Anweisungen, die die Gültigkeit der anzuwendenden HTML-Version festlegt. Die Angaben einer Dokumenttyp-Deklaration beziehen sich direkt auf eine bestimmte DTD. W3C-Empfehlungen (Recommendations) sind offizielle Dokumente, die als Spezifikationen für Webtechnologie-Plattformen und als Best Practices für die Verwendung dieser Plattformen dienen. Projektmanager sorgen dafür, dass die Hindernisse zwischen einem Projektteam und dem Erreichen seiner Ziele möglichst klein sind. Designer entwickeln das Erscheinungsbild (»Look and Feel«), und gestalten die Art und Weise, auf die Besucher eine Site benutzen und erleben (User Experience). Ingenieure und Anwendungsentwickler entwerfen und schreiben den Code, der die Site zusammenhält und antreibt. Frontend-Entwickler erstellen sämtliche Teile, die direkt mit dem Benutzer zu tun haben. Die meisten anderen Rollen, die häufig in Webentwicklungsteams zu finden sind, werden so benannt, wie es im Werbe- und Marketingumfeld üblich ist. Die Bezeichnung aktuelle Browser bezieht sich auf weitverbreitete Browserversionen zum Zeitpunkt der Drucklegung dieses Buches: Internet Explorer 6–8, Firefox 3.x und Safari 3.x und 4.x. Viele der hier aufgelisteten Begriffe beziehen sich auf bestimmte Prozesse, die beeinflussen, wie der Benutzer die Website erlebt. Diese Prozesse werden im Laufe dieses Buches detaillierter diskutiert.

»Read the Source, Luke!« Als ich im Jahr 1995 mit der Entwicklung von Webplattformen begann, war der Spruch »Read the Source, Luke!« der populärste Tipp, den man absoluten Neulingen in den Mailinglisten geben konnte. Er bezieht sich auf den Höhepunkt des Films Star Wars: Eine neue Hoffnung und ermahnt den Fragesteller dazu, den Markup-Quellcode (und heute auch die Stylesheet-Regeln) zu lesen, um daraus zu lernen. Dieser Hinweis ist weit mehr als nur der verschrobene Humor von Science-Fiction-Fans. Das beste Verständnis von effektivem Markup und Stylesheets erhält man durch das

XXIV

|

Einleitung

ungefilterte Lesen des Codes. Dies funktioniert auf ähnliche Weise, wie die Star WarsProtagonisten ihre Talente am besten nutzen konnten, indem sie »die Macht spüren«, ohne sich dabei von vorurteilsbehafteten Gedanken ablenken zu lassen. Um zu verstehen, wie jemand eine bestimmte Präsentation umgesetzt hat, müssen Sie deren Quellcode lesen. Ansonsten sind Enttäuschungen vorprogrammiert. Bevor wir uns allerdings damit beschäftigen, Ihnen die Feinheiten des Markup-Codes und von CSS nahezubringen, ist es am besten, das Web als ein System zu begreifen, inklusive der Beziehungen zwischen den zugrunde liegenden Konventionen und Technologien, die es im Innern antreiben.

Typografische Konventionen Wir verwenden die folgenden typographischen Konventionen: Kursiv Kennzeichnet die Namen von Dateien, Pfaden und Programmen sowie InternetAdressen, wie Domainnamen und URLs. Nichtproportionalschrift

Kennzeichnet Befehle und Optionen, die wörtlich eingegeben werden sollten; Namen und Schlüsselwörter in Programmen, inklusive Namen von Methoden, Variablen und Klassen; außerdem HTML-Tags und CSS-Regeln. Nichtproportionalschrift fett

Bezeichnet Hervorhebungen in Code-Beispielen Nichtproportionalschrift kursiv

Zeigt an, an welchen Stellen der Text durch Benutzereingaben ersetzt werden soll. Dieses Symbol kennzeichnet einen Tipp, einen Vorschlag oder eine allgemeine Bemerkung.

Dieses Symbol kennzeichnet eine Warnung oder mahnt zur Vorsicht.

Die Verwendung der Codebeispiele Dieses Buch soll Ihnen bei Ihrer Arbeit helfen. Im Allgemeinen dürfen Sie den Code aus diesem Buch in Ihren Programmen und Dokumentationen weiterverwenden. Hierfür brauchen Sie uns nicht um Erlaubnis zu fragen, es sei denn, Sie wollen größere Teile des Codes reproduzieren. Wenn Sie beispielsweise ein Progrmm schreiben, das größere Teile des Codes aus diesem Buch verwendet, ist keine Erlaubnis nötig. Der Verkauf oder die Verteilung einer CD-ROM mit Beispielen aus O’Reilly-Büchern bedarf dagegen einer

Einleitung

|

XXV

Erlaubnis. Das Beantworten einer Frage durch Zitieren einer Stelle dieses Buchs oder des enthaltenen Beispielcodes bedarf keiner Erlaubnis. Wenn Sie dagegen einen größeren Teil des Codes aus diesem Buch für die Dokumentation Ihres Produkts verwenden wollen, ist eine Erlaubnis nötig. Eine Quellenangabe ist erwünscht, aber nicht verpflichtend. Eine Quellenangabe enthält normalerweise die Nennung von Titel, Autor, Verlag und ISBN, zum Beispiel: Das Beste an HTML & CSS von Ben Henick.  O’Reilly Verlag 2010, 978-3-89721-617-4. Wenn Sie sich nicht sicher sind, ob Ihre Verwendung der Codebeispiele einer Erlaubnis bedarf, können Sie unter der E-Mail-Adresse [email protected] Kontakt mit uns aufnehmen.

Danksagungen Wenn ich auf meine Erfahrungen der letzten 15 Jahre als Entwickler von Website zurückblicke, beeindruckt mich am meisten die Unwissenheit. Davon gibt es jede Menge, und wie viele andere Webentwickler nehme ich die Gelegenheit gerne wahr, die Unwissenheit der anderen, weniger talentierten Kollegen zu verurteilen – aber nicht in diesem Buch. Warum nicht? Wesentlich stärker beunruhigt mich jedoch meine eigene Ignoranz, die nicht weniger Kritik verdient. Kurz nach der Ignoranz kommen Angst und Sturheit, die beide gleichermaßen zu dem inneren Dialog beigetragen haben, der mich während des Jahres begleitet hat, in dem ich dieses Buch geschrieben habe. Aus dieser Haltung heraus soll dieses Buch ein Beispiel für die Überzeugung sein, dass es besser ist, eine Kerze anzuzünden, die anderen den Weg weist, als die Dunkelheit zu verfluchen. Auch ich habe mich lange in der Bequemlichkeit veralteter Produktionsmethoden wohlgefühlt. Daher versuche ich dort, wo es um beste Praktiken geht, möglichst vorsichtig vorzugehen, um meine Botschaft nicht zu verwässern. Zusammenfassend habe ich versucht, dieses Buch mit all jenen Empfehlungen zu füllen, die mir vor acht oder neun Jahren sehr geholfen hätten. Stattdessen wurden diese Probleme von vielen Leuten (mich eingeschlossen) oft durch Versuch, Irrtum und Unfall gelöst, und die Informationen, wie man es besser macht, konnten dadurch auch nur scheibchenweise weitergegeben werden. Ich hoffe, dieses Buch ist für Sie so nützlich, wie es mir hätte nützlich sein können, als ich meine HTML- und CSS-Fähigkeiten gerade entwickelte. Es gibt eine Anzahl von Leuten, deren Teilhabe an meinem Leben mich überhaupt erst dazu in die Lage versetzt hat, dieses Buch zu schreiben. Da dies die erste Gelegenheit ist, sie in aller Öffentlichkeit nennen zu können, möchte ich die Gelegenheit nicht verstreichen lassen. Abgesehen von meiner Familie sind dies unter anderem: Christian Cepel, Steven Champeon, Sumin Chou, Teddi Deppner, Nick Finck, David Hemphill, Molly Holzschlag, Brenda Houston, Ethan Marcotte, Doug Petersen, Lance Taylor, Thomas Vander Wal, XXVI

|

Einleitung

Peter Zale und Jeffrey Zeldman. Diese Menschen haben enorm zu meinem Leben beigetragen, und ohne sie alle wäre dieses Buch vermutlich nie geschrieben worden. Viele Leute kommen außerdem direkt in diesem Buch vor. Von diesen Leuten gebührt mein besonderer Dank Chris Mills von Opera Software. Chris stand diesem Projekt immer sehr nahe – schließlich war er es, der mich O’Reilly Media als Autor vorgeschlagen und die Sache ins Rollen gebracht hat, indem er mich einlud, einen Beitrag für das Opera Web Standards Curriculum (http://www.opera.com/company/education/curriculum) zu schreiben. Der Inhalt und die Qualität dieses Buches sind nicht nur meiner Arbeit zu verdanken. Tatsächlich wurde es durch die unermüdliche Geduld meines Lektors bei O’Reilly Media, Simon St. Laurent, vor dem Scheitern bewahrt. Zwar stehen meine Worte in diesem Buch, und auf dem Einband steht mein Name, aber nur die beständige Unterstützung dieses Projekts durch Simon hat die tiefe Schlucht zwischen meinen Anstrengungen und dem erfolgreichen Abschluss überbrückt. Michael Smith ist verantwortlich für die Teile dieses Buches, die sich mit HTML 5 befassen. Die Abwesenheit seines Namens auf dem Einband ist kein wirklicher Dank dafür, dass er mich davor bewahrt hat, durch das sprichwörtliche Minenfeld zu stolpern. Ich hatte das Glück, mir drei technische Gutachter selbst auszusuchen: Kimberley Blessing, Gez Lemon und Chris Van Domelen. Alle drei leisteten äußerst kritische Beiträge zur Genauigkeit und Aktualität dieses Buches. Sollte dennoch etwas fehlen, liegt dies allein in meiner Verantwortung. Kimberly und Chris waren außerdem viele Jahre tapfere Verbündete und Quellen technischer Ratschläge, und ich sehe mich außerstande (wie in so vielen anderen Fällen), ihnen angemessen für ihre Hilfe zu danken. O’Reilly Media war gnädig genug, mir drei weitere technische Gutachter zur Seite zu stellen: Edd Dumbill, Elaine Nelson und Shelley Powers. Ihre Beiträge halfen mir, viele weitere Fehler auszuräumen und die Struktur dieses Buches zu verbessern. Auch wenn ich dieses Buch eines Tages sowieso geschrieben hätte, würden Sie es ohne die herausragende Arbeit von Douglas Crockford jetzt nicht lesen. Er hat bewiesen, dass eine »Das Beste an«/»Good Parts«-Buchreihe begeisterte Leser finden würde. Ich bin der Überzeugung, dass Dinge nur durch die Arbeit der vielen Leute im Hintergrund funktionieren, und dieses Projekt hat diesen Glauben bestätigt. Besonders hohes Lob gebührt Emily Quill, die die Knoten im Manuskript entwirrt und dafür gesorgt hat, dass dieses Buch wirklich sein Geld wert ist. Loranah Dimant hat sich unermüdlich um die Änderungen in letzter Minute gekümmert und sichergestellt, dass das Buch den letzten Schliff bekam. Mein abschließender Dank geht an Eric Meyer, der die Messlatte für uns andere, die wir versuchen, Entwickler weiterzubilden, ziemlich hoch gehängt hat. Abschließend hoffe ich, dass das Wissen, das dieses Buch Ihnen vermittelt, Sie zu Erfolgen führt, die nicht weniger eindrucksvoll sind als die der Menschen, die hier erwähnt sind.

Einleitung

|

XXVII

KAPITEL 1

Hypertext von innen

Eine ordentlich programmierte Website besteht aus weit mehr als der Summe aus Markup, Stylesheets, Scripting und Multimedia-Ressourcen. Gut gebaute Websites reizen die Vorteile des Mediums voll aus. So wird eine einst undurchsichtige Technologie zum zentralen Faktor für die Art, auf die wir heute Informationen aufnehmen: Ohne die leicht zu aktivierenden Links wäre das Web nicht das, was es ist, sondern nur ein starrer Haufen Dokumente. Hypertext ist enorm vielseitig. Das Preis ist, dass Entwickler oft den Besuchern einer Website den Weg weisen müssen. Oft entscheiden sich Besucher selbst innerhalb einer Website für einen unerwarteten Weg, oder sie kommen von Websites oder Bookmarks, über die Sie als Entwickler keine Kontrolle haben. Die Macht, die Ihnen Hypertext verleiht, enthält auch die Verantwortung, Ihre Site so zu strukturieren, dass Ihre Besucher sich darin zurechtfinden und bewegen können.

Das Web ohne Links Durch die Verwendung von Links, um Informationen zu verbinden (das »Verlinken«), unterscheidet sich das Web von anderen, früheren Medien. Heute ist dieser Weg so normal, dass man diese Unterschiede leicht vergisst. Dennoch machen sie es erst möglich, erfolgreiche Websites zu erstellen. Was würde passieren, wenn Sie die Hyperlinks aus einer Website entfernten? • Wenn Sie Hypertext aus einem netzwerkbasierten Informationssystem entfernen, ist das erste und deutlichste Ergebnis, dass der Inhalt strikt linear wird. Der Leser muss sich erst durch eine bestimmte Menge Inhalt arbeiten, bevor er an die tatsächlich interessante Stelle gelangt. Ohne die Links ist das Ergebnis so gut wie nutzlos, es sei denn, die Informationen erhalten eine nachvollziehbare innere Struktur und Ordnung. • Lineare Ressourcen werden basierend auf unterschiedlichen Annahmen angelegt und strukturiert. Es wird erwartet, dass der Leser die vorigen Inhaltsteile zumindest ansatzweise kennt. Nehmen Sie beispielsweise ein Buch. Sie können darin herumblättern, die Kapitel sind aber weiterhin durch die absteigende Bedeutung der behandelten Themen geordnet. Gäbe es beispielsweise keine Website zu diesem Buch, wäre dieses Buch gespickt mit Mengen von Markup-Beispielen.

|

1

• Der Ortssinn des Lesers wird von gängigen Hinweisen geleitet. Die meisten Bücher und andere lineare Informationsressourcen besitzen auf jeder Seite eine der Orientierung dienenden Kopf- oder Fußzeile (oder eine Titelzeile des verwendeten Leseprogramms). Bei einer digitalen Informationsressource (z.B. einem großen PDF-Dokument) lässt sich der Fortschritt des Lesers z.B. anhand eines vertikalen Scrollbalkens ablesen. Diese Betrachtungen zeigen, wie Hyperlinks Dokumenten eine zusätzliche Dimension verleihen. Zwar erhält das Web dadurch eine enorme Flexibilität, gleichzeitig schaffen die neuen Möglichkeiten auch neue Herausforderungen. Die erweiterten Navigationsmöglichkeiten können die Orientierung erschweren. Während der Benutzer einer traditionellen Ressource sich auf die ihm bekannten »Wegweiser« und seinen gesunden Menschenverstand verlassen kann, benötigt der Benutzer von verlinkten Ressourcen für die Orientierung die Hilfe von Designern und Implementierern. Begriffe wie »Anfang« und »Ende« haben bei webbasierten Medien wenig bis keine Bedeutung. Dies ist der wesentliche Unterschied zwischen verlinkten Medien und der Natur linearer Ressourcen, die schon per Definition begrenzt sind.

URIs In einem perfekten System nimmt der Besucher einer Site die URIs gar nicht wahr. In ihrer Zusammensetzung aus einem Protokollbezeichner einem Verweis auf einen bestimmten Host und etwas, das aussieht wie eine Dateisystemreferenz, es aber nicht ist, sind URIs nicht gerade menschenlesbar. Oftmals enden URIs mit Paaren aus Bezeichnern und dazugehörigen Werten, die vor allem computerlesbar und weniger besucherfreundlich angelegt sind. Einfache URIs wie http://www.example.com, die auf eine bestimmte Website verweisen, hat vermutlich jeder schon einmal gesehen. Sie erscheinen in der Werbung und auf Visitenkarten. Die Zeichen http:// stehen inzwischen für: »Geben Sie das Folgende ein, um zu unserer Website zu gelangen.« Darüber hinaus können gut präparierte URIs eine Menge Informationen enthalten. Nehmen Sie bespielsweise die URIs Ihrer Lieblingssuchmaschine oder Nachrichten-Website, und Sie werden feststellen, dass da noch viel mehr passiert. Die URIs für Googles Suchergebnisse zum Beispiel können den Parameter start enthalten, der die Anzahl von Ergebnissen angibt, die eine höhere Wertung (»ranking«) haben als die aktuell angezeigten, z.B. http://www.google.com/?q=hypertext&hl=en&start=10. Auf ähnliche Weise können CMS-(Content-Management-System-)Plattformen und E-Commerce-Kataloge mehrere URIs verwenden, die auf die gleiche Ressource verweisen. Die längeren URIs können die Durchsuchbarkeit der Ressource erhöhen oder angeben, dass zusätzlich zur eigentlichen Ressource weitere Informationen mitgeliefert werden (z.B. bei einer Produktliste oder der Zusammenfassung eines Blogeintrags.) Browser und andere Werkzeuge verwenden das HTTP-Protokoll, um URIs zu verarbeiten und Informationen abzurufen. Details zur Art der Verarbeitung und dazu, wie ihre Funktionen und Beschränkungen sich auf Ihre Seiten auswirken können, finden Sie im Anhang. 2

|

Kapitel 1: Hypertext von innen

Mit Links umgehen Hypertext, wie wir ihn heute kennen, wurde erstmals in den 1960er-Jahren an der Stanford University implementiert. Allerdings brauchte es weitere drei Jahrzehnte, bis kommerzielle Internetzugänge bezahlbar wurden und der Umgang mit Hypertext zum Alltag wurde. Durch die »Explosion« des Internets war es nicht nur möglich, dass Hyperlinks Ressourcen in einem weltumspannenden Netzwerk miteinander verbanden, sondern sie begünstigte auch die Wahrnehmung, dass Hyperlinks im Web einfach und fehlertolerant sein müssten. Wenn jemand einen Link anlegt, wird allgemein erwartet, dass die Person auch weiß, worauf der URI verweist. Das muss nicht heißen, dass diese Person auch kontrolliert, was sich am Ende des Links befindet. Der Erfolg des Webs beruht zu einem großen Teil darauf, dass man einen Link auf beliebige Inhalte anlegen kann, ohne den Autor des Inhalts vorher fragen zu müssen. Hat eine Ressource einen URI, können Sie darauf auch einen Link anlegen. Funktioniert ein URI einmal nicht, wird eine gut gebaute Website eine entsprechende Fehlerseite anzeigen (den berühmten 404-(Datei nicht gefunden-) Fehler, die dem verlorenen Besucher wieder auf den richtigen Weg hilft. Die Stärke und Unmittelbarkeit von Weblinks warf alle möglichen kulturellen (und in manchen Fällen auch rechtlichen) Fragen darüber auf, was es bedeutet, direkt auf das Material anderer verweisen zu können. Im Laufe der Zeit wurde ein anderes und wahrscheinlich viel schwerer zu lösendes Problem immer wichtiger: tote Links. Das Anlegen von Links auf Informationen, die Sie nicht kontrollieren, bedeutet auch, dass diese Links irgendwann nicht mehr funktionieren. Informationen und ganze Websites verändern sich oder verschwinden sogar ganz. Das hat zur Folge, dass Besucher Ihrer Website möglicherweise verwirrt oder frustriert sind, weil sie das Gesuchte nicht sofort finden. Teilweise lassen sich tote Links nicht vermeiden. Selbst für automatisierte Systeme (z.B. Suchmaschinen) ist es schwer, aktuell zu bleiben. Und sogar dann, wenn die Links auch weiterhin auf nützliche Seiten verweisen, können sich diese im Laufe der Zeit in etwas vollkommen Anderes verwandeln. Innerhalb Ihrer eigenen Sites haben Sie schon deutlich mehr Kontrolle über diese Problematik, aber auch hier kann ein größeres Redesign schwere Probleme aufwerfen. Vorsicht, sauber erstellte Fehlerseiten und eine klare Navigation können bei der Minimierung dieser Probleme helfen. Mit normalen Links, die einen an den falschen Ort schicken, können Benutzer meist noch umgehen. Wenn den Seiten aber plötzlich Grafiken, Code, Stylesheets oder andere Bestandteile fehlen, die über korrekte hrefoder src-Werte eingefügt werden, wird die Sache schon schwieriger. Je wichtiger die Bestandteile für Ihre Seite sind, desto eher wollen Sie diese von einem Ort aus einbinden, der unter Ihrer Kontrolle steht.

Den Anwenderkomfort durch Links verbessern Links sind der Teil von HTML, über den URIs innerhalb der Applikationsschicht des Webs am zugänglichsten sind. Sie sind der Kreuzungspunkt von HTML und HTTP. Auf URIs

|

3

der Anwendungsebene ist es der Unterschied zwischen dem Klicken auf einen Link und dessen Eingabe in die Adressleiste eines Browsers. Links bieten dem Ersteller einer Website unendliche Möglichkeiten – Möglichkeiten, die oft übergangen werden. Alles lässt sich mit allem verbinden. Hyperlinks in Dokumenten sind nicht auf die Navigation innerhalb der Website, Referenzen auf Stylesheets oder die Syndizierung von Inhalten beschränkt. Sie können außerdem auf eine unbegrenzte Zahl verwandter Dokumente und alle möglichen alternativen Inhalte verweisen. Hyperlinks, die auf Benutzereingaben reagieren, können an beliebiger Stelle platziert werden, auf beliebige Dinge verweisen und bestimmte Aktionen auslösen, die allein durch die Grenzen der Plattform, gesunden Menschenverstand und die Vorstellungskraft der Person beschränkt sind, die die Website erstellt. Gut implementierter Hypertext bereichert die Inhalte um die folgenden Dinge (nebenvielen anderen): Erweiterte Zugänglichkeit und Kontrolle der Informationen Hyperlinks können prinzipiell auf alle Teile des Webs verweisen, die keiner Zugangskontrolle unterliegen. Sie ermöglichen es den Benutzern, selbst zu entscheiden, wie sie auf welche Informationsressourcen zugreifen. Das Erschaffen mehrerer Erzählstränge aus dem gleichen Inhalt Hyperlinks machen es möglich, dass die »Reise« eines Besuchers sich innerhalb eines angemessenen Rahmens weitestmöglich seinen Wünschen anpasst. Die Gemeinschaft bestimmt, was wichtig ist Eingehende Hyperlinks verleihen dem Linkziel Glaubwürdigkeit, die auch ohne Fachleute funktioniert. Diese Tatsache definiert bereits eine Reihe von Systemen, die schon im Einsatz sind. Hierzu gehört insbesondere Googles PageRank-Algorithmus. Zwar kann es sein, dass die »Weisheit der Massen« nicht immer korrekt ist, aber die Genauigkeit verbessert sich im Laufe der Zeit, da Fachleute für ein bestimmtes Thema eng in den Prozess einbezogen sind.

Herausforderungen bei der Implementierung von Hypertext Die Webtechnologie ermöglicht es Benutzern, ihre Erfahrungen auf eine Art selbst zu steuern, die vor 1992 noch als Science Fiction abgetan wurde. Keine einzelne Person oder Instanz hat uneingeschränkte Kontrolle über die Art, wie ein Benutzer das Web erlebt (obwohl auch das durchaus versucht wird). In einer einzigen Sitzung kann ein Benutzer mit einem beliebigen Grad an Interaktion Inhalte von diversen Autoren oder Themenbereichen anfordern, die nichts oder nur wenig miteinander zu tun haben. Diese scheinbare Anarchie schafft neue Herausforderungen für die Entwickler und Autoren von Websites: 1. Abgesehen vom eigentlichen Inhalt gehört Kontext (ständige Signale, die sagen »Sie sind hier« oder »das finden Sie dort«) zu den wichtigsten Teilen einer effektiven Site. 2. Wenn Sie Ihre Annahmen über die Ziele und das Wissen der Benutzer nicht überprüfen, steuern Sie geradewegs auf eine Katastrophe zu. 4

|

Kapitel 1: Hypertext von innen

3. Die Verdoppelung von Inhalt erzeugt unnötige Belastungen beim Anwenderkomfort (und bei der Erstellung der Site). 4. Der Mangel an Grenzen, verlässlichen Annahmen und Kontext kann im Web zu unvorhersehbaren Beeinträchtigungen der Benutzerfreundlichkeit (Usability) führen. Oftmals ist es absolut notwendig, auf diese Schwierigkeiten einzugehen. Die enorme Offenheit des Webs erfordert Spezialwissen zur Informationsarchitektur und Benutzbarkeit des Webs. Da das Web fast schon wörtlich mit linearen Strukturen bricht, dürfen Web-Entwickler und -Autoren niemals vergessen, dass ihre Arbeit vor allen Dingen Zusammenhänge schafft und definiert.

URIs

|

5

KAPITEL 2

Mit HTML-Markup arbeiten

Das Wichtigste bei der Erstellung einer Website ist das Anlegen von Links. Darüber hinaus bietet die Hypertext Markup Language (HTML) aber noch viele weitere Funktionen und Möglichkeiten. HTML-Dokumente beschreiben den Hypertext und enthalten einen Großteil der Inhalte, die Besucher der Website zu sehen bekommen. Gleichzeitig enthalten die Dokumente die nötigen Links auf weitere Ressourcen, wie Präsentationsanweisungen, Skripte, Bilder, Video, Ton und so weiter. Sie werden sehen, dass es bei der Arbeit mit HTML oft darum geht, zu entscheiden, wann es besser ist, andere Technologien (oder Leute) für sich arbeiten zu lassen. HTML, wie auch die dazugehörige Software (z.B. Browser oder webzentrierte Entwicklungsumgebungen), wird seit seiner Erfindung 1992 beständig weiterentwickelt. In den mittlerweile fast 20 Jahren, die es HTML inzwischen gibt, hat sich eine Reihe von bewährten Vorgehensweisen (Best Practices) für das HTML-Markup und für dessen Einsatzgebiete herausgebildet. Eine klare HTML-Syntax ermöglicht die Erstellung eines verlässlichen Dokumentenbaumes für Ihre Inhalte und die Unterstützung zusätzlicher Schichten für Stile und Verhalten. Kapitel 5 beschäftigt sich mit den Funktionen und Möglichkeiten von CSS für die Interaktion mit dem Dokumentenbaum.

HTML-Syntax HTML und dessen striktere Variante XHTML definieren eine Reihe von Regeln, mit denen bestimmte Dokumententeile gekennzeichnet werden können. Hierzu gehören auch Regeln, die festlegen, wie diese Markierungen (das Markup) strukturiert werden. HTML-Parser (aber nicht XHTML-Parser) folgen hierbei der als »Postels Gesetz« bekannten Regel: »Be conservative in what you do, be liberal in what you accept from others.«

Während der Autor eines Dokuments bei der Verwendung von XHTML sehr präzise vorgehen muss, vergeben HTML-Parser deutlich mehr Fehler, reparieren Weggelassenes und entfernen überflüssige Markup-Elemente. Hierdurch wird erreicht, dass das Dokument für den Benutzer »funktioniert«, allerdings nicht immer mit der ursprünglich vom Gestalter gewünschten Struktur. (In HTML 5 gibt es für dieses Verhalten klare Definitionen. In der Vergangenheit variierte es von Browser zu Browser.)

|

7

Tags, Elemente und Attribute HTML definiert eine Reihe von Elementen, die bestimmten semantischen Bereichen zuzuordnen sind. Die Namen der Elemente sind entweder an bestimmte englische Begriffe angelehnt oder entsprechen diesen. Elemente definieren die Struktur des Dokuments und legen das Fundament für dessen Präsentation und Manipulation. Jedes Element eines Dokuments wird durch ein oder zwei Tags gekennzeichnet. Tags sind von spitzen Klammern (< und >) umgebene Marken, die den Namen des verwendeten Elements enthalten. Öffnende Tags beginnen mit einer öffnenden spitzen Klammer (). Schließende Tags enthalten nur den Namen des Elements, dem ein Schrägstrich vorangestellt wird. Elemente ohne eigene schließende Tags werden unterschiedlich behandelt: • Bei HTML-Elementen mit optionalem schließenden Tag darf dieses weggelassen werden. Dies ist besonders bei den Elementen li (Listeneintrag) und p (Absatz) der Fall. • HTML-Elemente, bei denen schließende Tags nicht erlaubt sind, unterscheiden sich nicht von öffnenden Tags anderer Elemente. • Bei der Verwendung von XHTML sind schließende Tags entweder zwingend vorgeschrieben oder zwingend verboten. Der Begriff »optional« kommt in XHTML nur selten vor. • Tags, die XHTML-Elemente ohne schließendes Tag kennzeichnen, müssen mit der Zeichenfolge /> abgeschlossen werden. Üblicherweise wird dem Schrägstrich ein Leerzeichen vorangestellt, um die Kompatibilität mit älteren Browsern sicherzustellen. Tags können beliebig viele Whitespace-Zeichen (Leerzeichen, Tabulatoren etc.) enthalten; Attribute können im öffnenden Tag in beliebiger Reihenfolge angegeben werden. Sämtliche Elemente können durch die Verwendung bestimmter Attribute modifiziert werden, auf die i.d.R. ein oder mehrere Werte folgen (z.B.: id="nav"). Bei der Verwendung von einfachem HTML wird nicht zwischen Groß- und Kleinschreibung unterschieden, während in XHTML die Namen von Elementen und Attributen prinzipiell kleingeschrieben werden müssen. Da XHTML ein XML-Dialekt ist, gibt es hier zwei zusätzliche Regeln: • Bei XHTML wird weitestgehend zwischen Groß- und Kleinschreibung unterschieden, was bei der Verwendung von Werten eine Rolle spielt, während HTML diesen Unterschied nur bei der Verwendung der Attribute class und id vorschreibt. • Wird in XHTML ein Attribut verwendet, muss dieses einen Wert besitzen. Während in HTML auch Attribute ohne Wert erlaubt sind, wird in XHTML üblicherweise der Name des Attributs im Wert wiederholt (z.B. checked="checked" anstelle von checked). Beispiel 2-1 zeigt einige in XHTML 1.0 gültige Markup-Formen.

8

|

Kapitel 2: Mit HTML-Markup arbeiten

Beispiel 2-1: XHTML 1.0-Codeschnipsel AcmeStore.com

Die erste Zeile von Beispiel 2-1 enthält drei Elemente, die ähnlich wie bei einer Matrjoschka-Puppe ineinander verschachtelt sind. Hierbei ist zu beachten, dass die Tags in umgekehrter Reihenfolge geschlossen werden müssen, wie Abbildung 2-1 zeigt. Wird diese Regel nicht beachtet, kann es leicht zu Pannen kommen.

Literale HTML-Tags werden genauso ineinander verschachtelt wie Matrjoschka-Puppen. Bei der Struktur …

…

…

werden die schließenden Tags in umgekehrter Reihenfolge der Einfügung Ihrer öffnenden Entsprechungen eingefügt.

Abbildung 2-1: Korrekt strukturierte HTML-Tags werden wie russische Matrjoschka-Puppen ineinander verschachtelt.

Beispiel 2-1 behandelt die Attributwerte ebenfalls gemäß den XHTML-Regeln. XHTMLWerte werden prinzipiell mit Anführungszeichen umgeben. Für HTML-Werte gibt es eine andere Regel: In bestimmten Fällen können Autoren Attributwerte ohne Anführungszeichen angeben. Diese Werte dürfen nur Buchstaben (a–z und A–Z), Ziffern (0–9), Bindestriche (ASCII Dezimal 45), Punkte (ASCII Dezimal 46), Unterstriche (ASCII Dezimal 95) und Doppelpunkte (ASCII Dezimal 58) enthalten. Wir empfehlen dringend die Verwendung von Anführungszeichen, auch wenn dies nicht zwingend vorgeschrieben ist. HTML 4.01 Specification, World Wide Web Consortium

Zeichenreferenzen innerhalb von Attributwerten werden im Abschnitt »Zeichen-Entities zur Definition von Nicht-ASCII-Zeichen« auf Seite 232 und im Kasten »URL-Kodierung im Detail: ASCII-Entities« auf Seite 255 besprochen.

HTML-Syntax

|

9

Seitenstruktur Hält der Browser Teile des Inhalts für HTML-Code, versucht er, diese anhand des enthaltenen Markups darzustellen. Selbst wenn das Dokument unvollständig oder seltsam strukturiert ist oder auf andere Weise nicht den Standards entspricht, kann ein Browser meist etwas darstellen, was der Absicht des Autors oft ziemlich nahe kommt. Damit ein Dokument gültig oder valide ist, muss es jedoch eine Reihe von korrekt strukturierten Elementen und die dazu passenden Inhalte enthalten. Ein gültiges HTMLDokument enthält die folgenden Teile in der hier angegebenen Reihenfolge: 1. die Dokumenttyp-Deklaration 2. genau ein html-Element, das alle anderen Elemente im Dokument umgibt 3. innerhalb des html-Elements genau ein head-Element 4. innerhalb des head-Elements genau ein title-Element sowie ggf. benötigte link-, script-, base- und meta-Elemente 5. innerhalb des html-Elements und nach dem head-Element das body-Element des Dokuments. Dieses enthält (bzw. verweist auf) sämtliche Teile der Seite, die der Besucher angezeigt bekommt. 6. innerhalb des body-Elements mindestens ein Block-Element (z.B. p oder div)

Darstellungsmodi, Varianten von HTML und Dokumenttyp-Deklarationen Als ich dieses Buches schrieb, hatte sich HTML über einen Zeitraum von mehr als 17 Jahren beständig weiterentwickelt. Inzwischen gibt es fünf verschiedene Versionen, von denen die aktuellste, HTML 5, zwar immer beliebter wird, aber noch nicht vollständig ist. Das World Wide Web Consortium (W3C) hat außerdem eine Empfehlung für XHTML, die XML-kompatible Variante von HTML 4.01, veröffentlicht. Auch wenn es noch zu früh ist, die guten Seiten von HTML 5 zu benennen, werden wir in diesem Buch auf neue HTML 5-Funktionen eingehen, sofern sie die bewährten Vorgehensweisen beeinflussen.

Seit der Version 1.0 enthielt HTML eine sogenannte Dokumenttyp-Deklaration, die ganz am Anfang des Dokuments eingefügt wird. Hiermit wird angegeben, welche HTML-Version das Benutzerprogramm für die Darstellung des Dokuments verwenden soll. Bis 2001 wurde diese Angabe jedoch weitgehend ignoriert. Die Dokumenttyp-Deklaration für HTML 4.01 Strict sieht beispielsweise so aus:

Den größten Einfluss haben Dokumenttyp-Deklarationen darauf, wie die einzelnen Elemente dargestellt werden. Verschiedene DOCTYPEs sorgen für die Aktivierung unter10

|

Kapitel 2: Mit HTML-Markup arbeiten

schiedlicher Darstellungsmodi. (Sie definieren auch, welche Erwartungen HTML-Validatorprogramme an die Elemente stellen.) Vermutlich kennen Sie »DTD« als Akronym für den Begriff »Document Type Definition«. Die DTD ist eine maschinenlesbare Definition, auf die mit der DOCTYPE-Deklaration verwiesen wird. Deklaration und Definition sind also vollkommen unterschiedliche Dinge. Die Deklaration verweist auf die Definition, und nur die Definition wird als DTD bezeichnet. Auf der Website zu diesem Buch (http://www.htmlcssgoodparts.net) werden die Feinheiten von DTD und DOCTYPE-Deklaration genauer untersucht.

HTML oder XHTML? Die gegenwärtig am häufigsten verwendeten Geschmacksrichtungen von HTML sind zwei Varianten von HTML 4.01. Während die eine Variante der traditionellen HTML-Syntax folgt, wurden für XHTML Teile der Syntax neu definiert, um den strikteren Anforderungen von XML zu entsprechen. Wenn XHTML mit dem richtigen MIME-Typ (siehe Tabelle A-1 im Anhang) übergeben wird, wird es auch gemäß den XML-Regeln geparst. Die Regeln von »normalem« HTML sind etwas lockerer gefasst. So dürfen schließende Tags weggelassen werden, und es wird kaum zwischen Groß- und Kleinschreibung unterschieden. Bei XHTML müssen dagegen alle Elemente korrekt mit einem schließenden Tag bzw. /> beendet werden und müssen komplett in Kleinbuchstaben geschrieben sein. XHTML hat einen großen Nachteil: Der vorgeschriebene MIME-Typ wird vom Internet Explorer nicht unterstützt. Eine detaillierte Betrachtung dieses Problems finden Sie in Kapitel 14. Dennoch bietet sorgfältig formatiertes XHTML (oder HTML, das den Vorschriften von XHTML entsprechend geschrieben wurde) einen noch größeren Vorteil, der zur Auswahl der Markup-Beispiele dieses Buches und den dazugehörigen externen Ressourcen geführt hat. Da die für XHTML nötige Syntax strenger ist, sind XHTML-Quellcode-Fragmente deutlich leichter lesbar als ihre HTML-Entsprechungen, und die Regeln für gültiges XHTML weniger verwirrend. HTML 5 enthält Unterstützung für eine XML-Schreibweise, macht dieses aber nicht zur Pflicht.

Strict, Transitional oder Frameset? Im Laufe der Entwicklung von HTML wurden einige Elemente verworfen (»deprecated«). Das heißt, sie gelten als veraltet und ihre Verwendung wird offiziell nicht mehr unterstützt. Gleichzeitig wurde die Definition mancher Elemente verändert: Sie müssen innerhalb bestimmter anderer Elemente stehen oder bestimmte andere Elemente enthalten.

Darstellungsmodi, Varianten von HTML und Dokumenttyp-Deklarationen

|

11

Kurz gesagt besteht der Hauptunterschied zwischen den HTML-Varianten Strict, Transitional und Frameset in der Definition, was erlaubt ist und wie strikt es umgesetzt wird. Die Strict-Versionen besitzen die strengsten Anforderungen an die Inhalte oder Behälter bestimmter Elemente und haben nur eine geringe Toleranz gegenüber der Verwendung veralteter Elemente. Die Variante Frameset ist für ein bestimmtes Szenario zuständig: für Dokumente, die eine Reihe von frame-Elementen definieren. Eine detaillierte Abhandlung von Framesets und Frames finden Sie in Kapitel 14. Abschließend sollten Sie bedenken, dass iframe-Elemente trotz ihres Namens nicht zum Dokumenttyp Frameset gehören, sondern zu Transitional. HTML 5 entspricht im Prinzip dem Typ HTML 4.01 Strict, der um neue HTML 5-Funktionen und -Fähigkeiten erweitert wurde.

In CSS 3 können diese Definitionen durch die Eigenschaft box-sizing unabhängig vom Dokumenttyp vorgenommen werden. Diese besitzt zwei mögliche Werte: content-box oder border-box. Das zu diesen Werten gehörige Darstellungsverhalten wird detailliert in Kapitel 6 behandelt.

Die Geschichte der zwei Boxmodelle Aktuelle Browser verwenden DOCTYPE-Deklarationen als eine Art »Schalter«, um festzustellen, nach welchem Boxmodell die Maße für die Darstellung berechnet werden. Die Größe einer in HTML definierten Elementbox kann durch verschiedene CSS-Eigenschaften verändert werden. Hiermit können verschiedene Eigenschaften, wie der Inhaltsbereich selbst, Abstände (padding etc.), Rahmen (border) usw., unabhängig voneinander gesteuert werden. Ältere Browser berechnen deren Größe substraktiv: Innenabstände und Rahmen werden hierbei dem Inhaltsbereich zugerechnet. Außenabstände werden, was die enthaltenen Elemente angeht, ebenfalls unterschiedlich behandelt. Gemäß der CSS 2.1-Spezifikation müssen die Berechnungen für den Inaltsbereich jedoch additiv vorgenommen werden. Das heißt, Innenabstände, Rahmen und Außenabstände werden separat von der Größe des Inhaltsbereichs berechnet. Natürlich ist das Web noch immer voll mit Layouts, die nach der älteren Layoutmethode gestaltet wurden. Mithilfe der DOCTYPE-Deklaration kann der Autor einer Seite ausdrücklich festlegen, nach welchem Layoutmodell die Blockelemente der Seite dargestellt werden sollen. Manche Deklarationen sorgen dafür, dass die Rendering-Engines sich an die Regeln der CSS 2.1-Spezifikation halten, während andere Deklarationen dafür sorgen, dass die Seiten nach der älteren Methode (dem sogenannten Quirks Mode) dargestellt werden. Ohne Angabe eines DOCTYPEs wird standardmäßig das alte Boxmodell verwendet.

12

|

Kapitel 2: Mit HTML-Markup arbeiten

Sofern die Unterscheidung wichtig ist, wird in den Quellcode-Beispielen dieses Buches das Boxmodell gemäß der CSS 2.1-Spezifikation verwendet. Eine ausführliche Liste möglicher DOCTYPEs und der verschiedenen Browser-Darstellungsmodi finden Sie unter http://hsivonen.iki.fi/doctype/.

Der richtige Dokumenttyp für Ihr Projekt In den Händen erfahrener Entwickler ist die Wahl des richtigen Dokumenttyps eine Frage persönlicher Vorlieben. Ich verwende prinzipiell XHTML 1.0 Transitional für neue Projekte und komplett neu aufgebaute Redesigns. Dank der Beständigkeit der XML-Regeln erscheint mir das resultierende Markup während der Produktions- und Qualitätssicherungsphase eines Projekts wesentlich leichter verständlich. Allerdings sind meine Bedürfnisse nicht die gleichen wie Ihre. Um die wichtigsten Anforderungen für Ihr Projekt herauszufinden, sollten Sie sich vor der Wahl eines Dokumenttyps die folgenden Fragen stellen: Welche »Geschmacksrichtung« von HTML verwendet der Auftraggeber aktuell in seinen anderen Online-Präsenzen? Allgemein ist es am besten, sich an die Konventionen bereits aktiver Seiten zu halten. Erwartet irgendjemand, dass die Inhalte in einem Datenspeicher abgelegt werden, der von verschiedenen Systemen aus zugänglich sein soll? In diesem Fall ist XHTML eine deutlich bessere Wahl, da Portabilität eine der größten Stärken von XML ist. Wie wahrscheinlich ist es, dass Ihre Arbeitsergebnisse anhand von Informationsalgorithmen wie Suchen-und-Ersetzen-Funktionen verarbeitet werden? Informationsalgorithmen funktionieren besser, wenn Dokumententypen des Typs Strict verwendet werden. Bleibt noch die Frage, wie Sie Ihre Werkzeuge benutzen. Werkzeuge, die Ihnen vertraut sind, sollten Sie nur austauschen, wenn es keine andere Möglichkeit gibt.

Die schönen Seiten: universelle Attribute Sie werden feststellen, dass die Attribute class und id in diesem Buch recht häufig verwendet werden. Dies sind sogenannte universelle Attribute, die mit beliebigen HTMLElementen verwendet werden können, selbst mit dem Element body. Neben class und id gibt es noch vier weitere Attribute, die ähnlich oft vorkommen: • title • lang/xml:lang

Die schönen Seiten: universelle Attribute

|

13

• dir • style dir legt die Schreibrichtung fest, style wird in Kapitel 14 behandelt.

Stylesheet-Anweisungen per »class« und »id« einbinden Zwei Attribute, die Sie mit fast allen Elementen verwenden können, sind class und id. Hierbei können einem Element mehrere Werte für class zugewiesen werden, während für id nur ein Wert möglich ist. Mehrere Werte für class werden durch Leerzeichen getrennt, z.B. class="alternativ Handlungsaufforderung". Gültige Werte für class und id dürfen nur Buchstaben, Zahlen, Bindestriche und Unterstriche enthalten. Die Werte sollten ausschließlich mit Buchstaben oder Zahlen beginnen. In Internet Explorer 6 ist es allerdings möglich, auch Werte zu verwenden, die mit einem Unterstrich beginnen – ein Versehen, das es Stylisten ermöglicht, für diesen Browser spezielle Anweisungen zu formulieren. Wichtiger noch ist allerdings die Frage, wo class- und wo id-Attribute verwendet werden. Als Faustregel kann man sich merken: class-Attribute sollten für häufig vorkommende Elemente benutzt werden, die sowohl im Design als auch in der Präsentation gemeinsamen Zwecken dienen, deren Verwendung aber nicht vorhersehbar ist. Auf vielen Websites wird das class-Attribut auch für body-Elemente von thematisch verwandten Seiten verwendet, wie etwa für die Seiten »Über uns« und »Kontakt«. Auch die Struktur eines Gestaltungstemplates für eine Website kann Aufschluss darüber geben, wo und wie class und id eingesetzt werden sollten. In den von mir erstellten Website-Templates verwende ich so gut wie immer die folgenden ids: • hauptteil • kopfteil • hauptnavigation • haupttext • seitenleiste • fussteil • unternavigation Wenn Sie sich die Liste ansehen, werden Sie feststellen, dass es keine Werte gibt, die sich auf bestimmte Positionen innerhalb der Seite oder der Website (z.B. linke oder rechte Spalte), Farben oder Größen beziehen. Auf ähnliche Weise werden die Werte für classAttribute ausgewählt: Werte, die sich auf bestimmte Abschnitte oder Zwecke (z.B. fehlermeldung) beziehen, kommen regelmäßig vor, während Verweise auf absolute Größen oder Farben nicht verwendet werden. Die einzige »Ausnahme« von dieser Regel finden Sie bei der Gestaltung von Formularen, wo minimal subjektive class-Werte wie kurz, mittel oder lang häufig auftauchen, um Paare aus Beschriftung und Formularfeld nicht einzeln mit Stilen versehen zu müssen.

14

|

Kapitel 2: Mit HTML-Markup arbeiten

Inhalt beschreiben mit »title« und »lang« Neben id und class wurden in HTML 4.x und XHTML 1.x zwei weitere universelle Attribute eingeführt, mit denen Metadaten über die Sprache und die Inhalte bestimmter Elemente angegeben werden können. Hierbei kommt das Attribut title deutlich häufiger zum Einsatz. Sein Wert ist eine beliebige Zeichenfolge, die den Inhalt des Elements kurz beschreibt. Es kann aber auch dafür verwendet werden, den Inhalt eines Linkziels zu beschreiben, eine Technik, die häufig bei Wikipedia verwendet wird. Außerdem können Browser die Werte für das title-Attribut auch zurückstellen und als Metadaten für das Dokument darstellen. Richtig implementiert, können title-Werte den Benutzern eine enorme Hilfe sein, wenn nadelgroße Informationen in heuhaufengroßen Informationssammlungen gefunden werden sollen. Das Attribut title ist vergleichbar mit dem alt-Attribut für Bilder. Der Hauptunterschied ist, dass alt als Alternative für ein nicht darstellbares Bild verwendet wird, während title eine Beschreibung des Inhalts ist und nicht dessen Ersatz. In aktuellen Browsern wird der Attributwert von title in Form eines Tool Tip dargestellt, wenn sich der Mauszeiger über dem dazugehörigen Element befindet, wie in Abbildung 2-2 gezeigt. Sind die Tool Tips zu lang, werden sie von manchen Browsern nicht vollständig angezeigt. An welcher Stelle der Text abgeschnitten wird, hängt vom verwendeten Browser ab.

Abbildung 2-2: Ein mit dem »title«-Attribut erzeugter Tool Tip in Firefox (Mac)

Das Attribut lang würdigt die Tatsache, dass das Web tatsächlich »World Wide« ist. Ähnlich wie title kann es verwendet werden, um zusätzliche Informationen zum Inhalt eines Elements oder zum Ziel eines Links bereitzustellen. Das Attribut lang macht das Gleiche für fremdsprachliche Inhalte. Wenn Sie das Attribut lang verwenden, sind Sie äußerst höflich, da es Besuchern beim Verständnis fremdsprachiger Inhalte hilft, selbst wenn die genaue Bedeutung der Inhalte nicht bekannt ist. Außerdem benötigen Bildschirmleseprogramme akkurate lang-Attribute oder einen Content-Language-Header, um fremdsprachige Inhalte richtig »auszusprechen«. Als Gegenstück zu lang gibt es noch das Attribut hreflang. Es wird verwendet, um anzuzeigen, dass die Ressource, auf die ein Link verweist, in einer anderen Sprache verfasst ist als das aktuelle Dokument.

Die schönen Seiten: universelle Attribute

|

15

Wenn XHTML mit dem MIME-Typ application/xhtml+xml MIME an den Browser übergeben wird, muss anstelle von lang das Attribut xml:lang verwendet werden. Werden lang oder xml:lang verwendet, um den Inhalt eines ganzen Dokuments zu beschreiben, sollte das Attribut nicht dem html-Element, sondern dem body-Element zugewiesen werden.

Der Wert für das lang-Attribut (und den HTTP-Response-Header Content-Language) wird aus einer Liste verschiedener Landeskürzel nach ISO-Standard ausgewählt und gemäß den Regeln der IETF (Internet Engineering Task Force, eine Organisation, die sich mit der technischen Weiterentwicklung und Verbesserung des Internets befasst) strukturiert. Weitere Informationen über die effektive Verwendung des title-Attributs in Links finden Sie in Kapitel 8 im Abschnitt »Effektiver Inhalt für Links und Werte für das ›title‹-Attribut« auf Seite 139. Gängige Werte für lang finden Sie in Tabelle 2-1. Tabelle 2-1: Häufig für das Attribut »lang« bzw. den Content-Language-Header verwendete Werte Sprache

Wert für lang/Content-Language

Englisch

en

Englisch (amerikanisch)

en-US

Englisch (britisch)

en-GB

Chinesisch (vereinfacht)

zh-Hans

Chinesisch (traditionell)

zh-Hant

Chinesich (taiwanesisch, keine Schreibweise angegeben)

zh-TW

Spanisch

es

Japanisch

ja

Französisch

fr

Portugiesisch

pt

Portugiesisch (brasilianisch)

pt-BR

Deutsch

de

Arabisch

ar

Russisch

ru

Koreanisch

ko

Das Attribut »contenteditable« in HTML 5 Die Spezifikation von HTML 5 erweitert HTML um einige neue universelle Attribute, u.a. contenteditable. Dieses Attribut wird bereits von den meisten modernen Browsern unterstützt und soll bei der Erstellung von Text/WYSIWYG-Editoren im Browserfenster helfen. Diese Art von Bearbeitungsmöglichkeit finden Sie beispielsweise in Online-Werkzeugen zur Erstellung von Blog-Artikeln.

16

|

Kapitel 2: Mit HTML-Markup arbeiten

Das Attribut contenteditable ermöglicht dem Autor, die Inhalte bestimmter Elemente als »editierbar« zu kennzeichnen. Innerhalb dieser editierbaren Bereiche soll es Benutzern z.B. möglich sein, Textteile auszuwählen, per Kopieren und Einfügen (auch per Drag and Drop) zu verändern, zu verschieben oder zu löschen, eine Zeichenformatierung (fett, kursiv, bestimmte Farben etc.) anzugeben oder sogar Hyperlinks anzulegen. Damit der Browser die zur Bearbeitung nötigen Werkzeuge bereitstellt, reicht es allerdings nicht aus, ein Element mit dem Attribut contenteditable zu versehen. Immerhin sollte es möglich sein, bestimmte Aktionen durchzuführen, für die es gängige Tastaturkürzel gibt (z.B. Ctrl-X zum Ausschneiden oder Ctrl-B und Ctrl-I für »fett« bzw. »kursiv«). Manche Browser stellen sogar ein Kontextmenü mit Funktionen zur Textbearbeitung bereit, das Sie durch einen Rechtsklick in den mit contenteditable markieren Bereich öffnen können. Hierdurch stehen möglicherweise weitere Funktionen zur Zeichenformatierung bereit, für die es keine üblichen Tastaturkürzel gibt, etwa das Ändern von Schriftgröße oder -farbe des ausgewählten Textes. Möglicherweise folgen andere Browser diesem Beispiel (z.B. um Hyperlinks einzufügen). Benötigen Sie eine einheitliche Benutzerschnittstelle für contenteditable-Bereiche, kommen Sie nicht umhin, etwas in JavaScript zu programmieren. So kann leicht ein Button definiert werden, um ausgewählten Text fettgedruckt darzustellen (anstatt Besucher zur Verwendung eines Tastaturkürzels zu zwingen). Damit das funktioniert, müssen Sie per JavaScript eine Verbindung zwischen Ihrem Button und der auszuführenden Aktion schaffen. (Die HTML 5-Spezifikation definiert eine Reihe von APIs, über die ein Scripting zusammen mit contenteditable realisiert werden kann. Allerdings fehlt in diesem Buch der Platz, um näher darauf einzugehen.) Eine weitere Einschränkung von contenteditable besteht darin, dass es dem Benutzer, für sich genommen, keine Möglichkeit gibt, die veränderten Inhalte auch zu sichern. Diese Aufgabe wird ebenfalls dem Autor überlassen.

Die Trennung von Inhalt, Strukur, Präsentation und Verhalten Stellen Sie sich ein Wohnhaus vor. Die einfachste Struktur dieser Art soll eine beliebige Zeit halten. Sie besitzt demnach ein stabiles Fundament, Außenmauern und einen Dachstuhl. Auf der Clientseite werden Mauern, Fundament und Dachstuhl von der strukturellen Schicht gebildet, sprich: vom Markup. Es definiert die allgemeine Form einer Website. Wenn Sie anfangen, Ihr Haus auszubauen, können Sie Dinge hinzufügen wie Dachziegel, Innenwände, vielleicht sogar einen Wintergarten. Dies entspricht der Präsentationsschicht Ihrer Website, die komplett mit CSS realisiert wird. Ist der Dachstuhl nicht stabil gebaut, fallen Ihnen beim nächsten Sturm die Ziegel auf den Kopf. Auf die gleiche Weise ist es schwierig, CSS zu verwenden, wenn das Markup nicht vernünftig strukturiert ist.

Die Trennung von Inhalt, Strukur, Präsentation und Verhalten

|

17

Ein gutes Haus besitzt außerdem Dinge wie Heizung, Türen, Fenster, Elektrizität und ein Abwassersystem. Oft sorgen diese Dinge dafür, dass man sich in seinem Haus erst richtig wohlfühlt. So ähnlich ist das mit der Verhaltensschicht Ihrer Website. Dieser Teil reagiert am direktesten auf das Benutzerverhalten. Ohne die übrigen Teile der Architektur und die technischen Einrichtungen wird die Verhaltensschicht jedoch nicht sonderlich effektiv sein. Und was ist mit dem Inhalt? Ein Haus ist dafür gedacht, Menschen und ihrem Besitz Schutz zu bieten. Analog dazu soll eine Website das ideale Behältnis für jede Menge Inhalte sein. Jede HTML-Seite enthält eine Markup-Struktur, die bestimmte Inhalte umgibt.

Die Trennung in der Praxis Arbeitet ein Entwickler nach diesen Prinzipien, sind die Schichten der Clientseite äußerst unabhängig von den Details der übrigen Schichten. Diese Unabhängigkeit wird zwar niemals vollständig sein; bestenfalls ermöglicht diese Trennung aber die Wiederverwendung bereits bestehender Ressourcen. In jedem Fall geht das Prinzip der Trennung von den folgenden Abhängigkeiten aus: 1. Ohne eine effektive Präsentation verliert das Verhalten einer Website ihren Biss. 2. Die Präsentation einer Site hängt direkt von der Qualität der darunterliegenden Struktur ab. 3. Ohne sorgfältig zusammengestellte Inhalte können Sie auch keine solide Struktur für die Website erstellen. Jedenfalls ist es relativ einfach, einen Grad an »Schichtenunabhängigkeit« zu erreichen, der die Auswirkungen von Veränderungen möglichst gering hält. Wenn Sie also eine CSS-Klasse definieren, die einem Element nur zugewiesen wird, wenn ein Benutzer mit diesem interagiert, können Sie unbegrenzt viele Veränderungen an der Präsentation eines Elements vornehmen, ohne hierfür das JavaScript verändern zu müssen, das sein Verhalten definiert. Anders herum können Sie beliebige Änderungen am Stylesheet vornehmen und die Präsentation einer Site vollkommen umkrempeln, ohne hierfür die Struktur oder den Inhalt anfassen zu müssen. Dieses Vorgehen nennt man auch den »Weg des CSS-Zen« (mehr dazu lesen Sie im Abschnitt »Die Funktionsprinzipien des CSS-Zen« auf Seite 60).

Mit Dokumentenbäumen arbeiten Wird eine Website neu erstellt, besteht ein Großteil der Arbeit in der Entwicklung einer einfachen HTML-Struktur. Diese kann dann von CSS (und möglicherweise JavaScript) als Rahmen (Framework) für die Präsentation und das Verhalten benutzt werden. Hierbei geht es um die Erstellung einer Grundstruktur (Template), die viele Dokumente als Fundament verwenden können. In dieser Arbeitsphase geht es weniger um den Inhalt als um die allgemeinen Strukturen, die den Inhalt umgeben. Beispiel 2-2 zeigt das body-Element einer einfachen HTML-Dokumentenstruktur. 18

|

Kapitel 2: Mit HTML-Markup arbeiten

Beispiel 2-2: Die Struktur eines einfachen HTML-Dokuments

...

...

...

...

...

...

...

    

In der einfachen Implementierung wird nur die erste Stylesheet-Regel verwendet. Die vier b-Elemente werden nicht benötigt, genauso wenig wie das zusätzliche Hintergrundbild. Da der Internet Explorer noch keine abgerundeten Ecken unterstützt, bekommen dessen Benutzer auch keine zu sehen. (Wir sind uns darüber im Klaren, dass die hierfür verwendeten Eigenschaften -webkit-border-radius und -moz-border-radius nicht standardkonform sind.) Die komplexere Implementierung runder Ecken funktioniert auch für IE. Mit etwas Erfahrung springen einem die Probleme aber sofort ins Auge: • Das Markup ist unwiderruflich mit der Präsentation verbunden. Wenn sie die abgerundeten Ecken aus dem Design entfernen, werden auch die nur für diesen Zweck ins Markup eingefügten b-Elemente entfernt. • position, z-index und die damit verbundenen Schwierigkeiten gelten zwar nur für diese Implementierung abgerundeter Ecken. Jedoch haben die meisten unnötig komplexen Gestaltungen einen ähnlich hohen Anteil an »Übergepäck«. Das Ergebnis dieses unnötigen »Zeugs« ist immer das gleiche: Zusätzliches Markup und Stilregeln verringern die Flexibilität der Site durch ungewollte Beschränkungen des Designs.

Die vier wichtigsten Angewohnheiten für effektive Stylesheets

|

51

• Eine große Menge an Markup-Code und Stilregeln erhöht die Wahrscheinlichkeit von Eingabefehlern und Darstellungsproblemen. Sowohl die Vorteile der Schlichtheit, wie auch die Nachteile ihres Fehlens scheinen sich zu vervielfachen. Wenn Sie in Ihren Templates nur eine komplexe Implementierung verwenden, sind die Folgen vermutlich noch unerheblich. Sobald die Komplexität aber die erste oder zweite Instanz überschreitet, führt das zwangsläufig zu Templates, die unter ihrem eigenen Gewicht aus unlösbaren Konflikten, Darstellungsfehlern und Wartungsaufwand zusammenbrechen. Hält man sich dagegen an die Prinzipien der Schlichtheit, lässt sich CSS-Zen bei Redesigns und neuen Projekten mühelos anwenden. Sobald Sie Ihre Templates auf das Wesentliche reduziert haben, steht Ihnen auch nichts mehr im Weg. Der wichtigste Schritt bei der Umsetzung der Schlichtheit besteht also in der Erkenntnis, welche Dinge wesentlich sind oder wesentlich sein werden.

Schlichtheit bei sehr großen Sites Was Schlichtheit tatsächlich bedeutet, hängt teilweise von der Größe eines Projekts ab. Oft ist es hier für Entwicklungsteams äußerst schwierig, sämtliche Sonderfälle der Präsentation und anderer Akzente zu beachten, die auf kleineren Sites vertretbar sind. Im Vergleich zu den Quellcodebeispielen in diesem Buch müssen diese Teams die Anzahl der id-Attribute zugunsten besserer Wartbarkeit oft reduzieren, während die verbleibenden ids einem strikten Standard folgen. In der Praxis nehmen Designer dieses »Ausdünnen« oft auf Anraten der Entwickler vor. Dies geschieht aus drei Gründen: Geschäftsziele, erwartete Besucherziele und Liefertermine. Das Ergebnis einer solchen Zusammenarbeit ist oft ein Gerüst aus wenigen Templates, die ihrerseits oft nur auf einem einzelnen, sehr einfachen Template basieren. Das Grundlayout wird in kleine, separate Bausteine aufgeteilt. Diese landen jeweils in einem eigenen Container, der eines oder mehrere der folgenden id- oder class-Attribute trägt: • #kopfteil • ul#navigation • #haupttext • #fussteil In die Seite eingefügte Bestandteile können dann automatisch mit Inhalt gefüllt werden. Die Art der Inhalte hängt typischerweise von den angeforderten Ressourcen ab. Außerdem spielt es eine Rolle, welchen Authentifizierungsstatus der Besucher hat und ob auch Inhalte von Drittanbietern eingebunden werden müssen. Die Quellcodebeispiele in diesem Buch unterscheiden sich vom Markup auf großen Sites besonders bei der Behandlung der Navigation, die aufgrund von Sachzwängen stark vereinfacht wird. So werden Sie auf großen Sites nur selten Verfahren zur Bildersetzung

52

|

Kapitel 5: Effektive Stylesheets und Dokumentenstrukturen

(image replacement) finden. Der Grund ist die Vielzahl an unterschiedlichen Benutzeranforderungen, die die Ressourcenkosten für die Bildersetzung in die Höhe treiben können. Content-Management-Systeme von der Stange und Blogging-Plattformen arbeiten ebenfalls oft nach diesem Designprinzip. Hier ist der Grund jedoch nicht in den Bedürfnissen der Benutzer zu suchen, sondern in der Vielfalt der Anwendungsmöglichkeiten.

Angewohnheit 2: Flexibilität Damit eine Site flexibel bleibt, muss das Verhältnis zwischen kurz- und langfristigen Notwendigkeiten ausgewogen sein. Hierbei geht es in erster Linie um die Menschen. Jedes Projekt hat schließlich eine einmalige Kombination aus Auftraggebern, Benutzern, Anforderungen, Zeitplan und Erwartungen an die Lebensdauer (oder sollte sie zumindest haben). In einem so variablen Umfeld verändern sich natürlich auch die Definitionen. Die Flexibilität einer Webapplikation ist anders definiert als die Flexibilität eines Datenarchivs. Websites, die Veranstaltungen bewerben, können sich komplett von den beiden ersten Formen unterscheiden. Während die Flexibilität in den ersten beiden Fällen hauptsächlich aus der Wiederholbarkeit zukünftiger Arbeitsabläufe besteht, sind sich schnell ändernde Websites am flexibelsten, wenn ihre Bestandteile (inklusive des Markups) für spätere, ähnliche Projekte wiederverwendet werden können. Am wichtigsten ist Flexibilität für den Prozess, die Ziele der Site und die Arbeitsbedingungen. Erfolgreiche Gestalter beachten diese Dinge, bevor sie mit der Arbeit beginnen. Auf die Ergebnisse bezogen heißt das: Das Arbeitsergebnis eines Gestalters ist am flexibelsten, wenn seine Arbeitsmethoden sich an den wahren Gründen für die Erstellung der Website orientieren.

Die Anwendung der Flexibilität basiert hauptsächlich auf zwei Dingen: progressive Verbesserungen und »Overbuilding« (das Übererfüllen der Anforderungen). Um Webapplikationen fortschreitend verbessern zu können, müssen Entwickler oftmals mehr als eine Codebasis pflegen: Eine läuft auf dem Client, um die Serverlast zu verringern, und eine läuft auf dem Server, falls der Benutzer clientseitige Skripts deaktiviert hat.

Auf progressive Verbesserungen wurde implizit bereits im Abschnitt »Die Trennung von Inhalt, Strukur, Präsentation und Verhalten« auf Seite 17 eingegangen. Die Inhalte werden von Markup umgeben, auf dem die Präsentationsschicht in Form von CSS aufsetzt. Über diesen beiden liegt eine abschließende Skripting-Schicht, die Verhalten wie Fehlerbehandlung und Interaktivität bereitstellt. Werden diese Bestandteile korrekt implementiert, verlaufen die Abhängigkeiten nur in eine Richtung, und das Verhalten basiert auf den Erfordernissen des Inhalts und Markups. Selbst wenn die Präsentationsschicht entfernt wird, sollte die Site weiterhin benutzbar sein.

Die vier wichtigsten Angewohnheiten für effektive Stylesheets

|

53

Im Webdesign haben sich einige Praktiken und Fehler etabliert, die die Erstellung einer flexiblen Webapplikation durch progressive Verbesserungen erschweren können. Diese Hässlichkeiten werden in Kapitel 14 beschrieben.

Die zweite Säule der Flexibilität besteht im Overbuilding, dem Übererfüllen der Anforderungen. So hat fast jedes Template Stellen, an denen Markup eingefügt werden kann, um beispielsweise die Anwendung klassenbasierter Regeln und die absolute Positionierung von Elementen zu erleichtern. Ihre Anwendung hängt von den langfristigen Anforderungen Ihres Projekts ab und davon, ob die erstellen Ressourcen wiederverwendbar sein müssen. Bei meiner Arbeit verwende ich oft class-Attributwerte wie abschnitt oder artikelMetadaten. Das mache ich sogar bei Sites, bei denen diese aufgrund der Designrichtlinien auch weggelassen werden könnten. Ich denke hier besonders an die ästhetische und strukturelle Weiterentwicklung der Site. Nach den anfänglichen Anforderungen werden möglicherweise noch keine speziellen Stile für bestimmte Abschnitte oder Metadaten benötigt. Das kann sich mittel- oder langfristig aber leicht ändern. Der Nachteil des Overbuilding besteht darin, dass es direkt mit dem Ziel der Schlichtheit im Konflikt stehen kann, was wiederum den Anspruch an eine gute Balance unterstreicht. Um die Notwendigkeit einzuschätzen, können Sie sich drei Fragen stellen: 1. Kann jedes zusätzliche Element mit einem relevanten oder beschreibenden classoder id-Wert versehen werden? 2. Soll das zusätzliche Markup mehrere mögliche Präsentationsanforderungen unterstützen oder nur eine? 3. Ist es absehbar, dass die Site sich im Laufe der Zeit weiterentwickelt? Wenn Sie alle drei Fragen mit »Ja« beantworten können, ist es nicht nur akzeptabel, sondern mehr als wünschenswert, die Templates mit zusätzlichem Markup zu versehen. Der Schlüssel für dessen Wartung liegt in der sorgfältigen Auswahl der Elemente und Attribute und einheitlichen Ergebnissen.

Flexibilität, eigene Bibliotheken und die Wiederverwendung von Code Bei der langfristigen Planung können Entwickler die meisten Ressourcen einsparen, wenn sie einen Template-basierten Ansatz verfolgen, wie bereits im Bezug auf Flexibilität beschrieben. Teams ohne nennenswerte externe Unterstützung verwenden gerne ein PublishingSystem von der Stange, um die eigenen Ressourcen zu schonen, und benutzen dann einen internen Prozess, um dessen Ausgaben an die eigenen Erfordernisse anzupassen. Erfahrene freischaffende Entwickler arbeiten oft lieber direkt mit den Webtechnologien. Sie gehen das Problem oft anders an und entwickeln im Laufe der Zeit ihre eigenen Markup-Bibliotheken, Stylesheets und Codesammlungen. Wieder andere, mich selbst eingeschlossen, verwenden spezialisierte, aber effektive Produktionstechniken. Sie beginnen nach Möglichkeit jedes Projekt mit dem sprichwörtlichen unbeschriebenen Blatt. Das

54

|

Kapitel 5: Effektive Stylesheets und Dokumentenstrukturen

heißt: Der Prototyping-Prozess (siehe im Abschnitt »Prototyping und Layout« auf Seite 258) wird manuell durchgeführt, allerdings mit so wenig geistigem Aufwand, dass das übrige Gehirnschmalz dazu verwendet werden kann, die besonderen Anforderungen des jeweiligen Projekts zu verstehen. Teams mit externer Unterstützung, die an großen Sites arbeiten, können die Vorteile beider Methoden kombinieren: Der beste Ansatz besteht oft darin, gemäß den Anforderungen neue »Module« zu entwickeln und ansonsten bereits bestehende Projekte wiederzuverwenden. Dieser Ansatz funktioniert nur mit internen Produktionsstandards und Stilrichtlinien, die die Arbeit der Gestalter folgendermaßen beeinflussen: • Der größte Teil der Präsentationsschicht wird über class-Attribute realisiert und ist umfassend dokumentiert. Änderungen und Erweiterungen können nur vorgenommen werden, nachdem ein mühsamer Genehmigungsprozess durchlaufen wurde. Dieser ist hauptsächlich dafür gedacht ist, einzelne Teammitglieder von eigenen »Verbesserungen« abzuhalten. • Einzelne, austauschbare Teile der Site sind oft »anonymer« als nötig. Ihr Verwendungszweck ist im Produkt selbst wenig bis gar nicht dokumentiert. Dieser Umstand basiert einerseits auf Notwendigkeit, andererseits auf Trägheit: Bevor CSS ausreichend unterstützt wurde, konnte ein effektives Site-Layout nur über die Verwendung verschachtelter table-Elemente erreicht werden. • Unvermeidliche Lücken zwischen den Standardanforderungen (siehe im Abschnitt »Abgestufte Unterstützung« auf Seite 281) und den Fähigkeiten der Browser werden durch die rohe Gewalt von JavaScript-Frameworks und eingebetteten StylesheetHacks gelöst. • Die Übererfüllung der Anforderungen findet höchstens innerhalb kleinerer Inhaltsbausteine statt. Die genannten Schritte resultieren alle aus dem bereits erwähnten Bedarf nach Balance. Stellen Sie sich vor, es gibt eine Gruppe von Webautoren, die sich mit der redaktionellen und gestalterischen Seite ihrer Texte besser auskennen als mit Webtechnologien. Soll nun ein Team aus vier bis sechs Entwicklern deren Ergebnisse aufbereiten, so müssen die Bedürfnisse der ersten Gruppe eine geringere Priorität erhalten als die der zweiten, damit die Entwickler für die Qualitätssicherung und andere Projekte weiter zur Verfügung stehen.

Angewohnheit 3: Konsistenz Idealerweise kann ein Gestalter seine Arbeitsergebnisse mit geringfügigen Änderungen am Markup- und CSS-Code aus einem früheren Projekt übernehmen. Das ist »CSS-Zen« in Aktion (siehe im Abschnitt »Die Funktionsprinzipien des CSS-Zen« auf Seite 60). Um Templates wiederverwenden zu können, muss der Gestalter in solchen Fällen bei deren Erstellung und Verfeinerung möglichst konsistent arbeiten. Das ist in der Praxis schwieriger, als es theoretisch erscheint. Der Mangel an Disziplin und Eingriffe seitens der Manager zwingt die einfachen Entwickler (und die Gestalter unter ihnen) oft, das sprichwörtliche Rad für jedes Projekt neu zu erfinden. Die vier wichtigsten Angewohnheiten für effektive Stylesheets

|

55

Daher gehört es zur Angewohnheit der Konsistenz, dass ein Gestalter bekannte Umstände erkennt, sich auf sie vorbereitet und engagiert darauf reagiert, wann immer es möglich ist. Konsistenz ergibt sich aus Beobachtung, Vorbereitung und Reflexion.

Konsistenz kann sowohl innerhalb einer Site als auch über mehrere Websites hinweg von Vorteil sein. Die Konsistenz innerhalb einer Site ist einer der wichtigsten Vorteile der Kaskade. Nehmen Sie beispielsweise ein Template für ein dreispaltiges Layout. Die wichtigsten Layoutstile lassen sich mit relativ wenigen Regeln definieren. Haben Sie eine zweispaltige Präsentation, die das gleiche Layout verwenden soll oder ein paar Seiten mit einer anderen Spaltenreihenfolge, werden zusätzliche Stilregeln nötig, wie diese: #hauptteil #haupttext { width: 42em; float: left; } #haupttext #innen { float: right; width: 24em; padding: 0 1.5em 0 1.5em; } #hauptteil #seitenleiste { margin-right: 27em; } #hauptteil #drittrangig { margin-left: 42em; } body.sonderfall #hauptteil #haupttext body.sonderfall #haupttext #innen body.sonderfall #haupttext #seitenleiste body.sonderfall #hauptteil #drittrangig

{ { { {

width: auto; } width: 34.5em; } margin-right: 37.5em; } display: none; }

Die Selektoren in diesem CSS-Quellcodebeispiel sind überladen, um die verwandtschaftlichen Beziehungen der Elemente zu verdeutlichen.

Die oben gezeigten Stilregeln beschreiben mit den ersten vier Regeln ein mögliches dreispaltiges Layout. Die übrigen Regeln entfernen #drittrangig aus dem Textfluss des Dokuments und passen das Layout der verbleibenden Elemente an den Sonderfall an. Gibt es keine Ausnahmen, sind nur die ersten drei Regeln notwendig. Die zusätzlichen Regeln verdeutlichen die Vorteile der Schlichtheit. Verglichen mit der Aussicht, für zwei- und dreispaltige Layouts eigene Templates zu erstellen, wiegt diese Methode sogar noch schwerer. (Der Kompromiss und die suchmaschinenfreundlichste Lösung besteht darin, die optionale Spalte – den .sonderfall – über die include-Anweisung eines Skripts einzubinden, das nur bei Bedarf aufgerufen wird.) Schreibt ein Gestalter die vorigen Stilregeln, geht er davon aus, dass das gleiche Template für zwei- wie für dreispaltige Layouts verwendet wird, was für eine Form der Konsistenz spricht. Eine zusätzliches Template birgt gewisse Risiken – in erster Linie die Notwendigkeit weiterer Tests. Ein weiteres Risiko besteht in einer Verzweigung des Codes, wenn die Templates, aus welchen Gründen auch immer, separat verändert werden. Im Laufe der Zeit werden die Unterschiede immer größer. Schließlich wird der Bedarf an Regeln für die Vereinheitlichung der Gestaltung im Vergleich zur Verwendung eines einzelnen Templates unverhältnismäßig groß.

56

|

Kapitel 5: Effektive Stylesheets und Dokumentenstrukturen

Die in diesem Beispiel erläuterte Konsistenz erstreckt sich aber auch auf das Design. Wie das Beispiel zeigt, sind die Stile für die Umsetzung inkonsister Designs deutlich zahlreicher und umfangreicher. Die Folge sind ungewollte Interaktionen zwischen den Elementen, weitere mögliche Darstellungsfehler und zusätzliche Tests. Der letzte und höchste Ausdruck von Konsistenz ist schließlich die Möglichkeit, den Code wiederzuverwenden. Haben Sie beispielweise eine Bibliothek mit Templates und Stylesheets, die Sie in alltäglichen Layoutsituationen verwenden können, wird der Beginn neuer Layoutprojekte mit der Zeit immer einfacher. Öffnen Sie Ihr Template, verändern Sie die class- und id-Werte nach Bedarf, und passen Sie die CSS-Eigenschaften an die Designvorgaben an. Schon nach kurzer Zeit können Sie sich auf die Typografie, Akzente und andere Feinheiten konzentrieren, anstatt stundenlang ein komplett neues Markup und die nötigen Stile anzulegen Wenn Sie die Struktur Ihres Dokuments und des Templates von vornherein kennen, brauchen Sie sich um die Details nicht mehr zu kümmern. Stattdessen können Sie Ihre ungeteilte Aufmerksamkeit der Benutzerfreundlichkeit widmen. Diese Vorteile erhöhen außerdem die Notwendigkeit, gestalterische Akzente zu nutzen, um dem Benutzer zu zeigen, wo er sich gerade befindet.

Konsistenz durch Template-Verwaltung Die detaillierte Diskussion der Verwendung von Templates in diesem Buch basiert auf der Idee eines »Baugerüsts« (scaffolding), also einer einfachen Markup-Struktur mit maximal vier oder fünf Abschnitten pro Seite. Dieser äußere »Rahmen« enthält alle verwendeten Seiten- oder Abschnitts-Templates. Dadurch kann der für die Präsentation zuständige Gestalter den Kontext jeder Layoutspalte oder anderer Bestandteile der Seite leicht verstehen. Die größte Gefahr bei diesem Ansatz sind die Designer. Sie könnten glauben, dass der Aufwand für die Wartung und Pflege des Codes bei der Verwendung mehrer Templates arithmetisch steigt. Tatsächlich steigt der Aufwand jedoch logarithmisch. Verdoppelt sich der Aufwand bei zwei Templates, liegt er bei der Verwendung eines dritten Templates bereits deutlich höher. Dieser unverhältnismäßige Ressourcenverbrauch entsteht, weil ein Template am besten erstellt wird, um bestimmte (größtenteils oder vollkommen) einmalige Anforderungen zu erfüllen. Das führt zu einmaligen Beziehungen zwischen den Bestandteilen. Das hat wiederum zur Folge, dass jedes neue Template zusätzlich zu den zu erwartenden Herausforderungen bei seinem ersten Einsatz auch neue Fehler und Präsentationsanforderungen mit sich bringt. Außer durch die sparsame Verwendung von class- und id-Werten, lässt sich der wachsende Ressourcenhunger am besten dadurch eindämmen, dass man sich an einen bestimmten Arbeitsablauf hält. Das heißt, jedes neue Template wird erst dann erstellt und getestet, wenn sich alle Verantwortlichen darüber einig sind, dass eine weiteres Template wirklich nötig ist. Die vier wichtigsten Angewohnheiten für effektive Stylesheets

|

57

Die Alternative wäre, bei jeder Gelegenheit neue Templates zu erstellen. Die bereits beschriebene Streuung und Codeverzweigungen wären unvermeidlich.

Angewohnheit 4: Auf Kurs bleiben Am schwierigsten ist es, sich einen Ortssinn anzugewöhnen. Eine gute Orientierung innerhalb Ihres Codes erwerben Sie vor allem durch die Praxis. Schließlich existieren alle Webdokumente in mehreren Kontexten und Informationsräumen, und Ihr Projektteam kann nur einige davon kontrollieren. Daraus ergibt sich, dass die Orientierungsfähigkeit (siehe im Abschnitt »Navigation: Ortsbestimmung und Orientierungshilfen« auf Seite 64) und eine klare Standortbestimmung für die Benutzerfreundlichkeit absolut notwendig sind. Wenn Sie sich nicht einmal innerhalb Ihres eigenen Arbeitsbereichs zurechtfinden, ist der Versuch fast aussichtslos, Ihren Nutzern diese Fähigkeiten zu vermitteln. Die in diesem Buch gezeigten Konventionen für Seitenstruktur, Markup und Benennung orientieren sich so eng wie möglich an den gängigen Praktiken für große Websites, um die es später in diesem Kapitel geht.

Die Möglichkeit, seinen Standort zu bestimmen, bildet den Anfang und das Ende der Kaskade: Elemente befinden sich innerhalb anderer Elemente, die wiederum in Dokumenten gespeichert sind. Diese sind Teil eines größeren Systems oder eines Universums aus Websites, das sich ständig wandelt. Je genauer Sie bestimmen können, worin Ihre aktuelle Aufgabe innerhalb dieses Kosmos besteht, desto einfacher ist es, qualitativ hochwertigen CSS-Code zu schreiben. Einem erfahrenen Benutzer reichen zur Orientierung im Web ein paar Hinweise auf seinen Standort. Ein erfahrener Webentwickler muss dagegen genau wissen, was er an welcher Stelle tut, um die Ortshinweise zu erstellen, die der Benutzer benötigt.

Nehmen Sie beispielsweise den folgenden Elementebaum: • body *

h1

*

div#hauptteil &

div#hauptinhalt &

div#haupttext &

h2

&

div.abschnitt &

&

div#seitenleiste &

&

|

...

div#drittrangig &

58

...

...

Kapitel 5: Effektive Stylesheets und Dokumentenstrukturen

&

ul#hauptnavigation

&

div#fussteil &

ul#unternavigation

&

p#kolophon

In diesem Baum gibt es mindestens 16 verschiedene Kontexte, auf die Präsentationsregeln angewendet werden können. Hinzu kommen mit ziemlicher Sicherheit Hinweise auf den Kontext des Inhalts, der mithilfe von class- und id-Werten realisiert wird, die für body (und vermutlich auch noch für andere Elemente) definiert werden. Kann ein Gestalter diese Signale deuten, ist es ihm möglich, den Kontext eines beliebigen Elements der Site zu bestimmen – und zwar unabhängig von seinem Platz im Quellcode, der Häufigkeit seines Auftretens oder der Wichtigkeit seines Inhalts. Kann ein beliebiges Element definiert werden, lässt es sich auch mit Stilregeln versehen. Dies ist die Voraussetzung dafür, dass ein Element als Orientierungshilfe für den Besucher dienen kann. (Das soll nicht heißen, dass jedes Element als Orientierungshilfe verwendet werden sollte, obwohl selbst das möglich ist.)

Produktdokumentation als »Kompass« Das ideale Stylesheet dokumentiert eine Site, weil es auf kontextabhängigen Selektoren und sorgfältig gestalteten Elementbäumen basiert. Aber auch kleinste Projekte profitieren von einem gewissen Maß an zusätzlicher Dokumentation. Oft geht es hierbei um das Design, insbesondere die Behandlung von Schrift und die Spezifikation eines Layoutrasters. Es gibt drei Bestandteile, die für eine Dokumentation im Laufe der Zeit nützlich sein können: Beschreibungen der Kaskade Beschreibungen der Kaskade sind typischerweise am einfachsten zu erstellen. Allerdings stellen sie auch die größten Herausforderungen an das Erinnerungsvermögen des Gestalters. Jede ausreichend komplexe Sammlung von Stylesheet-Regeln folgt bestimmten Mustern: Die Beschreibungen der Kaskade beschreiben diese Regelmuster an einem Ort und verweisen auf Teile der Website, in denen sie benutzt werden. Code- und Produktstandards Code- und Produktstandards bauen auf der Beschreibung der Kaskade auf. Dies geschieht, indem sie die Markup-Muster und Arten von Selektoren beschreiben, die üblicherweise für bestimmte Inhalte verwendet werden. Ein Beispiel für Produktstandards ist meine Angewohnheit, das h1-Element (ohne id) nur dafür zu verwenden, die Identität der Site zu definieren, während h2 die erste Überschrift für den Inhalt der Seite enthält. Stylesheet-Richtlinien Stylesheet-Richtlinien bereichern die Dokumentation der Site, indem sie nicht nur in klar verständlicher Sprache erklären, wie Dinge zu tun sind, sondern auch, warum eine Klasse oder ein Inhaltsteil auf eine bestimmte Art strukturiert und gestaltet wurde. Die vier wichtigsten Angewohnheiten für effektive Stylesheets

|

59

Eine effektive externe Dokumentation ist besonders wertvoll, wenn Entwickler eine Site noch nicht kennen. Auf diese Weise können Sie sich ein akkurates »inneres Bild« von der Informationsarchitektur und der Struktur der Templates machen. Alternativ dazu kann man Neulinge natürlich auch gleich in tieferes Wasser werfen. Das zwingt sie dazu, eigene Rückschlüsse zu ziehen, warum eine Site ein bestimmtes Design besitzt. Der größte Wert externer Dokumentation liegt aber vermutlich in ihrer schieren Größe – oder genauer in ihrem Fehlen. Je effektiver Sie die vier in diesem Abschnitt vorgestellten Gewohnheiten praktizieren, desto geringer ist der Bedarf an zusätzlicher Dokumentation.

CSS-Zen und die Erfahrung des Gestalters Eigentlich ist die Bezeichnung »CSS-Zen« nicht ganz korrekt. Der Zen-Buddhismus betont die gegenseitige Abhängigkeit aller Dinge, insbesondere lebender Dinge, in einer Reihe verschiedener Glaubensgrundsätze. Bezogen auf die Webentwicklung, ist der Begriff von einer gebräuchlichen Kurzbezeichnung für die japanischen karesansui-Steingärten abgeleitet, die einem bestimmten ästhetischen Zweck dienen: der Demonstration von begreifbarer Harmonie und Präzision trotz einer sich ständig wandelnden Umgebung und der Unberechenbarkeit der Natur. Der Wert von karesansui für die buddhistische Meditation (in Form von Reflektion und der Pflege des Gartens) führte zu dem Spitznamen »Zen-Garten«, der Dave Shea zu dem Namen für seine außerordentlich beliebte Website (http://www.csszengarden.com/) inspirierte. Der »CSS-Zen-Garten« soll eine wichtige Idee demonstrieren: Ein einziges, sorgfältig erstelltes Markup-Template kann eine praktisch unbegrenzte Anzahl von Designanforderungen befriedigen. Erfüllt ein Template die nötigen Vorraussetzungen, kann das Design ohne Anpassungen am Markup beliebig verändert werden, sofern es keine deutliche Änderungen an der Struktur der Informationen gibt, die im Dokument oder der Site enthalten sind.

Wie karesansui, so orientieren sich Sites, die CSS-Zen praktizieren, an den gegebenen Umständen, insbesondere den Projektzielen. Außerdem bleiben die Markup-Templates solcher Sites weitestmöglich unverändert – so felsenfest wie die karesansui inmitten eines scheinbaren Chaos.

Die Funktionsprinzipien des CSS-Zen Die in den vorigen Abschnitten besprochenen Angewohnheiten und Ideen gelten als gute Tugenden, um die Effizienz und Qualität der Arbeit des Gestalters zu steigern. Das Ideal des CSS-Zen passt dagegen in eine Struktur aus Prinzipien, die eine bestimmte Betrachtungsweise für Webinhalte und ihre Struktur fördern: 1. Information und Präsentation unterscheiden sich so stark, dass man unmöglich sagen kann, dass eines vom anderen abhängt.

60

|

Kapitel 5: Effektive Stylesheets und Dokumentenstrukturen

2. Es ist eine unumstößliche Tatsache, dass der Informationsfluss (und damit auch der Fluss der Webinhalte) nicht von ihrem Ort, sondern von ihren Beziehungen bestimmt wird. 3. Webinhalte können in kleinste Untereinheiten aufgeteilt werden, ohne dass der Durchschnittsbesucher davon etwas merkt. 4. Jeder Kreuzungspunkt zwischen Umgebung und Information einer Site hat seine eigene ideale Struktur. Sobald ein Gestalter diese Prinzipien bei seiner Arbeit bedenkt, ändert sich seine Sichtweise. In Tabelle 5-1 finden Sie einen Vergleich häufiger Ansichten von Gestaltern zu Markup und Stil bei Kenntnis bzw. Unkenntnis der Prinzipien des CSS-Zen. Die Reihenfolge entspricht der gerade vorgestellten Liste. Tabelle 5-1: Vergleich der Ansichten von Gestaltern bei Unkenntnis bzw. Kenntnis der Prinzipien des CSS-Zen Prinzip

Unkenntnis

Kenntnis

Trennung

Quellcode-Reihenfolge und -struktur werden von Präsentationsanforderungen bestimmt.

Quellcode-Reihenfolge und -struktur werden von der Priorität der Elemente und (wo nötig) ihrer Klassifizierung bestimmt.

Beziehungen

Jede beliebige Menge Inhalt ist unteilbar und besitzt Inhalt kann unterteilt werden, in beliebigen Zusameine ideale Flussrichtung. menhängen dargestellt werden, neu gestaltet und mit anderen Inhalten kombiniert werden; zusätzlicher Kontext kann durch Hyperlinks und Metadaten bereitgestellt werden.

Teilbarkeit

Das Markup richtet sich komplett nach der Präsentation und offensichtlichen Inhaltsdefinitionen; Markup ist oft verschachtelt und wird nur selten benutzt, um dem enthaltenen Inhalt zusätzliche Bedeutung zu verleihen.

Markup und Inhalt folgen einer logischen Struktur und können im Dokumentenbaum bei Bedarf bis hin zu einzelnen Silben oder Symbolen neu angeordnet werden.

Veränderlichkeit

Die Dokumentenstruktur hat entweder eine »Einheitsgröße«, die für alle Situationen passen muss, oder sie wird vollkommen willkürlich erstellt.

Inhalt und Aufteilung des Dokumentenbaumes folgen dem Prinzip »Alles hat seinen Platz«. Dies kann kann je nach Projektzielen, Publikum und Themen unterschiedlich angewandt werden.

Die konsequente Anwendung des CSS-Zen führt zu Websites, deren Form auf allen Ebenen der Funktion folgt. Da die Funktion die Besucher bringt, sollte dies doch die bessere Variante sein als umgekehrt, oder?

Informationsarchitektur und Usability des Webs Dieses Buch enthält einige Schlüsselideen zur Webentwicklung: • Hyperlinks sind der Anfang, das Ende und die Mitte des Webs. • Webressourcen sind im Grunde genommen n-dimensional und nicht linear.

Informationsarchitektur und Usability des Webs

|

61

• Die unbegrenzte Anzahl von Möglichkeiten, wie Inhalte verlinkt, unterteilt und kombiniert werden können, zeigt deutlich, wie wichtig effektive Orientierungshilfen für Websites sind. • Jede Website oder -applikation ist eigentlich eine Ressource aus mehreren Schichten, die nach und nach erweitert werden können. • Es gibt mehr als einen Weg, eine Website zu erstellen, weil sich die Anforderungen je nach den Geschäftszielen und Benutzerumgebungen verändern. Die Kunst der Informationsarchitektur (IA) versucht, diese Ideen zu konkretisieren und die dadurch entstehenden Designprobleme zu lösen. Das Hauptziel ist es, Informationen möglichst gut auffindbar und benutzbar zu machen. Was hat man schon von Informationen, die keiner findet? Dieser Abschnitt ist nicht als eingehende Unterweisung, sondern nur als Einführung gedacht. Weiterführende Informationen über die Informationsarchitektur des Webs finden Sie unter den folgenden Ressourcen: • Don’t Make Me Think: Web-Usability – Das intuitive Web, 2. Auflage, von Steve Krug (Mitp). • Information Architecture for the World Wide Web, 3. Auflage, von Peter Morville und Louis Rosenfeld (O’Reilly). • Boxes and Arrows, eine Website für und von Praktikern aus dem Bereich der Web-Benutzererfahrung (UX), zu finden unter www.boxesandarrows.com. • Die American Society for Information Science and Technology, unterstützt Interessengruppen, die sich mit Mensch-Computer-Interaktion (HCI) und Informationsarchitektur befassen. Die Website finden Sie unter www.asis.org.

Ein auf Webinhalte und -schnittstellen spezialisierter Informationsarchitekt muss die zuvor vorgestellten Ideen als Tatsachen annehmen. Die Alternative grenzt schon an Nihilismus. Schließlich wird es ohne jegliche Grundsätze – oder zumindest Annahmen – unmöglich, den Inhalt einer Site effektiv und konsistent zu organisieren und für Menschen präsentabel zu machen. Auf der praktischen Ebene brauchen nur die wenigsten Websites eigene IA-Experten, entweder weil es einfach nicht nötig ist oder weil das Budget nicht ausreicht. Daher sollten gewissenhafte Entwickler zumindest die Grundlagen der IA beherrschen.

Mehrdimensionalität Wie bereits mehrfach gesagt wurde, sind traditionelle Informationsquellen (Druckmedien, Video, Audio) überwiegend linear, das Web aber nicht. Die Dimensionen des Web lassen sich wie folgt beschreiben:

62

|

Kapitel 5: Effektive Stylesheets und Dokumentenstrukturen

Länge Analog zur linearen Natur traditioneller Medien ist mit Länge der offensichtliche Anfang und das Ende des primären Inhalts eines einzelnen Dokuments gemeint. Breite Breite bezeichnet Position eines Webdokuments innerhalb der logischen Menge aller Dokumente, die direkt mit ihm verlinkt sind. Der Begriff Breite ist verwandt mit (aber getrennt von) »Situation«. Um sich diese Dimension des Website-Designs vorzustellen, werden neuerdings gerne Mind-Mapping-Techniken verwendet. Tiefe Mit Tiefe meint man eine beliebige Betrachtungsweise des Inhalts für bestimmte Benutzerumgebungen. Tritt auf, wenn progressive Verbesserungen angewandt werden. Entropie Zeitempfindliche Dokumente oder solche, die ganz oder zum Teil aus benutzergenerierten Inhalten bestehen, können sich im Laufe ihrer Lebensspanne enorm verändern. Situation Die Position und der Kontext eines Dokuments in Bezug auf seine Position im Browserverlauf (History) während einer Benutzersitzung. Die Situation ist getrennt von Breite und Entropie zu betrachten, weil sie von jedem Benutzer selbst bestimmt werden kann. Anwendungsszenario Der Zweck, zu dem Inhalt und Struktur verwendet werden, z.B. ein RSS-Feed, über den Änderungen mitgeteilt werden, im Gegensatz zu HTML für normales Lesen; unterschiedliche Benutzerschnittstellen einer Webapplikation; Zusammenfassungen von Suchmaschinen-Ergebnisseiten (SERP) Granularität Die Art, auf die sich die Wahrnehmung des Inhalts verändert, wenn Teile entfernt, hinzugefügt, ex- oder importiert werden. Auf die gleiche Art, wie die Warhnehmung von Länge, Breite, Tiefe und Entropie eines begreifbaren Objekts unser Verständnis dieses Objekts verändert, ändert sich auch das Verständnis von Webinhalten durch unsere Wahrnehmung der gerade beschriebenen Eigenschaften. Die meisten Leute sind es gewohnt, in zwei Dimensionen zu denken, können normalerweise mit dreien umgehen und sind sich vier Dimensionen bewusst. Informationsarchitekten, Site-Designer und Gestalter müssen entscheiden, wie viele (und welche) der sieben gerade beschriebenen Dimensionen sie verwenden, um Benutzern Hilfen zur Ortsbestimmung und Navigation an die Hand zu geben. Dies war einfach eine grobe Beschreibung von Webinhalten und Dokumentenstruktur, die nicht nur die vier wahrnehmbaren Dimensionen einbezieht, sondern drei weitere. Informationsarchitektur und Usability des Webs

|

63

Verglichen mit den Grenzen traditioneller Medien, ist es kein Wunder, dass einige Mitmenschen durch Webinhalte ein gutes Auskommen haben – selbst wenn ihre Hauptaufgabe allein darin besteht, anderen zu helfen, sich darin zurechtzufinden.

Navigation: Ortsbestimmung und Orientierungshilfen Hinweise zum Erstellen von effektivem Linktext finden Sie im Abschnitt »Effektiver Inhalt für Links und Werte für das ›title‹-Attribut« auf Seite 139.

Betrachtet man die unbegrenzt wandlungsfähige Natur von Webinhalten und ihrer Schnittstellen, wird klar, dass die wertvollste Hilfe für den Besucher in Maßnahmen besteht, durch die er sich bei seinem Aufenthalt auf Ihrer Site zurechtfinden und seinen Weg finden kann. Websites verwenden typischerweise einen oder mehrere der folgenden sechs Strategien, um Benutzer »auf Kurs« zu halten: Primäre und sekundäre Navigation Im Seitenlayout gibt es meist einen oder zwei Bereiche mit Links, die auf für Besucher möglicherweise interessante Dokumente verweisen. Die Links können in zwei oder mehr Hierarchieebenen verschachtelt sein. In allen Fällen lässt sich das gerade angezeigte Dokument nicht nur durch den Seitentitel erkennen, sondern auch dadurch, dass es innerhalb der Linkliste nicht auf sich selbst verweist (self-link). Gut konzipierte Navgationspfade (»Brotkrumen-Navigation«) Wie die verschachtelte Navigation basieren auch diese Links auf einer hierarchischen Struktur der Site. In diesem Fall werden die Links jedoch in der Reihenfolge ihrer zugewiesen Bedeutung angezeigt. Dieser Ansatz ermöglicht zwar keine eindeutige Ortsbestimmung des Dokuments im Informationsraum einer ganzen Site, aber er ist eine hervorragende Ergänzung für gedruckte Seiten. Die »Brotkrumen« zeigen dem Leser gedruckter Inhalte genau, wie sie zur gedruckten Seite gelangen können. Stichwörter (»Tags«) Die Dokumente werden mit bestimmten Stichwörtern (»Tags«, nicht zu verwechseln mit HTML-Tags) versehen. Eine Zusammenfassung dieser Stichwörter wird auf jeder Seite der Website angezeigt. Folgt der Besucher einem dieser Stichwörter, erhält er eine Liste der Dokumente, auf die das gewählte Schlüsselwort passt. Die Dokumente können dann nach verschiedenen Gesichtspunkten sortiert werden (z.B. alphabetisch, nach Datum, Beliebtheit usw.). Sitemaps Der Hauptunterschied zwischen verschachtelter Navigation und einer Sitemap besteht darin, dass bei einer Sitemap Links auf alle Dokumente und Applikationen einer Site auf einer Seite zusammengefasst werden.

64

|

Kapitel 5: Effektive Stylesheets und Dokumentenstrukturen

Eingebettete Links Gewissenhafte Autoren versehen passende Schlüsselwörter und Sätze oft mit Links auf weiterführendes Material oder zumindest auf solches, das sich auf den ersten »Ebenen« der Site befindet. Suchfelder Im Prinzip wie Google, nur wesentlich kleiner. Bei der Bereitstellung lokaler Suchfunktionen sind die gleichen Dinge zu beachten wie bei der Suchmaschinenoptimierung (SEO) der Site. Die Bereiche der Navigation, die auf der Clientseite stattfinden, werden an anderen Stellen in diesem Buch behandelt: in den Abschnitten zur primären und sekundären Navigation in den Teilen, die sich mit Layout und Listen befassen. Wie die kontextbezogene Navigation werden auch Sitemaps in Form von Listen, und gelegentlich auf mehrere Spalten verteilt, dargestellt. Stichwortlisten verwenden ebenfalls das Listen-Markup, wobei die CSS-Eigenschaft display für die einzelnen Einträge oft den Wert inline erhält. Weitere Stile sind möglich, um die Häufigkeit der Stichwörter innerhalb der Site zu verdeutlichen.

Besucherstrategien Über Besucher lassen sich die folgenden allgemeinen Dinge sagen: • Die Ziele des Besuchers lassen sich in eine (oder mehrere) der folgenden Kategorien einordnen: Information, Dienste, Einkauf von Produkten oder Unterhaltung. • Die Besucher kommen auf eine von zwei Arten zum Ziel: durch Stöbern (Browsing) oder durch eine Volltextsuche. Oftmals bevorzugen Besucher die Suchmaschinen von Drittanbietern, weil diese ihnen innerhalb der Suchergebnisse genaue und vergleichbare Informationen bieten. Den meisten Besuchern ist außerdem bewusst, dass insbesondere große soziale Netzwerke mehr als nur eines der oben beschriebenen Ziele befriedigen können. Eine der wichtigsten Design-Entscheidungen besteht darin, ganz bewusst festzulegen, wie das Design und die Implementierung der Benutzerschnittstelle der Site diese gemeinsamen Ziele und Strategien umsetzen. Zwar ist es möglich, sämtliche hier beschriebenen Orientierungshilfen und Mechanismen zur Ortsbestimmung umzusetzen, aber nicht alle sind einfach zu implementieren. Auf jeden Fall müssen Gestalter wissen, an welcher Stelle eines Seitenlayouts diese Hinweise sich normalerweise befinden. So können sie den bestmöglichen Weg finden, die Hinweise zu gestalten, an denen sich die Besucher orientieren: Primäre Navigation Die primäre Navigation ist horizontal angeordnet und folgt, direkt nach dem Kopfteil; Links auf Unterbereiche befinden sich oft eine Zeile unterhalb der »Hauptlinks«.

Informationsarchitektur und Usability des Webs

|

65

Oftmals ist auch das Logo einer Site als Link auf die Startseite definiert. Das Logo befindet sich oft in der linken oberen Ecke des Layouts. Links in der Fußzeile Links innerhalb der Fußzeile werden ebenfalls als Liste definiert. Hierbei erhält die Eigenschaft display oft den Wert inline oder inline-block. Die Links werden oftmals horizontal zentriert und in einer kleineren Schrift als der Haupttext dargestellt. Navigationspfade Diese »Brotkrumen«-Navigation ist so gut wie immer horizontal orientiert und folgt normalerweise direkt auf die primäre Navigation. Bei gedruckten Seiten kann der Navigationspfad die primäre Navigation auch ganz ersetzen. Stichwortlisten In dreispaltigen Layouts erscheinen Stichwortlisten oft rechts vom Hauptinhalt; bei zweispaltigen Layouts unterhalb des sekundären Inhalts. In den seltenen Fällen, in denen ein einspaltiges Layout verwendet wird, erscheinen sie auch unterhalb des primären Inhalts, benötigen bei häufiger Verwendung jedoch eine eigene Spalte. Sitemaps Sitemaps werden üblicherweise aus dem Fußteil jeder Seite verlinkt und auf einer eigenen Seite als Hauptinhalt dargestellt. Suche Suchfelder werden normalerweise in der rechten oberen Ecke des Kopfteils platziert und manchmal am rechten Rand der Fußzeile wiederholt. Ergebnisseiten werden meist einspaltig dargestellt, selbst auf Websites, die Standardinhalte normalerweise mehrspaltig darstellen. Diese Art der Darstellung ist normalerweise der mangelnden Flexibilität in der Ausgabe des verwendeten Erweiterungsmoduls oder der verwendeten Suchmaschine geschuldet.

Richtlinien für die Erstellung benutzbarer Schnittstellen Die Erklärung »X kommt hierhin« ist ein Startpunkt: Indem Sie sich an den üblichen Verfahrensweisen orientieren, können Sie die Erwartungen der Besucher für sich nutzen. Allerdings reicht es meist nicht aus, einfach der Masse zu folgen, um ein gutes Ergebnis zu erzielen. Das erste und wichtigste Ziel ist – wieder einmal – Konsistenz. Stellen Sie sich eine Reihe von Seiten vor, die alle an den Seitenanfang gescrollt sind. Idealerweise findet ein Besucher die nötigen Navigationselemente auf jeder Seite an der gleichen Stelle: die Navigationslinks, die Stichwortlinks, das Suchfeld, den Seitentitel und so weiter. Noch besser (wenn auch wesentlich schwieriger) wäre es, wenn diese Konsistenz möglichst über die gesamte Länge der Seite aufrechterhalten würde. Hierdurch können sich Besucher innerhalb der Seite schnell zurechtfinden, und genauso schnell finden sie die nächstgelegenen Navigationselemente auf der Seite.

66

|

Kapitel 5: Effektive Stylesheets und Dokumentenstrukturen

Für die Erstellung sinnvoller Navigationselemente gibt es Designtechniken, die den Besuchern helfen können, ihre Ziele schneller zu erreichen – zumindest schrittweise. • Navigationslinks und Stichwortlinks sollten verhältnismäßig groß gestaltet werden. Zumindest sollte dieser Bereich mit display: block definiert und mit zusätzlichen Innenabständen versehen werden, wie in Kapitel 8 erklärt wird. Die gleiche Technik kann die Usability von Submit-Buttons bei Suchfeldern erhöhen. • Menüs mit Links auf zusätzliche Ressourcen, die »aufklappen«, wenn der Mauszeiger sich darüber befindet (z.B. beim Ordner »Programme« im Windows-Start-Menü), sollten möglichst vermieden werden. Sie erfordern ein sehr hohes Maß an feinmotorischer Kontrolle. Microsoft kann sich das erlauben, weil sie auch auf Bildschirme mit geringster Auflösung Rücksicht nehmen müssen. Gleichzeitig bietet Windows den Benutzern aber auch die Möglichkeit, das Start-Menü über die Tastatur zu steuern und Links auf Programme direkt auf dem Desktop anzulegen, die deutlich häufiger benutzt werden. Folgen Sie dieser Desktop-Analogie, und gestalten Sie Ihre Links so, dass sie leicht erkennbar sind. • Die Links vieler Sites werden kleiner dargestellt als der Haupttext; bei manchen Sites wird für diese Links sogar der Kontrast herabgesetzt. Stattdessen sollte jede Anstrengung unternommen werden, die Größe und den Konstrast der wichtigen Links zu erhöhen, ohne dabei jedoch den Hauptinhalt der Seite zu »überfahren«. • Versehen Sie alle Dinge mit aussagekräftigen Beschriftungen. Die Alternative ist das, was der Webexperte Vincent Flanders als »Katze-im-Satz-Navigation« bezeichnet: Sie wissen, dass es da irgendetwas gibt, aber nicht, was es ist. Wollen Sie das Risiko eingehen und womöglich an einem unbekannten Ort landen? • Vermeiden Sie zu kleine input type="text"-Felder bei Such- und allen anderen Formularen. Sind die Felder zu klein, sind die Werte nur noch schwer lesbar. Nur wenige Dinge sind frustrierender als die Unfähigkeit, seine eigenen Eingaben zu lesen! Das soll nicht heißen, dass Texteingabefelder prinzipiell riesig sein müssen, aber ihr Inhalt sollte immerhin gut lesbar sein. • Wird die Identität des aktuellen Dokuments in einem Navigationskontext angezeigt, sollte sie deutlich von ihren Nachbarn unterschieden werden. Nach Möglichkeit sollte das a-Element für die aktuelle Seite aus der Navigation entfernt werden, der Inhalt aber erhalten bleiben.

Links auf das aktuelle Element deaktivieren Eine Deaktivierung des Browserverhaltens für Links ist nicht die richtige Methode, um Benutzern vorzugaukeln, dass ein Dokument keine Links auf sich selbst enthält. Stattdessen können Sie eine ordentliche Suchen-und-Ersetzen-Funktion verwenden, um die a-Tags tatsächlich zu entfernen. Offensichtlich können Sie Links in zwei Schritten entfernen: Erstellen Sie auf jeden Fall zuerst eine entsprechende class-Stildefinition, mit der inaktive Links markiert werden. Hierzu gehört auch, dass Sie die Eigenschaft cursor für den Link

Informationsarchitektur und Usability des Webs

|

67

in einen passenden Wert ändern, wie in Kapitel 8 und auf der Website zu diesem Buch (http://www.htmlcssgoodparts.net) beschrieben wird. Im folgenden Beispiel hat class den Wert selbstLink. Sofern Sie an einem Dokument arbeiten, das mit dem MIME-Typ text/html an den Browser übergeben wird, rufen Sie beim Laden der Seite über den Handler onLoad folgendes JavaScript auf: for (var i = 0; i < document.getElementsByTagName("a").length; i++) { if (document.getElementsByTagName("a")[i].href) { if (document.getElementsByTagName("a")[i].href == document.location.href) { document.getElementsByTagName("a").className = "selbstLink"; document.getElementsByTagName("a")[i].onclick = return false; } } }

Die gleiche Methode zur Zuweisung von class-Werten wird auch bevorzugt, um Benutzer von Eingabefehlern in Formularen zu unterrichten. Aus Sicherheitsgründen kann die Anzeige der Ziel-URIs in der Statusleiste aktueller Browser nicht deaktiviert werden. Daher ist es keine gute Idee, die Benutzerführung nur durch eine Verhaltensänderung der Links ändern zu wollen.

Szenarios und Benutzertests zur Vorhersage von Besucherverhalten Die allgemeine Navigation einer Website gibt die Richtung vor. Was ist aber mit der Standortbestimmung? Typischerweise werden hierfür nur recht einfache Mittel verwendet: • gut sichtbare Seiten- oder Artikelüberschriften • Hervorhebungen in den Navigationselementen, hoffentlich in Kombination mit einem deaktivierten Link • farblich unterschiedliche Hintergründe und Seitenakzente • eindeutige Stile für besuchte Links Wie Sie vielleicht merken, ist die gegenwärtige Praxis kaum geeignet, um Besuchern mitzuteilen, wo innerhalb einer Site sie sich gerade befinden. In der Praxis gibt die Benutzerführung zumindest einen Hinweis darauf, welchen Kontext die aktuelle Seite hat oder ob sich der Besucher seinem Ziel nähert oder sich davon entfernt. Die mangelnde Präzision hat viel mit den fehlenden Grenzen im Web zu tun. Erfahrene Benutzer haben daher nur geringe Erwartungen an die Benutzerführung einer Site. Überlegen Sie, wie ein Orientierungslauf in der wahren Welt funktioniert. Jemand mit einer Karte von entsprechend großem Maßstab und mit guter Sicht, der nötigen Kenntnis seiner unmittelbaren Umgebung, der Fähigkeit, Karten zu lesen, und einem guten Orientierungssinn kann seinen Standpunkt auf wenige Meter genau bestimmen.

68

|

Kapitel 5: Effektive Stylesheets und Dokumentenstrukturen

Das heißt: Um seinen Standort bestimmen zu können, muss man die Beschaffenheit des Geländes kennen und ausreichende detaillierte Grundinformationen besitzen. Dies sind Vorraussetzungen, die für das Überleben in Extremsituationen unbedingt nötig sind. Auf den in diesem Buch besprochenen Websites geht es glücklicherweise nicht ums Überleben, und man kann von seinen Besuchern auch nicht erwarten, die Beschaffenheit des virtuellen Geländes zu kennen. Das heißt, Designer und Gestalter müssen die gleiche Methode anwenden wie Rettungskräfte bei der Suche nach Unglücksopfern: ein eigenes Suchmuster. Im Web werden Aufgaben wie »Suchen« und »Finden« durch Tests des Benutzerverhaltens erledigt. Dies geschieht meist mithilfe von Szenarios oder ausgewachsenen Benutzertests. Bei Szenarios übernehmen die Teammitglieder die Rollen typischer Benutzer und simulieren ihre möglichen Entscheidungen, um bestimmte Rückschlüsse daraus ziehen zu können. Bei Benutzertests müssen »echte« Benutzer mit funktionierenden Prototypen der Website umgehen. Dies ergibt genauere Ergebnisse, erfordert vor der Durchführung des Tests aber auch wesentlich höhere Designanstrengungen. Sowohl Szenarios wie auch Benutzertests verbessern die Effektivität einer eindeutigen Sytematik (Taxonomie) für Ihre Site. Mit einer sinnvollen Systematik hat der Besucher schon nach wenigen Seitenaufrufen ein »inneres Bild« der Struktur Ihrer Website vor Augen.

Taxonomie und Nomenklatur Die Taxonomie ist die Erstellung sogenannter Taxa (strenger und hierarchischer Klassifizierungsmethoden). Als Erstes wurden Taxa von dem schwedischen Naturforscher Carl von Linné verwendet. Er entwickelte ein System zur Einordnung verschiedener Lebewesen, das heutzutage sieben verschiedene Ebenen besitzt. In Tabelle 5-2 sehen Sie diese Ebenen auf menschliche Lebensformen angewendet. Tabelle 5-2: Ein Beispiel für die Taxonomie in der biologischen Klassifizierung Ebene

Nomenklatur

Umgangssprachlich

Reich

Animalia

Tiere

Abteilung

Chordata

Wirbeltiere

Klasse

Mammalia

Säugetiere

Ordnung

Primates

»erster Ordnung«

Familie

Hominidae

»menschenähnliche«

Gattung

Homo

Mensch

Art

sapiens

»wissend«

Informationsarchitektur und Usability des Webs

|

69

Taxa lassen sich auch auf allgemeine Informationen und auf Sammlungen von Fachbegriffen anwenden. Viele Bewohner der Vereinigten Staaten kennen die »Library of Congress Classification« und das »North American Industry Classification System« – beides weithin akzeptierte System zur Organisation von Informationen in einem kompakten hierarchischen System. Nomenklatur lässt sich am einfachsten als »Sammlung von Fachbegriffen« beschreiben. Diese Fachbegriffe dienen einer Gruppe von Benutzern als gemeinsames Vokabular. Man kann sagen, dass die Taxonomie die Nomenklatur organisiert. Allerdings organisiert die Taxonomie auch »unkontrollierte« Vokabulare. (»Kontrolliertes Vokabular« ist ein Synonym für »Nomenklatur« und wird oft von professionellen Informationswissenschaftlern verwendet.) Nehmen Sie beispielsweise die folgenden Begriffe: • Inhalt • Seitenleiste • Titelbild • Schrift • Spacer (Abstandhalter) • Client (Benutzerprogramm) Sie können davon ausgehen, dass die meisten Webentwickler Sie ohne Probleme verstehen, wenn Sie diese Begriffe verwenden. Bei effektiver Verwendung können Taxonomie und Nomenklatur (wenn auch in geringerem Maße) Ihnen die Begriffe zur Verfügung stellen, um einen angemessenen Kontext für Ihre Kaskade zu schaffen. Dies gilt besonders in Bezug auf Flexibilität.

Taxonomie auf die Kaskade anwenden Taxa lassen sich auf zwei verschiedenen Ebenen in Websites integrieren: bezogen auf den Inhalt einer Site und in Bezug auf die Struktur ihrer Markup-Templates. Die Verwendung von Taxa für den Inhalt der Website hat mit den gerade besprochenen Szenarios und Benutzertests zu tun: Anhand von Tests können Sie feststellen, wie eine Site benutzt wird, und damit, wie wichtig die enthaltenen Informationen sind. Stellen Sie sich eine kleine bis mittelgroße Einzelhandelsfirma vor. Ihre Website dient sehr wahrscheinlich den folgenden Zwecken: • Herausfinden der Geschäftsadresse und der Öffnungszeiten • Ermitteln von Telefonnummern und anderen Möglichkeiten, Kontakt zu Mitarbeitern aufzunehmen • Finden von Sonderangeboten und Ausverkäufen • Überprüfen der Verfügbarkeit und Preise für bestimmte Artikel oder Artikelgruppen

70

|

Kapitel 5: Effektive Stylesheets und Dokumentenstrukturen

Wenn ich eine Website für einen Einzelhändler erstelle, empfehle ich folglich die folgenden Kategorien: • Standort(e) • Kontakt • Sonderangebote und Aktionen • Online einkaufen Auf der Startseite versuche ich dann, Informationen aus allen gerade genannten Kategorien zu präsentieren. Hierfür verwende ich folgende Inhalte: • die Straßenadresse und Öffnungszeiten des Geschäfts • die Haupttelefonnummer, die E-Mail-Adresse des Kundendienstes und Kontaktmöglichkeiten über soziale Netzwerke • das wichtigste Sonderangebot und die Gültigkeitsdauer des Angebots • kurze Produktbeschreibungen und »Zum Warenkorb hinzufügen«-Links für die drei bis vier beliebtesten im E-Commerce-Bereich der Site verkauften Artikel Ist das Warenangebot besonders groß, bekommt die sekundäre Navigation ggf. auch Links auf die einzelnen Produktkategorien. Die Seiten der Website befassen sich mit einer der vier genannten Informationskategorien, wobei sie schrittweise immer detaillierter werden. So enthält das Linkziel für »Online einkaufen« beispielsweise eine vollständige Liste der Produktkategorien, während das Linkziel für »Kontakt« eine ausreichend detaillierte Liste der wichtigsten Telefonnummern und anderen Kontaktmöglichkeiten enthält. Jeder Abschnitt dieser Site – und aller anderen gut konzipierten Sites – enthält Hinweise zur Ortsbestimmung. Hieraus ergeben sich die entsprechenden Werte für class und id, die in der Regel für body (oder ein anderes hierarchisch in dessen Nähe befindliches Element) definiert werden, wie hier:

Andere body-Elemente, die die Klasse produkte verwenden, könnten id-Werte wie leer_details, dangast_details etc. definieren. Hierbei handelt es sich um Orte im WeserEms-Gebiet in Norddeutschland. Unterhält der Händler weitere Geschäfte, beispielsweise in einzelnen Stadtteilen, so könnten hier weitere Zwischenebenen verwendet werden. Durch die hier gezeigte Verwendung von class und id für einzelne Seiten können Sie Ihre Selektoren sehr präzise formulieren, was die Erstellung spezieller Akzente z.B. für einzelne Überschriften sehr erleichtert. Zum Beispiel: #dangast_details h2 { background-image: url(/images/dangast_ueberschrift.gif); }

Oder stellen Sie sich vor, was man durch die Methode mit dem Navigationslayout anstellen kann, weil sich die Anzahl der Einträge für Unterebenen sehr wahrscheinlich unterscheidet:

Informationsarchitektur und Usability des Webs

|

71

/* #nav_onlineshop entha ¨lt zwei Zeilen mit Links, #nav_filialen nur eine */ .stores #nav #nav_filialen { height: 1.5em; padding-bottom: 1.5em; } /* nicht beno¨tigte Unterebenen VERSTECKEN */ .filialen #nav #nav_kontakt, .filialen #nav #nav_sonderangebote, .filialen #nav #nav_onlineshop { display: none; }

Das vorige Beispiel ist auch deshalb interessant, weil es zeigt, wie die Elemente in der Seite verschachtelt sind:

...

• Unsere Filialen
  • Oldenburg
  • Dangast
  ...
...

Es gibt genügend Gründe, die inhaltliche Struktur Ihrer Site in die Kaskade einzubeziehen. Auf Seitenebene sind Taxonomie und Nomenklatur etwas subjektiver: Ihre #seitenleiste heißt woanders möglicherweise #randbereich. Solange Sie bei der Benennung Ihrer Elemente konsistent bleiben, kann eine Website durchaus ihre eigenen Taxa und ihre eigene Nomenklatur für Funktionen, Beziehungen und typische Verschachtelungsebenen verwenden. Meine eigene Methode zur Definition einer Dokumentenstruktur finden Sie überall in diesem Buch, wobei unterschiedliche Projekte andere Anforderungen besitzen können, auf die entsprechend eingegangen werden muss.

Die nötige Feinheit auch auf größeren Sites erreichen Besonders bei großen Websites oder solchen, die von größeren Frmen betrieben werden, ist es (aufgrund strengerer Richtlinien) oft nicht möglich, ids im hier gezeigten Umfang zu verwenden. In vielen Fällen könnten ids durch class-Definitionen ersetzt werden. In anderen Situationen haben Gestalter diese Möglichkeit nicht. Diese Beschränkungen haben oft weniger komplexe Designs zur Folge. Müssen Sie trotz der Beschränkungen ein bestimmtes Design umsetzen, können Sie die Stile möglicherweise mithilfe eines JavaScript-Frameworks wie jQuery trotzdem definieren.

72

|

Kapitel 5: Effektive Stylesheets und Dokumentenstrukturen

Neue Strukturelemente (HTML 5) Neben dem nav-Element, das in Kapitel 7 besprochen wird, gibt es Vorschläge für eine Reihe weiterer Strukturelemente in HTML 5: • section • article • header • footer • aside • figure Während dieses Buch geschrieben wurde, besaßen die aktuellen Browser noch keine native Unterstützung für diese Elemente. Allerdings ist es nicht besonders schwer, die Unterstützung umzusetzen, da für diese Elemente keine speziellen Darstellungs- oder Verarbeitungsanweisungen nötig sind. Aus diesem Grund werden diese Elemente auch nur wenig Einfluss auf die Endbenutzer haben. Ihr primärer Nutzen besteht darin, Entwicklern leichteren Zugriff auf häufig verwendete Teile einer typischen Seite zu geben. Es ist im Moment auch noch nicht klar, welche dieser vorgeschlagenen Strukturelemente nach dem Durchlaufen des Standardisierungsprozesses ihren Weg in die endgültige HTML 5-Spezifikation finden. So ist man sich allgemein einig darüber, dass das Element section eine sinnvolle Erweiterung der Sprache ist. Deutlich weniger Einigkeit herrscht jedoch über die Elemente article und aside. Über die Elemente header und footer ist man sich ebenfalls einigermaßen einig, jedoch nicht über ihre Verwendung innerhalb von section-Elementen. Der aktuelle Entwurf der HTML 5-Spezifikation erlaubt header und footer als Kindelemente von section, allerdings sind Seitenabschnitte mit eigenen Kopfund Fußteilen im Moment noch nicht sehr verbreitet.

Informationsarchitektur und Usability des Webs

|

73

KAPITEL 6

Lösungen für das CSS-Layout-Puzzle

Wenn Sie Seitenlayouts mit CSS erstellen, besteht die größte Herausforderung darin, die einzelnen Layout-Bestandteile genau an der richtigen Stelle zu platzieren. Hierfür gibt es in CSS drei Grundwerkzeuge: Positionierung, float und width/margin. Allerdings müssen Sie, um diese Werkzeuge verwenden zu können, die zugrunde liegenden Konzepte verstanden haben – und das kann recht schwierig sein.

Das CSS-Boxmodell und die Größe von Elementen Stellt der Browser Blockelemente wie div oder p dar, besteht jedes Element, wie in Abbildung 6-1 gezeigt, aus vier Grundbausteinen (von innen nach außen): Inhalt, Innenabstände, Rahmen und Außenabstände. In aktuellen Implementierungen des CSS-Boxmodells werden die Ausmaße der Box berechnet, indem die Maße dreier der vier Bestandteile addiert werden: die Werte für Breite (width) bzw. Höhe (height) des Inhalts, die Werte für den Innenabstand (padding) sowie die Dicke eines möglichen Rahmens (border). Außenabstände spielen hier ebenfalls eine Rolle. Dabei spielen jedoch auch die Außenabstände benachbarter Elemente eine Rolle. Deshalb gehen wir darauf etwas später ein. margin border padding Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae volutpat metus. Suspendisse eu pharetra est. Suspendisse non lectus elit, faucibus aliquet nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec erat velit, elementum at suscipit a, aliquet nec ante. Maecenas cursus lobortis massa, interdume erat.

Abbildung 6-1: Die berechnete Breite und Höhe eines Elements basiert auf vier Bestandteilen: Inhalt, Innenabstände (padding), Rahmen (border) und Außenabstände (margin)

|

75

Zu dieser Definition des Layoutverhaltens von Browsern gibt es zwei Ausnahmen: Zurücksetzen des Darstellungsmodus und die Verwendung von auto-Werten für Inhaltsboxen.

Quirks Mode und Strict Mode Webbrowser verwenden typischerweise einen von zwei Darstellungsmodi: den Quirks Mode (»Mackenmodus«) und den Strict Mode (strikter Modus). Welcher von beiden aktiviert wird, hängt davon ab, welche DOCTYPE-Deklaration verwendet wird (oder auch nicht). Eine allgemeine Beschreibung finden Sie in Kapitel 2 und auf der Website zu diesem Buch (http://www.htmlcssgoodparts.net). Anders als im strikten Modus und in der Definition des CSS 2.1-Boxmodells wird die Größe einer Box im Quirks Mode nicht additiv berechnet. Stattdessen werden die für width und height angegebenen Werte verwendet, um die Ausmaße der Box zu ermitteln. Die Werte der übrigen Bestandteile der Box werden von diesen Werten subtrahiert. In CSS 3 lässt sich dieses Verhalten mit der Eigenschaft box-sizing genauer steuern. Mögliche Werte sind content-box (additive Methode) und border-box (substraktive Methode). Die Internet Explorer-Versionen vor IE6 arbeiten ausschließlich im Quirks Mode.

auto-Werte Der Standardwert für die CSS-Eigenschaften width und height ist auto. Wird dieser Wert (implizit oder explit) angegeben, berechnet der Browser den tatsächlichen Wert für width eines Elements entsprechend der Breite des umgebenden Elements. Hat height den Wert auto, so wird die Höhe des Elements basierend auf der Höhe seines Inhalts berechnet. Das geschieht allerdings nur, wenn der Wert der Eigenschaft float für das Element den Wert none (Standardwert) hat. Wurden für ein Element mit der Definition width: auto Rahmen oder Innenabstände definiert, werden deren Werte vom berechneten width-Wert für den Inhalt des Elements subtrahiert. Das Gleiche gilt für eventuelle margin-Werte, die nicht mit den margin-Werten anderer Elemente zusammengefasst werden. Weisen Sie der Eigenschaft width für den Inhalt eines Blockelements dagegen einen ausdrücklichen Wert zu (z.B. 300px) und geben Sie dem linken und rechten Außenabstand den Wert auto (margin-left: auto; margin-right: auto;), so wird das Element innerhalb des umgebenden Elements horizontal zentriert, wie in Abbildung 6-2 gezeigt.

76

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

432px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae volutpat metus. Suspendisse eu pharetra est Suspendisse non lectus elit, faucibus aliquet nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, velevet per inceptos himenaeos. Donec erat velit, elementum at suscipit roof a, meep aliquet nec ante. Maecenas cursus lobortis massa, interdume erat. p { width: 424px; border: 4px solid black; margin: auto }

720px

Abbildung 6-2: Durch die automatische Berechnung der Außenabstände kann ein Blockelement zentriert werden. In diesem Abschnitt sprechen wir gelegentlich von »berechneten Werten« für width und height. Dies sind die tatsächlichen Ausmaße des Elements nach dem Rendern der Seite im Browser. Weitere Informationen hierzu finden Sie auch in Kapitel 14.

Die Eigenschaft »overflow« Ist ein Element schmaler als der umgebende Block, kann es, unabhängig von seiner angegebenen oder berechneten Breite, horizontal zentriert werden. Eine entsprechende vertikale Zentrierung ist dagegen nicht möglich. Die tatsächliche Höhe des Elements und des ihn umgebenden Blocks müssen bekannt sein, bevor eine vertikale Zentrierung per CSS möglich ist, und auch dann ist sie nur explizit möglich. Die Definition height: auto (als angegebener oder berechneter Wert) weist den Browser an, die Höhe der Box an die Höhe ihres Inhalts anzupassen, aber nicht weiter. Da es so gut wie unmöglich ist, die tatsächliche Höhe von Text zu bestimmen, ist eine Erweiterung der Fähigkeiten von margin: auto für die y-Achse nicht sehr sinnvoll. Auch wenn eine vertikale Zentrierung von Inhalten nicht sehr einfach ist, gibt es immerhin eine Möglichkeit, ein Element so weit auszudehnen, dass es die gesamte Höhe seines umgebenden Blocks ausfüllt. Hier verwendet man die Eigenschaft overflow.

auto-Werte

|

77

Abbildung 6-3: Für die Eigenschaft »overflow« gibt es vier mögliche Werte.

Mit der Eigenschaft overflow kann festgelegt werden, wie Inhalte dargestellt werden sollen, die größer sind als ihr umgebendes Element. Tatsächlich ist overflow die erste hier erwähnte Eigenschaft, bei der sich Blockelemente überschneiden können. So können Gestalter sich über die im Abschnitt »Darstellungsrollen« auf Seite 85 beschriebenen Regeln für Blockelemente hinwegsetzen. Die vier in Abbildung 6-3 gezeigten Werte für overflow lauten: visible (Standardwert)

Sämtlicher Inhalt wird – unabhängig von der Größe des Elements – dargestellt. Haben die Maßangaben des Elements und seines Inhalts einen anderen Wert als auto, läuft der Inhalt über die Grenzen des Elements hinaus und überschneidet sich

78

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

möglicherweise mit dem Inhalt angrenzender Elemente. Dabei wird weder die Größe des enthaltenden Elements noch der Fluss der angrenzenden Elemente verändert. hidden

Ist das Element zu klein, um den gesamten Inhalt darzustellen, werden die »überlaufenden« Teile des Inhalts abgeschnitten; das Element behält seine Größe. scroll

Das Element erhält vertikale und horizontale Scrollbalken. Die Kontrollelemente (Schieber, Rollpfeile etc.) werden bei Bedarf eingeblendet. Das Element behält die angegebene Größe. auto (oftmals der Browser-Standardwert für html oder body)

Die angegebene Größe des Elements wird beibehalten. Das Element wird nur bei Bedarf mit horizontalen bzw. vertikalen Scrollbalken versehen. Die Scrollbalken vergrößern den Inhaltsbereich nicht, sondern werden innerhalb der angegebenen Dimensionen angezeigt. Der letzte Wert besitzt eine etwas versteckte, aber möglicherweise hilfreiche Fähigkeit: Wurde für ein Element mit dem overflow-Wert auto ein kleiner Prozentwert für die Eigenschaft height festgelegt (z.B. height: 1%;), so dehnt sich das Element, inklusive eventueller Außenabstände, bis zur berechneten Höhe des Inhalts aus. Dieses Verhalten funktioniert allerdings nur mit height, nicht mit width. Außerdem muss height für das umgebende Element (z.B. body oder div) als Prozentwert definiert werden oder den Standardwert auto haben. Seltener haben die Werte für overflow auch Auswirkungen auf die Breite von Blockelementen, weil der berechnete Wert für height: auto nur selten vorhersehbar ist. In manchen Fällen sind die Auswirkungen von overflow jedoch auch hier zu sehen, zum Beispiel: • bei unverhältnismäßig langen Textteilen, die von nicht-umbrechenden Leerzeichen ( ), einem umgebenden pre-Element oder einem entsprechenden Wert für die Eigenschaft white-space zusammengehalten werden • beim Einbinden ersetzter Elemente (siehe Kapitel 11), besonders von Bildern • beim unerwarteten Einfügen eines Kindelements, dessen berechneter oder tatsächlicher Wert für width größer ist als der des umgebenden Elements. Dieses Szenario kann besonders bei komplexen Webapplikationen oder schlecht geschriebenem CSS-Code öfter vorkommen, als man denkt.

Länge und Breite für Elemente anstelle expliziter Werte nur begrenzen Gelegentlich soll ein Element den gesamten verfügbaren Platz ausfüllen, aber nur bis zu einer bestimmten Obergrenze. In anderen Fällen soll eine bestimmte Höhe oder Breite verwendet werden, der gewünschte Inhalt soll aber auf jeden Fall darin Platz finden. Zum Beisepiel: .container_fuer_artikel { width: 80%; max-width: 50em; margin: auto; } .objekt_in_seitenleiste { float: right; width: 16.667%; min-width: 288px; }

auto-Werte

|

79

Die erste Regel gilt für ein Szenario, in dem links und rechts vom Element noch Platz bleiben soll. Gleichzeitig soll das Element nicht zu breit werden, damit der Inhalt leicht lesbar bleibt (siehe Kapitel 12). In der zweiten Regel wird ein Sechstel der Breite des umgebenden Elements reserviert. Hier kann auch ein Bild enthalten sein, das gemäß der hauseigenen Stilvorgaben bearbeitet wurde. Daher muss hier immer auch eine Minimalgröße angegeben werden, damit das Bild ganz dargestellt werden kann. Beachten Sie, dass in beiden Beispielen die beschränkende Eigenschaft (max-width bzw. min-width) nach der allgemeinen Regel definiert wurde. Schließlich besteht die Beziehung zwischen Quellcode-Reihenfolge und Priorität nicht nur im Dokument selbst, sondern auch innerhalb der Regeln.

Mit Unwägbarkeiten umgehen Normalerweise wird ein Gestalter die Eigenschaft overflow in mehrspaltigen Designs einsetzen, bei denen der Container für eine Spalte (im Abschnitt »Mehrspaltige Layouts implementieren« auf Seite 91) Eigenschaften einsetzt, die zur Steuerung der Darstellung von Hintergründen oder der Box dienen (im Abschnitt »Rahmen, Innen- und Außenabstände« auf Seite 81). Es gibt jedoch eine Reihe von Situationen, in denen die genaue Größe des Inhalts nicht vorhergesagt werden kann. Hier kann die Eigenschaft overflow nützlich sein. Verhindern von Pannen bei statischen Layouts Hat ein Layout eine feste Größe (i.d.R. durch Pixelwerte definiert, wie im Abschnitt »Medienübergreifende Längen- und Maßeinheiten« auf Seite 34 beschrieben), kann es zu Problemen kommen, wenn der Benutzer die Schriftgröße verändert. Zwar kommt das nicht sehr häufig vor, weil nur wenige Nutzer diese Option kennen und inzwischen die meisten Browser über eine Zoom-Funktion verfügen. Bei Problemen kann ein erfahrener Gestalter die Situation aber trotzdem schnell in den Griff bekommen. Am besten verwendet man dann ein Raster aus Hilfslinien für das Layout und keine absoluten Längen- und Höhenangaben. Ist das nicht möglich, kann die Regel overflow: hidden hier sehr hilfreich sein. Stark einengende Layouts von Content-Management-Systemen (CMS) mit zu freizügigen Inhaltsbegrenzungen Angenommen, Sie haben ein Objekt mit impliziten Größenbeschränkungen, beispielsweise einen Werbetext oder ein Feld in einer Seitenleiste. Der Inhalt benötigt mehr Platz, als im ursprünglichen Design vorgesehen war. Für diese Elemente kann die Verwendung von overflow: hidden dabei helfen, eine Missachtung der Inhaltsrichtlinien der Site zu vermeiden. (Diese Situationen sind normalerweise das Ergebnis mangelnder Disziplin beim Designprozess.) Layouts von Formularen vereinheitlichen Bei der Anordnung von Formularelementen und ihren Beschriftungen kann es leicht passieren, dass die Definitionen für das umgebende Element von den enthaltenen

80

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

Kindelementen »überfahren« werden. Durch die weiter oben beschriebene auto/ 1%-Methode sorgen Sie dafür, dass die Formulare einer Site dem Hilfslinienraster der Site folgen. Den Platzbedarf von Ajax-basierten Applikationsschnittstellen beschränken Wenn Benutzer in einer Webapplikation Lese- und Aktualisierungsfunktionen durchführen, kann es passieren, dass die nutzergenerierten Daten (besonders Bilder) wim wahrsten Sinne des Wortes »den Rahmen sprengen«. In diesen Fällen kann die Definition von overflow: auto verhindern helfen, dass zu große Inhalte das Design durcheinanderbringen. Aktuelle Browser besitzen außerdem Unterstützung für die Eigenschaften overflow-x und overflow-y, die in CSS 3 spezifiziert werden. Diese ändern das Darstellungsverhalten nur für die genannte Achse. Die Definition unterschiedlicher Werte für overflow-x und overflow-y bringt aber nicht unbedingt die erwarteten Ergebnisse. Ein Testszenario für diese Eigenschaften finden Sie auf der Website zu diesem Buch. Die bei der Verwendung von scroll oder auto erzeugten Scrollbalken gehören übrigens zum Inhaltsbereich des Elements. Dieser wird also nicht vergrößert. Das kann zur Folge haben, dass zwei Scrollbalken dargestellt werden, wo eigentlich nur einer vorgesehen war.

Rahmen, Innen- und Außenabstände Die Entwürfe für Webapplikationen können sehr detailliert sein. Oft ist vertraglich eine pixelgenaue Reproduktion der geplanten Layouts festgelegt, oder zumindest eine pixelgenaue Konsistenz. Die Größenkontrolle von Elementen ist nur ein Teil der Lösung. Die Kontrolle von Leerraum und Rahmen (border) ist mindestens genauso wichtig. Bei der Benutzung der hierfür nötigen CSS-Eigenschaften gibt es einige Dinge zu beachten.

Negative Außenabstände Abgesehen von den Eigenschaftswerten, mit denen die Positionierung von Elementen gesteuert wird, können als einzige die Außenabstände (margin) auch negative Werte haben. Wird einem Element ein negativer Außenabstand zugewiesen, überschneidet sich dessen berechnete Box möglicherweise mit der eines benachbarten Elements. Wie der Name schon sagt, verringern negative Außenabstände den Leerraum in einem Layout, anstatt ihn zu vergrößern. Das ist wichtiger, als es auf den ersten Blick erscheint. Nehmen Sie beispielsweise eine Überschrift, der etwas Leerraum und eine horizontale Trennlinie folgt. Sollen neben der Überschrift zusätzliche Metadaten (z.B. ein Erstellungsdatum oder der Name des Autors in einem Blog) angezeigt werden, folgen die Metadaten im Markup vermutlich unmittelbar auf die Überschrift. Danach kommt meist der eigentliche Artikel, wie in Abbildung 6-4 gezeigt.

Rahmen, Innen- und Außenabstände

|

81

Abbildung 6-4: Eine Kombination aus Überschrift und Metadaten unter Verwendung negativer Außenabstände

Das geringste Markup benötigen Sie, wenn Sie für die Überschrift einen negativen Wert für margin-bottom oder einen negativen margin-top-Wert für die Metadaten festlegen. Auf diese Weise ist sichergestellt, dass die Metadaten unterhalb der Überschrift, aber oberhalb der Trennlinie erscheinen. Noch häufiger ist die Verwendung negativer Außenabstände bei den Fußteilen einer Site. Soll der Fußteil im Hauptteil eines zweispaltigen Layouts zentriert erscheinen und nicht als Teil des ganzen Darstellungsbereichs, so muss seine Definition am Ende des Dokument-Containers platziert werden. Um dies zu erreichen, muss für die Seitenleiste ein negativer Wert für margin-bottom definiert werden, damit die scheinbare Unterkante der Seitenleiste bündig mit der Oberkante der Fußzeile abschließt. Der Nutzen dieser Technik scheint begrenzt. Um die besten Ergebnisse aus der Kombination von Quellcode-Reihenfolge und dem Vertrauen auf das Gesamtkonzept zu erzielen, werden Sie negative Außenabstände vermutlich häufiger benutzen, als Sie sich jetzt denken.

Zusammengefasste Außenabstände HTML-Elemente besitzen standardmäßige Darstellungsrollen. So sind z.B. div, p und die verschiedenen Überschriften (h1, h2 usw.) sogenannte Blockelemente. 82

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

Stehen zwei Blockelemente vom gleichen Typ (div, p, etc.) direkt übereinander, werden ihre einander zugewandten vertikalen Außenabstände zusammengefasst. Dieses Verhalten ist bei Absätzen (p) am deutlichsten sichtbar, wie das folgende Beispiel zeigt: p p:first-child p:last-child p + p

{ { { {

margin-top: 1.25em; margin-bottom: 1.25em; } margin-top: 0; } margin-bottom: 0; } margin-top: 0; }

Die letze Regel soll das Beispiel nur untermauern. In der Praxis erkennt der Browser zwei aufeinanderfolgende Absätze als Blockelemente vom gleichen Typ und fast ihre Außenabstände standardmäßig zusammen. Bei den hier gezeigten, aufeinanderfolgenden Absätzen beträgt der berechnete Außenabstand 1,25 em-Einheiten (d.h. die übliche Höhe einer Zeile im Haupttext). Ohne die Zusammenfassung betrüge der Abstand nun 2,5 em-Einheiten. Das würde die Leser vermutlich verwirren und die Lesbarkeit des Textes verringern. Werden für den oberen und den unteren Außenabstand verschiedene Werte definiert, z.B. margin-top: 1.25em; und margin-bottom: 2em;, so wird der größere der beiden Werte verwendet. Der zusammengefasste Außenabstand beider Absätze wäre nun 2 em-Einheiten groß. Das umgekehrte Verhalten kann man testen, indem man verschiedene Blockelemente aufeinander folgen lässt, z.B. p – div – p. In diesem Fall bleiben die definierten oberen und unteren Außenabstände der Absätze erhalten, selbst wenn man die Elemente vertauscht und obwohl div-Elemente standardmäßig keinen Außenabstand besitzen. Die in der HTML 4-Spezifikation empfohlenen Darstellungsrollen finden Sie in den Referenztabellen auf der Website zu diesem Buch.

Rahmen Für die Beschreibung von Rahmen gibt es eine außergewöhnlich große Zahl an Eigenschaften (insgesamt 20). Rahmen lassen sich nur selten vermeiden und haben natürlich ihre eigenen Macken. Das bezieht sich weniger auf die mit Rahmen möglichen Darstellungseffekte, sondern vielmehr auf ihre Auswirkungen auf das Layout. Dies gilt besonders für proportionale (»flüssige«) Layouts. Zu Schwierigkeiten kommt es besonders dann, wenn Rahmen auf die Beschränkungen des sogenannten »strikten« Darstellungsmodus treffen. Hierbei müssen Trennlinien mit fester Breite für sichtbare Außenabstände von Elementen mit proportionalen Größen definiert werden. Stellen Sie sich drei Designelemente vor, die von links nach rechts angeordnet sind und jeweils ein Drittel der verfügbaren Fläche einnehmen: #werbung .promo { float: left; width: 32%; height: 11.417em; margin: 3.125%; }

Rahmen, Innen- und Außenabstände

|

83

Sofern es keine Darstellungsprobleme und Rundungsfehler gibt, verteilt die oben stehende Regel drei gleich breite Elemente von links nach rechts auf der Seite. Die Außenabstände betragen jeweils 1% der Breite von #werbung. Was passiert aber, wenn diese Elemente mit einem ein Pixel breiten Rahmen versehen werden sollen (z.B.: border: 1px solid #000)? Die zusätzlichen sechs Pixel für #werbung sorgen jetzt dafür, dass das letzte Element unter seine Vorgänger verschoben wird. Die Lösung für unser Layoutproblem wird dadurch noch schwerer. Würde die Breite von #werbung sich immer in Pixeln ausdrücken lassen, könnte man einfach die Werte für width und margin entsprechend in Pixeln neu formulieren und dann die Rahmen hinzufügen. Wurde #werbung dagegen proportional definiert und ist die Breite nicht statisch, hat der Gestalter zwei Optionen: Sich auf die inneren Elemente verlassen Hierbei enthalten die .promo-Elemente wahrscheinlich eine Überschrift und ein weiteres Element für den Haupttext. Wenn man die vertikalen Innen- und Außenabstände dieser beiden inneren Elemente entsprechend anpasst, haben ihre Inhaltsbereiche zusammen die gleiche Höhe (minus zwei Pixel) wie die sie umgebenden Elemente. Jetzt kann jedem Element ein seitlicher Rahmen von einem Pixel Breite zugewiesen werden. Hintergrundbilder verwenden Anstatt die Rahmen mit der CSS-Eigenschaft border zu definieren, können die Trennlinien auch als Hintergrundbilder definiert werden, die nach Bedarf in .promo und dessen Kindelementen platziert werden. Eine detaillierte Beschreibung dieser Technik finden Sie in Kapitel 9.

Innenabstände Der größte designerische Wert von Innenabständen (padding) besteht in der Möglichkeit, Leerraum zu schaffen – Bereiche, in denen nur der Hintergrund (falls vorhanden) eines Elements sichtbar ist. Abgesehen von Fällen mit gemischten Längeneinheiten, wie zuvor am Fall der Rahmen beschrieben, gibt es nur selten Probleme mit den Eigenschaften für Innenabstände. Innenabstände haben aber noch einen anderen Vorteil: Sie werden auch bei aneinandergrenzenden Elementboxen niemals zusammengefasst. Aus diesem Grund werden für Layoutobjekte, z.B. Spalten, Innenabstände definiert, obwohl die Verwendung von Außenabständen naheliegender wäre. Gerade bei komplexen Layouts kann man sich die Auswirkungen von Eigenschaften besser vorstellen, wenn diese nicht miteinander interagieren.

Das Box-Verhalten der Wurzelelemente des Dokuments Die Box-Eigenschaften für den Darstellungsbereich des Browsers und das body-Element verhalten sich anders als die übrigen Elemente, besonders, wenn die Dokumente als XML übergeben werden. 84

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

Standardmäßig umgeben die Browser Dokumente, die als text/html ausgeliefert werden, mit einem Leerraum von 10 Pixeln Breite. Dieser wird in fast allen Fällen als Wert der Eigenschaft margin für das body-Element definiert. In aktuellen Browsern ist es außerdem möglich, Box-Eigenschaften nicht nur für body, sondern auch für das Wurzelelement html zu definieren. Oft setzen Gestalter diese Werte deshalb wie folgt zurück: html, body { margin: 0; padding: 0; }

Abgesehen von solchen »Resets«, sollte man bei der Definition von Werten für die Box von body und html sehr vorsichtig vorgehen bzw. sie aus folgenden Gründen möglichst ganz vermeiden: • Box-Werte für das html-Element werden vom Internet Explorer 6 komplett ignoriert. • Eine Änderung der Box-Eigenschaften für das body-Element hat keine Auswirkungen auf die Hintergrundfarben und -bilder des Dokuments. Diese werden immer im Kontext des gesamten Darstellungsbereichs angewandt. • Änderungen der Box-Eigenschaften für das html-Element verändern die Positionierung des body-Elements, was in der Folge auch die Platzierung der enthaltenen Elemente durcheinanderbringen kann.

Längenangaben für Box-Eigenschaften und Prozentwerte Wenn Sie für eine beliebige Box-Eigenschaft (außer height) einen Prozentwert verwenden, wird das Ergebnis proportional zur berechneten Breite des Elements ermittelt (oder des Elternelements, sofern es um width geht). Bei den Werten für height ist die Sache etwas schwieriger. In Prozent angegebene Werte beziehen sich auf die Höhe des umgebenden Blocks. Hierfür muss mindestens eines der Vorfahren-Elemente eine explizite Höhe aufweisen, ansonsten wird der Standardwert auto verwendet.

Darstellungsrollen Wie Sie in Abbildung 6-5 sehen, gibt es drei grundsätzliche Arten, ein Element im Fluss des Dokuments darzustellen (sowie eine Reihe von Sonderfällen, auf die wir an geeigneter Stelle eingehen werden). Diese in der jeweiligen HTML-Spezifikation für jedes Element definierte Darstellungsrolle wird über einen Wert der CSS-Eigenschaft display gesteuert. Die drei wichtigsten und häufigsten Werte sind: inline, block und inline-block.

Darstellungsrollen

|

85

Inline

Block

Inline-Block

Abbildung 6-5: Die drei grundsätzlichen Darstellungsrollen sind »inline«, »block« und »inline-block«.

Das Verhalten der Elemente im Fluss des Dokuments kann zudem über die Eigenschaften float und/oder position beeinflusst oder auch negiert werden.

Inline-Elemente Inline-Elemente, wie z.B. strong werden wie normaler Text dargestellt. Inline-Elemente haben die gleiche Grundlinie wie der sie umgebende Text, Zeilenumbrüche werden bei Bedarf automatisch eingefügt. In aktuellen Browsern ist es möglich, eigene Rahmen, Innen- und Außenabstände für Inline-Elemente zu definieren. Diese Werte haben aber keinen Einfluss auf die umliegenden Inhalte. Für Inline-Elemente können nicht alle CSS-Eigenschaften verwendet werden, die für Block-Elemente möglich sind. Sogenannter anonymer Text, der nicht in Inline-Elementen enthalten ist, verhält sich wie Inline-Inhalt, kann in einem Stylesheet aber nur über das Elternelement angesprochen werden.

Block-Elemente Für Standard-Block-Elemente gelten vier einfache Regeln: 1. Block-Elemente füllen den gesamten horizontalen Raum des umgebenden Elements. 2. Block-Elemente überschneiden sich nicht, außer durch Elemente, die sie selbst enthalten. 3. Der Inhalt eines Block-Elements darf nur aus anderen Block-Elementen, Text, Inlineund Inline-Block-Elementen bestehen. 4. Für Block-Elemente können alle CSS-Eigenschaften angewandt werden. Mit der vierten Regel ist es möglich, absichtlich die beiden ersten Regeln zu umgehen.

86

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

In der dritten Regel sehen wir die Möglichkeit »anonymer« Inhaltsboxen, durch die Teile des Inhalts sich wie Block-Elemente verhalten können, ohne dabei für CSS zugänglich zu sein. Angenommen, Sie haben folgendes Quellcode-Fragment:



Lorem ipsum dolor sit amet,

Consectetur adipiscing elit.

In diesem Fall empfiehlt es sich, die Passage außerhalb des Absatzes zu »reparieren«, indem sie explizit in einem Block-Element platziert wird, wodurch man vollen Zugriff per CSS erhält. Für eingebettete Inhalte ist dieses Vorgehen nicht nötig, es sei denn, die Darstellung soll für vollkommen beliebige Stellen im Dokument angepasst werden.

Inline-Block-Elemente Viele Inline-Block-Elemente werden in den technischen Dokumenten des W3C auch als »ersetzte« Elemente bezeichnet. Dieser Begriff wurde gewählt, weil diese Elemente oft erst während der Darstellung ihren tatsächlichen Inhalt, z.B. Bilder, Formularelemente und andere Objekte erhalten, die normalerweise mithilfe des Betriebssystems dargestellt werden. Inline-Block-Elemente haben das gleiche Flussverhalten wie Inline-Elemente. Sie werden also nebeneinander auf einer gemeinsamen Grundlinie dargestellt. Leerraum um die und innerhalb der Elemente wird, Inline-Elementen entsprechend, im Darstellungsbereich des Browsers dargestellt. Trotz des Flussverhaltens kann die gesamte Bandbreite der CSSEigenschaften für Block-Elemente verwendet werden. Die Eigenarten beim Flussverhalten von Inline-Block-Elementen werden im folgenden Abschnitt zur Eigenschaft display besprochen.

Das Flussverhalten eines Elements mit »display« ändern Mithilfe der Werte für die CSS-Eigenschaft display können Sie die Standard-Darstellungsrolle eines Elements verändern und damit das Flussverhalten nach Bedarf anpassen. Hiermit lässt sich eine Reihe beliebter Effekte erzielen, wie auf der Website zu diesem Buch dokumentiert ist, z.B.: • Primäre Navigationslinks auf kommerziellen Websites werden oft horizontal angeordnet. Dies geschieht durch die Änderung der Darstellungsrolle für Listeneinträge in block und eine Reihe zusätzlicher Eigenschaften, speziell float. (Dies beseitigt außerdem eine Unklarheit in den HTML-Dokumenttyp-Definitionen.) Sollen die Navigationslinks die gleiche oder eine statische Größe haben, so ist diese Methode, zusammen mit der Definition display: block für Hyperlinks, der Schreibweise #navigation li { display: inline } vorzuziehen.

Das Flussverhalten eines Elements mit »display« ändern

|

87

• Sobald die Links als Block-Elemente definiert sind, können Sie die Breite und Höhe per width bzw. height beliebig anpassen, was die Darstelung innerhalb von WebApplikationen deutlich vereinfacht. Außerdem kann mit dieser Methode der anklickbare Bereich der Links erweitert werden. Dies entspricht der Anwendung eines Prinzips der Mensch-Computer-Interaktion (HCI), das als »Fitt’s Law« bekannt ist: Je größer ein Objekt der Schnittstelle ist, desto leichter lässt es sich mit einem Zeigegerät (Maus, Trackpad etc.) aktivieren. • Die Art, wie sich geordnete und ungeordnete Listen zu ihren Nachbarn verhalten, kann geändert werden. Dadurch können Listeneinträge auch in anderen Inhaltsbereichen aufeinander folgend dargestellt werden. • Ändert man den display-Wert für Formularelemente in block, ist es möglich, sie auf einem vorhersagbaren Raster anzuordnen. • In den seltenen Fällen, in denen ein Element nicht komplett aus der Seite entfernt werden kann, ohne dass die Lesbarkeit der Quellcode-Formatierung leidet, kann die Regel display: none; helfen, Schablonen zu vereinheitlichen. • Einer Reihe ähnlicher Textfragmente oder anderer Inline-Elemente, die entlang einer gemeinsamen Grundlinie angeordnet werden sollen, kann der display-Wert inlineblock zugewiesen werden. Dies hat gleich zwei Vorteile für den Gestalter: eine gemeinsame Grundlinie und Zugriff auf sämtliche CSS-Layout-Eigenschaften.

Die Eigenschaft »display« Die wichtigsten Details zur Eigenschaft display stehen im Zusammenhang mit dem Wert none: • Von grafischen Benutzerprogrammen werden Elemente mit der Definition display: none so behandelt, als existierten sie nicht. • Die durch die oben genannte Regel verursachte »Unsichtbarkeit« wird auch von Hilfsgeräten oder -programmen (Bildschirmleseprogrammen, Braille-Zeilen etc.) umgesetzt. Auch bei der Verwendung des Wertes inline-block können unerwartete Ergebnisse auftreten. Da Elemente mit dieser Darstellungsrolle im Dokumentenfluss wie Inline-Elemente behandelt werden, werden Leerzeichen literal behandelt. Das heißt, es gibt keine Möglichkeit, Elemente vom Typ inline-block bündig mit ihren inline-Nacharn anzuordnen, ohne Änderungen am Markup vorzunehmen. Solche Anpassungen würden aber die in den Kapiteln 2 und 3 besprochene Trennung von Markup und Präsentationsebene verletzen. Zusätzlich zur Darstellung von Leerzeichen im Quellcode kann das Inline-Verhalten von inline-block-Elementen im Dokumentenfluss dazu führen, dass »weiche« Zeilenumbrüche in den Inhalt eingefügt werden. Das kann passieren, wenn diese Elemente eine nicht festgelegte Breite haben oder die Textgröße eines statischen Layouts verändert wird. Außerdem wird display: inline-block von älteren Browsern nur uneinheitlich (oder auch gar nicht) unterstützt.

88

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

Die Eigenschaften »float« und »clear« Der Haupteffekt der Eigenchaft float könnte nicht leichter zu erklären sein: Wird für ein Element die Definition float: left bzw. float: right verwendet, wird es an den linken bzw. rechten Rand des umgebenden Elements verschoben. Gleichzeitig wird sein ursprünglicher Platz freigegeben, und der folgende Inhalt umfließt das Element (den Float), anstatt darunter dargestellt zu werden. Die Eigenschaft clear verhindert dagegen das Umfließen eines Floats, wie in Abbildung 6-6 gezeigt.

1 2

3

Abbildung 6-6: Das Verhalten der Eigenschaften »float« und »clear«. (1): »float« hat den Wert »left«, (2): »float« hat den Wert »none«. (3): »clear« hat den Wert »left«

Das ist zumindest die Theorie. In der Praxis sieht das schon anders aus. Die Eigenschaft float bietet die einzige Möglichkeit, in CSS 2.1 Layouts mit unterschiedlich hohen Spalten zu erstellen. Daher ist die genaue Kenntnis von float und seiner Verwendung ein wichtiges Werkzeug für jeden Gestalter.

Das Verhalten von Floats Um das Verhalten von Floats vorherzusagen, müssen Sie wissen, nach welchen Regeln diese Elemente von den Browsern dargestellt werden. Die folgenden Punkte sind eine kurze Zusammenfassung der Regeln aus den Abschnitten 9 und 10 der CSS 2.1-Spezifikation.

Ein Element, für das float: left oder float: right definiert wurde, muss folgende Bedingungen erfüllen: • Es muss eine eigene (direkt definierte oder geerbte) Breite besitzen, damit der floatWert eine Auswirkung hat. Die Eigenschaften »float« und »clear«

|

89

• Ein Float muss sich vollständig innerhalb des Blocks seines umgebenden Elements befinden, es sei denn, es ist von sich aus breiter oder höher als das umgebende Element (dieser Zustand hat möglicherweise auch Auswirkungen auf andere Elemente des Dokuments). • Mögliche Überschneidungen mit Elementen, die in der Quellcode-Reihenfolge vorher auftreten und selbst keine Floats sind, dürfen höchsten eine Zeile betragen. Dies ist wichtig, wenn von zwei benachbarten Floats eines den Wert left und das andere den Wert right hat. • Ein links angeordnetes Float muss so weit links wie möglich stehen. Das Gleiche gilt entsprechend für rechts angeordnete Floats. Eine höhere Position hat Vorrang gegenüber einer weiter links oder rechts befindlichen Position. • Floats müssen bündig mit den Elementboxen der Elemente dargestellt werden, die ihnen im Quellcode vorangehen und keine Floats sind, nicht aber mit deren Inhalt. Dieses Verhalten ist wichtig, wenn es um die Erstellung mehrspaltiger Layouts geht. Umgebende Elemente, die selbst als Float definiert wurden, spielen bei diesen Regeln eine wichtige Rolle, wie im folgenden Abschnitt erklärt wird. Ein Grund für die Verwendung der Regel float: none; könnte darin bestehen, einen woanders im Stylesheet definierten Wert ausdrücklich zu überschreiben. Dadurch lässt sich das Layout-Chaos vermeiden, das auftritt, wenn der Inhalt von Floats deutlich größer oder kleiner ausfällt, als vom Designer der Website vorgesehen war. Weitere Informationen zu diesen Regeln finden Sie in Abbildung 11-7 in Kapitel 11 sowie auf der Website zu diesem Buch.

Das »float«-Verhalten mit der Eigenschaft »clear« steuern Die Eigenschaft clear sorgt dafür, dass ein Float nicht vom folgenden Inhalt umflossen wird. Stattdessen wird der Inhalt unter das Float verschoben. Am häufigsten wird clear verwendet, um die obere Außenkante eines Elements bündig mit der unteren Außenkante eines vorangehenden Elements darzustellen. Tabelle 6-1: Die Werte der Eigenschaft »clear« und ihre Auswirkungen Wert

Auswirkung

none

Betroffene Elemente umfließen vorangehende Floats gemäß der per float definieren Regel (Standardwert).

left

Betroffene Elemente, die ein Float mit der Definition float: left normalerweise umfließen, werden unter das Float verschoben.

right

Analog zu left; angewandt im Zusammenhang mit Vorgänger-Elementen mit der Definition float: right.

both

Betroffene Elemente, die normalerweise ein vorangehendes Float umfließen, werden prinzipiell unter das Float verschoben. Standard-Außenabstände werden entsprechend angepasst.

Am besten versteht man das Verhalten von float und clear, indem man ein mehrspaltiges Layout zu erstellt, wie gleich erklärt wird.

90

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

»float«-Kontext Wie bei anderen Box- und Layouteigenschaften wird auch die Anwendung von clear und float durch die Präsenz von float-Werten weiter »oben« in der Kaskade beeinflusst. In der folgenden Diskussion dreispaltiger Layouts wird empfohlen, zwei Spalten in einem Float zusammenzufassen. Ein Effekt dieser Technik besteht darin, dass zwei der »verpackten« Spalten in einem Float-Kontext behandelt werden, der von ihrem Elternelement vorgegeben wird. Hierdurch verändert sich der Geltungsbereich der float- und clearRegeln. Wenn man im gleichen Szenario (drei Spalten, vier Container) einem Element innerhalb des Floats, das die zwei Spalten enthält, die Regel clear: both zuweist, so werden die Außenabstände des Inhalts an die Außenabstände des umgebenden Floats angepasst, nicht an die des Seiten-Containers.

Mehrspaltige Layouts implementieren Die so häufig anzutreffenden und auch in Abbildung 6-7 gezeigten zwei- und dreispaltigen Layouts sind das Ergebnis mühsamer Arbeit. Vor der allgemeinen Unterstützung von CSS konnte das Seitenlayout nur durch die Verwendung von ineinander verschachtelten Tabellen kontrolliert werden, mal ganz abgesehen vom Missbrauch von Flash oder Bildern mit Imagemap-Links. Einmal auf das Wesentliche reduziert, sah das Markup für ein typisches Tabellen-Layout ungefähr so aus:



Dies ist der Kopfteil der Seite.
Dies ist die Seitenleiste.	Hier steht der Haupttext.
Und ich bin der Fußteil.



In der wirklichen Welt waren die verwendeten Tabellen oft noch viel komplexer. So wurden oft zusätzliche Spalten und Zeilen mit »unsichtbaren« Inhalten angelegt, um die nötigen Leerräume im Layout zu erzeugen. Im Jahr 2002 erstellte ich beispielsweise für eine E-Mail-Kampagne eine Tabelle, die aus 40 Spalten bestand, obwohl kein Teil des Layouts mehr als vier Spalten mit Inhalt besaß. Der Rest wurde benötigt, um Regeln und Anpassungen der verschiedenen Abschnitte im Layout-Raster zu realisieren.

Mehrspaltige Layouts implementieren

|

91

Browserfenster

margin-right: …

#seitenleiste

#kopfteil

#haupttext

float: right;

#fussteil clear: both;

#hauptteil

Abbildung 6-7: Die Quellcode-Reihenfolge dieser Elemente ist: #hauptteil – #kopfteil – #haupttext – #seitenleiste – #fussteil; jeder Bereich wird zusammen mit den »float«- und »clear«-Werten für das betreffende Element dargestellt.

Erfahrene Markup-Experten verwenden solche Tabellen noch immer, da die Unterstützung für CSS selbst in aktuellen E-Mail-Programmen nur sehr spärlich ist (und ohne dass Besserung in Sicht wäre).

Ein zweispaltiges Tabellen-Layout nach CSS portieren Wenn Sie auch nur ein bisschen mit zweispaltigen Layouts experimentiert haben, wissen Sie, dass dabei viel schiefgehen kann, z.B.: • Auf den ersten Blick scheint die Anwesenheit von float- und width-Werten für alle Spalten eine Beziehung zwischen Quellcode-Reihenfolge und der Präsentationsschicht zu erzwingen. Bei diesem Ansatz gibt es einfach zu viele Fehlerquellen, speziell im Internet Explorer 6. • Die Verwendung der Regel position: absolute verringert das Risiko von Patzern. Um einen vernünftigen Fußteil zu definieren, müssen Sie jedoch vorher die relativen Spaltenhöhen kennen. Das ist kaum machbar. Das erste Problem lässt sich lösen, indem Sie nur für die Spalten float-Werte definieren, die tatsächlich als Float definiert werden müssen. Die übrigen Spalten kontrollieren Sie mithilfe der Eigenschaft margin. Die Verwendung der Eigenschaften für die Positionierung findet bei mehrspaltigen Layouts dagegen eher selten statt. Die Chancen stehen gut, dass Sie sie für Navigationslinks einsetzen, aber nicht für Spalten mit dem eigentlichen Inhalt.

92

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

Die Migration zu CSS scheint in diesem einfachen Beispiel mehr Arbeit zu bedeuten. Die Namen der Elemente ändern sich. Zwar wird ihre Zahl geringer, aber dafür müssen Sie bergeweise CSS-Regeln schreiben. Hier ist der Markup-Code (den Sie auch auf der Website zu diesem Buch finden). Dies ist der Kopfteil.

Hier steht der Haupttext. Dies ist die Seitenleiste.

Und ich bin der Fußteil.

Und hier sind die dazugehörigen CSS-Regeln: #hauptteil #hauptteil, #kopfteil, #fussteil #haupttext #seitenleiste #fussteil

{ { { { {

height: 1%; overflow: auto; } width: 768px; margin: auto; } float: right; width: 598px; } margin-right: 608px; } clear: both; }

Abbildung 6-8 zeigt dieses Markup in einem Raster.

#bodycopy {float: right; width 23.3333em; }

#sidebar { margin-right: 23.833em; } #footer { clear: both; } #sidebar, #footer { height: 2.5em; } /* swallows up the bottom-margin of the h4 elements */ #main { height: 1%; overflow: auto; }

Abbildung 6-8: Die gesammelten Auswirkungen der Stilregeln für das zweispaltige Markup, eine Regel nach der anderen Mehrspaltige Layouts implementieren

|

93

Die Regeln für das zweispaltige Layout Wie die erste Regel zeigt, gehen die Beispiele für das Markup und die Stilregeln von einem Layout mit festen Breiten aus, entsprechend den meisten Tabellen-Layouts. Die Einstellung margin: auto für die drei Container-Elemente der Seite stellt sicher, dass sie im Darstellungsbereich des Browsers zentriert werden. Der Hauptteil erhält den id-Wert #haupttext. Da dies das erste Element im #hauptteil ist, benötigt es Werte für float und width. Außerdem verwenden wir hier die bereits beschriebene overflow: auto-Methode. Wirklich nötig ist sie allerdings nur, wenn Hintergrund-Eigenschaften direkt für den #hauptteil definiert werden. Der sekundäre Inhalt (sitespezifische Metadaten) kommt als Nächstes und erhält die ID #seitenleiste. Der Wert für diese Spalte behält den Standardwert auto, da kein floatWert definiert werden muss. Die Breite kontrollieren wir mit der Eigenschaft marginright. Dieser Ansatz zur Kontrolle der Breite wird aufgrund der Flexibilität, die zusammengefasste Außenabstände bieten, bevorzugt: Bei der Verwendung veränderlicher Längeneinheiten wie em ist das Risiko von Rundungsfehlern der berechneten Werte und damit auch die Gefahr von Darstellungsproblemen größer. Die Verwendung von marginright riskiert dagegen kleinere Variationen in der Breite des Inhalts, die zwar auch nicht erwünscht, aber deutlich weniger schmerzhaft sind. Durch die Definition von overflow: auto für den #hauptteil ist die Verwendung von clear: both für den #fussteil eigentlich unnötig. Das ändert sich, sobald der Wert für overflow aus dem Stylesheet entfernt wird. Hierdurch wird der Darstellungsbereich von #hauptteil von der Unterkante der #seitenleiste begrenzt. Durch die Regel clear: both für den #fussteil wird sichergestellt, dass dieser immer unterhalb der Spalten des #hauptteils dargestellt wird. Die Auswirkungen sehen Sie in Abbildung 6-8. Zwei Dinge haben wir bei den gezeigten Stilregeln nicht berücksichtigt: Dies ist einerseits die mit Sicherheit auf der Seite vorhandene Navigation. Sehr wahrscheinlich befinden sich die Links entweder im #kopfteil oder in der #seitenleiste. Etwas fortschrittlicher ist der Ansatz, die Navigation in der Quellcode-Reihenfolge zwischen #hauptteil und #fussteil zu platzieren, während sie im Layout relativ weit oben dargestellt wird. Hierfür sind allerdings sowohl die Eigenschaften zur Positionierung als auch Verwendung vertikaler Außenabstände nötig (oder ein entsprechender Wert von padding-top für #seitenleiste, falls sich die Navigation am Anfang dieser Spalte befinden soll). Der zweite vernachlässigte Punkt ist, dass es wahrscheinlich irgendwo in der Nähe von #fussteil negative Außenabstände gibt, besonders wenn sich die sekundäre Navigation außerhalb von #fussteil befinden soll. In der Praxis ist die Verwendung von Außenabständen, Rahmen und manchmal auch Innenabständen für die einander zugewandten Außenkanten von #kopfteil und #fussteil ziemlich kompliziert. Aufgrund der verschiedenen kombinierten Werte für diese Layoutbereiche müssen sehr feine Abstimmungen vorgenommen werden. Nicht selten wird mindestens ein negativer Außenabstand benötigt.

94

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

Auch ist es möglich, die beiden Spalten per float: left und float: right zu definieren und gleichzeitig beim #haupttext der Eigenschaft overflow den Wert auto und height den Wert 1% zu geben. Wir haben diese Methode hier nur kurz angesprochen, weil sie die unangenehme Angewohnheit hat, Darstellungsfehler in Internet Explorer 6 auszulösen.

Vorteile der Beschränkung von Layout-Anweisungen auf Stylesheets Wenn Sie sich die gerade besprochenen unzähligen Verflechtungen und Vorbehalte ansehen, ist die Frage berechtigt, ob es sich wirklich lohnt, Layouts mit CSS zu erstellen. Die Antwort hat komplett mit Vereinfachung zu tun, auch wenn das auf den ersten Blick überhaupt nicht einleuchten mag. Der Aufwand für komplexere Stylesheets wird durch einfacheres Markup mehr als ausgeglichen. Einige Vorteile sind: Der Inhalt erscheint in logischer Reihenfolge Zwischen der Quellcode-Reihenfolge von Inhalten, deren Layout durch die Verwendung von table-Elementen erstellt wurde, und ihrer Position auf der Seite gibt es eine direkte Beziehung. Daher stehen hierbei die Definitionen für Seitenleiste und die Navigation (die oft im Kopfteil der Seite dargestellt wird) meist am Anfang des Markup-Codes. Der eigentliche Inhalt der Seite, der in den Ergebnissen der Suchmaschinen auftauchen sollte, wird im Quellcode unter diese Meta-Inhalte verschoben. Lange Zeit waren Layouts tabellenbasiert, und das hat selbst heute noch Auswirkungen. Benutzer von Hilfsgeräten erwarten etwa immer noch, dass die Seitennavigation sich in ihrer Wahrnehmung am »Anfang« der Seite befindet, weil ihre Werkzeuge ihnen die Inhalte in der Reihenfolge des Markup-Codes darstellen. Elemente werden body nur hinzugefügt oder aus body entfernt, wenn es auch Inhalte hinzuzufügen oder zu entfernen gibt Weniger häufige Änderungen bedeuten normalerweise auch weniger Änderungen insgesamt. Das heißt, es muss auch weniger Arbeit bestätigt und dokumentiert werden. Je größer die daraus resultierende Vereinfachung ist, desto geringer ist auch der langfristige Wartungsaufwand. Das vereinfachte Markup verbessert Portabilität und Zugänglichkeit Die offensichtlichste Folge dieser Tatsache hat mit dem Ausdrucken zu tun: Wenn Sie einen »Diese Seite drucken«-Link benötigen, kann das Dokument am anderen Ende des Links exakt das gleiche Markup-Template verwenden wie die Bildschirmdarstellung. Elemente, die nicht mit ausgedruckt werden sollen (z.B. die Navigation), lassen sich leicht per display: none; verstecken. (Besser ist es allerdings, diese Teile mit einer Markup-Struktur zu umgeben, die ein- und ausgeschaltet werden kann.) Sonderfälle lassen sich leichter handhaben, wenn ein ausreichender Vorrat an class- und id-Attributen im Markup-Code vorhanden ist Im Austausch für die erhöhte Zahl von class- und id-Attributen müssen die Entwickler für eine Site weniger Templates (oder Template-Fragmente) erstellen und warten.

Mehrspaltige Layouts implementieren

|

95

Die von dem Template getrennten Präsentationsanweisungen bieten große Erleichterungen für Entwicklung, Einsatz, Verbesserungen und Redesigns einer Website Benötigt Ihre Website einen neuen Abschnitt, kann dieser zum Template hinzugefügt werden. Die meisten Darstellungsdetails lassen sich durch Änderungen am Stylesheet vornehmen. Mit sauberen Stylesheet-Regeln sollte es möglich sein, Abschnitte durch einfaches Auskommentieren im Template-Markup aus dem Layout zu entfernen. Vergleichen Sie diesen »kurzen Prozess« mit den umfangreichen Änderungen, die beim tabellenbasierten Layout nötig wären. Welcher Ansatz ist also der bessere? Neben diesen Vorteilen wird oft behauptet, dass mehr Inhalt und weniger Markup auch der Suchmaschinenoptimierung (SEO) gut tut. Dies steht in direktem Zusammenhang mit gut geschriebenem CSS-Code, wie er in den zuvor gezeigten Beispielen zu sehen war. Ohne die Möglichkeit, ansonsten gleiche Dokumente vergleichen zu können, fällt es mir schwer, diese Meinung ohne Skepsis zu teilen. Andererseits scheint die Bereitschaft so vieler Leute, an die Vorteile von SEO zu glauben, ja irgendeinen Grund zu haben, oder?

Zwei Spalten auf drei Spalten erweitern Zweispaltige Layouts sind einfach: Solange Sie keine komplizierten Hintergründe verwenden, reicht ein float-Wert hier und ein margin-Wert dort, und der Fußteil kann trotzdem problemlos am Seitenende platziert werden. Es gibt aber auch noch eine andere Möglichkeit, zweispaltige Layouts zu erstellen: Manche Leute bevorzugen beispielsweise float-Werte für beide Spalten. Diese Technik basiert auf einer Kombination aus »Faux Columns« (»falschen« Spalten) und der Zuweisung von clear: both für den Fußteil. Wenn Sie sich entscheiden, ein dreispaltiges Layout zu erstellen, erhöht sich die Anzahl von Kombinationen aus float und margin bereits auf sechs. Außerdem müssen zwei dieser Spalten mit einem Container-Element umgeben werden, um ihre Breite kontrollieren zu können. Normalerweise wollen Sie den Container für die ersten beiden im Quellcode definierten Spalten verwenden. Allerdings gibt es bei zwei der sechs möglichen Kombinationen Schwierigkeiten, weil diese Spalten im Layout nicht aneinandergrenzen. Wie gesagt, es gibt insgesamt sechs Möglichkeiten, die Spalten eines dreispaltigen Layouts anzuordnen. Die Optionen sehen Sie in Abbildung 6-9. Die dazu nötigen Werte für float und margin sind in Tabelle 6-2 aufgelistet.

96

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

2

1

3

3

1

2

1

2

3

none

right

none

none

left

none

left

none

none

left

right

left

1

3

2

2

3

1

3

2

1

left

none

right

left

none

right

none

none

right

none

none

right

Abbildung 6-9: Quellcode-Reihenfolge und dazugehörige »float«-Werte für die sechs Möglichkeiten dreispaltiger Layouts Tabelle 6-2: Spaltenreihenfolge (von links nach rechts) und entsprechende Eigenschaftswerte für »float«/ »margin«1; Spalten sind entsprechend ihrer Quellcode-Reihenfolge gekennzeichnet; eckige Klammern stehen für Container-Elemente. Darstellungsreihenfolge

Container-Layout

Quellcode-Layout der Spalten Spalte 1

Spalte 2

Spalte 3 2

[ [2, 1], 3]

float: left;

float: right;

margin-right: x;

[3, [1, 2] ]

float: right;

float: left;

margin-left: x;

margin-right: x;

[ [1, 2], 3]

float: left;

float: left;

margin-left: x;

margin-left: x;

[1, [3, 2] ]

margin-left: x;

float: left;

float: right;

margin-right: x;

[ [2, 3], 1]

margin-right: x;

float: right;

float: left;

margin-left: x;

[3, [2, 1] ]

float: right;

float: right;

margin-right: x;

margin-right: x;

margin-left: x;

1 Floats benötigen einen passenden Wert für »width«, während für Elemente mit einem »margin«-*-Wert ein »width«-Wert nicht unbedingt nötig ist. 2 x steht hier für eine variable Breite, nicht für eine Längenangabe, die in einem gegebenen Layout konstant bleibt.

Mehrspaltige Layouts implementieren

|

97

Soll in den zwei »Sonderfällen« der Bereich des Containers für die »inneren« Spalten an die anderen vier Fälle angepasst werden, wie in Abbildung 6-9 zu sehen ist, so können Sie dies mit den folgenden vier Schritten erreichen: 1. Verschieben Sie den inneren Container, so dass er die ersten beiden Spalten im Quellcode umgibt. 2. Entfernen Sie die Eigenschaft width für den inneren Container. 3. Weisen Sie den ersten beiden Spalten passende Werte für float und width zu. 4. Geben Sie der dritten Spalte einen passenden Wert für margin. Die margin-Werte müssen hierbei größer oder gleich der Summe der width-Werte aus Schritt 3 sein. Die beiden Ansätze zur Vermeidung von Kollisionen zwischen Hauptinhalt und Fußteil – overflow: auto und height: 1% für das Element, das die Spalten enthält, und die Definition von clear: both für den Fußteil – lassen sich unabhängig von der Zahl der Spalten in Ihrem Layout verwenden. Stylesheets und Templates für die sechs in Tabelle 6-2 beschriebenen Layouts finden Sie auf der Website zu diesem Buch.

Mehr als drei Spalten Je mehr Spalten Sie in einem Layout verwenden, desto attraktiver wird die Verwendung von overflow: auto für einen oder mehrere der Container. Selbst die Verwendung mehrerer float-Werte in Folge – und damit das Risiko von Darstellungsproblemen durch Rundungsfehler in Internet Explorer – ist hier praktikabel, denn jede erfolgreiche Lösung für ein Layoutproblem ist in diesem Fall gut genug.

Semantisch leere Container für mehrspaltige Layouts Bei der genauen Betrachtung der Ergebnisse fällt auf, dass viele der hier gezeigten mehrspaltigen Layouts auch ohne zusätzliche Container für »innere« Spalten auskommen. (Falls Sie diesen Teil überspringen möchten, können Sie auch einfach auf der Website zu diesem Buch nachsehen.) Die Verwendung leerer Container-Elemente wird oft als überflüssiges Markup angesehen, was per Definition keine gute Ergänzung wäre. Das stimmt auch, sofern Sie eines der hier gezeigten dreispaltigen Templates verwenden. Sollen Inhalte aber beispielsweise von der Seitenleiste in die mittlere Spalte verschoben werden, sind möglicherweise mehrere Suchläufe über die Templates nötig. Dieser Schritt sollte nach den Regeln des CSS-Zen eigentlich vollkommen unnötig sein. Der innere Container bietet jedoch den besten Schutz gegen Fehler und bietet gleichzeitig die größte Flexibilität, wenn alle Spalten über die gesamte Höhe einen eigenen Hintergrund haben sollen.

98

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

Fortgeschrittenes Layout mit CSS 3 Die aktuellen Entwürfe der CSS 3-Module spezifizieren die Unterstützung für mehrspaltige Layouts und Eigenschaften, mit denen Gestalter ein tabellenähnliches LayoutVerhalten definieren können. Das Modul für mehrspaltiges Layout (css3-multicol) enthält CSS-Eigenschaften, mit denen ein einzelnes Element in mehrere Spalten aufgeteilt werden kann. Höhe, Inhaltslänge und der Abstand zwischen den Spalten kann für jede Spalte einzeln festgelegt werden. Außerdem gibt es die Eigeschaft column-span, mit der festgelegt werden kann, dass ein Element sich über mehrere Spalten erstrecken kann. Der übrige (Inline-)Inhalt wird ober- und unterhalb des Elements fortgesetzt. Das Modul spezifiziert nach dem momentanen Stand Erweiterungen für die Eigenschaften display und position, mit denen Layout-Raster definiert werden können, die sich an das Verhalten der Layout-Tabellen anlehnen, die im Abschnitt »Mehrspaltige Layouts implementieren« auf Seite 91 beschrieben wurden. Die Werte für die Erweiterung von display können entweder als Buchstaben (ASCII) oder als eine von zwei Konstanten angegeben werden. Die erste Konstante ist das @-Zeichen. Hiermit wird definiert, wo der Inhalt angezeigt werden soll, wenn keine ausdrückliche Position im definierten Raster angegeben wurde. Die zweite Konstante ist ein Punkt (.), mit dem die Zwischenräume eines Layouts definiert werden. Das JavaScript-Framework jQuery enthält ein Modul, mit dem das Verhalten des CSS 3-Template-Moduls emuliert werden kann. Dies geschieht, indem Gestalter eigene display- und position-Eigenschaften definieren (z.B. -mein-raster-display) und den Namen der CSS-Datei mit dem Template-Layout angeben.

CSS-Eigenschaften für die Positionierung Die Eigenschaft position übernimmt einen von vier möglichen Werten (Standard: static). Zusammen mit Eigenschaften wie top, left etc. können Elemente an beliebiger Stelle im Layout positioniert werden. Wird für position ein anderer Wert als static definiert, verändert sich der Positionierungskontext der Elemente, wie kurz in Kapitel 3 beschrieben wird.

Wie die Positionierung funktioniert Nehmen wir beispielsweise die folgenden Werte: #meinDiv { ... left: 160px; top: 96px; }

Gehen wir weiter davon aus, dass diese Werte auf das folgende Markup angewendet werden: ... ... Der Rhabarber pokert leise im Mohnfeld. ...

CSS-Eigenschaften für die Positionierung

|

99

Dann haben die vier möglichen position-Werte für #meinDiv die folgenden Auswirkungen: static

Die Werte für left und top werden nicht verwendet. Das Element behält seine erwartete Position im Dokumentenfluss. absolute

Die linke obere Ecke von #meinDiv wird 96 Pixel unter und 160 Pixel rechts von der linken oberen Ecke des Ansichtsbereichs dargestellt. Eventuell für body angegebene Außen- und Innenabstände werden hierbei nicht berücksichtigt. Das Element wird aus dem normalen Fluss der Elemente im Dokument ausgenommen; der Platz wird für die folgenden Elemente freigegeben. fixed fixed hat die gleichen Auswirkungen position: absolute. Allerdings behält das

Element seine Position im Ansichtsbereich des Browsers auch dann, wenn der Inhalt gescrollt wird. Das Element wird aus dem normalen Fluss der Elemente im Dokument ausgenommen, der Platz wird für die folgenden Elemente freigegeben. relative

Hierbei wird der Abstand nicht von der linken oberen Ecke des Ansichtsbereichs berechnet, sondern von der linken oberen Ecke seiner ursprünglichen Position im Layout des Dokuments. Das Element behält also seine Platzierung im Dokumentenfluss, wird aber um die mit top, left etc. angegebenen Werte verschoben. Der ursprüngliche Platz bleibt leer. Für das nächste Beispiel erweitern wir das Stylesheet um folgende Regel: #hauptteil { position: relative; margin: 20px; }

Standardmäßig haben die Eigenschaften top, right, bottom und left den Wert 0 (Null). Allerdings verändert die Zuweisung von position: relative den Positionierungskontext für #meinDiv. Anstatt an der linken oberen Ecke des Ansichtsbereichs wird #meinDiv nun an der linken oberen Ecke von #hauptteil ausgerichtet. Durch diese Definition bezieht sich die Position von #meinDiv nun auf die linke obere Ecke von #hauptteil. Durch die Angabe von margin: 20px wird auch der Inhalt von #hauptteil und damit auch von #meinDiv verschoben (siehe Abbildung 6-10). Die Abbildungen basieren auf dem Markup und den Stilregeln für das zweispaltige Layout (siehe im Abschnitt »Ein zweispaltiges Tabellen-Layout nach CSS portieren« auf Seite 92). Noch ein paar Details zur Positionierung von Elementen im Fluss der umgebenden Elemente im Dokument: Wird ein Element aus dem Fluss entfernt, hat dies den gleichen Effekt wie die Definition von display: none, wobei das Element jedoch an den vom Gestalter festgelegten Koordinaten sichtbar bleibt. Wird ein Element relativ positioniert, behält es seine ursprüngliche Position im Dokumentenfluss mit sämtlichen Konsequenzen für die benachbarten Elemente. Es verschiebt sich also nur seine Darstellung gemäß der angegebenen Koordinaten.

100

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

#seitenleiste p { position: static; }

#seitenleiste p { position: relative; }

#seitenleiste p { position: absolute; }

#hauptteil { position: relative; }

/* Dieser Wert entfernt das Element aus dem "normalen" Fluss. Es nimmt die gesamte Breite des Hauptteils ein, da für sein Elternelement die Standardwerte für position und width verwendet wurden. */

/* Ändert den Positionierungskontext aller Nachfahrenelemente von #hauptteil. */ #seitenleiste p { position: absolute; } /* Der Ursprung für die Positionierung dieses Elements ist jetzt die linke obere Ecke des Elements #hauptteil. */

Abbildung 6-10: Eine Darstellung des Verhaltens der in diesem Abschnitt beschriebenen Elemente und Stile

Und noch ein Hinweis: Internet Explorer 6 und 7 stellen Außenabstände anders dar als andere Browser, wenn position: relative verwendet wurde, um einen anderen Positionierungskontext zu schaffen, wie in der später gezeigten Erstellung eines Navigationslayouts gezeigt wird. In der Praxis sollten Sie man diese Werte in einem per Conditional Comments (siehe Kapitel 3) eingebundenen Stylesheet ggf. zurücksetzen.

Positionierte Elemente begrenzen Die Eigenschaften top und left finden ihre »Gegenspieler« in den Eigenschaften right und bottom. Es können die gleichen Längeneinheiten wie für die Box-Eigenschaften verwendet werden. Die letzen beiden Eigenschaften werden allerdings deutlich seltener verwendet, weil sich die Größe des Browser-Ansichtsbereichs nur sehr schwer voraussagen lässt.

CSS-Eigenschaften für die Positionierung

|

101

Trotzdem können in allen modernen Browsern einander ergänzende Werte anstelle von width (oder height, wenn auch deutlich seltener) angegeben werden. Die Regel #meinDiv { position: absolute; left: 25%; right: 25%; }

ergibt die gleiche Darstellung wie: #meinDiv { position: absolute; left: 25%; width: 50%; }

Diese Technik zur Begrenzung kann bei der Erstellung von Layouts mit variablen Breiten hilfreich sein, wenn die Außenabstände in Längeneinheiten anstelle von Prozentwerten definiert werden müssen. Wie top und left verschieben auch \}right\{ und \}bottom\{ die Außenabstände ihres Elements möglicherweise über die Ränder des Elements hinaus, das den Positionierungskontext definiert, wie in Abbildung 6-11 dargestellt.

Abbildung 6-11: Negative Werte für right und bottom verschieben das betroffene Element in die entgegengesetzte Richtung.

102

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

»width: auto« und nicht-standardmäßige Werte für »position« und »float« Hat position für ein Element den Wert absolute oder static, aber keinen speziellen Wert für width, wird wie bei normalen Elementen standardmäßig die gesamte Breite des umgebenden Elements ausgenutzt. Wurde also ein Wert für left oder right definiert, hat sein »Gegenstück« standardmäßig den Wert 0 (Null). Noch interessanter werden die Dinge, wenn ein absolutes oder als Float definiertes Element nur Inhalte mit einer eigenen Breite besitzt (z.B. Bilder oder Formularelemente). Hat width für das äußere Element den Wert auto, wird seine Breite wie bei einer Schrumpfverpackung an die Breite des Inhalts angepasst. In Abschnitt 10.3 der CSS 2.1-Spezifikation wird äußerst detailliert beschrieben, wie die Breite von Elementen bestimmt wird.

Die Eigenschaften »visibility« und »z-index« Die bisher besprochenen Eigenschaften für die Positionierung und Darstellung der Elementboxen wirken sich auf die Breite und Höhe der Elemente aus. Zudem gibt es zwei Eigenschaften, mit denen beeinflusst werden kann, ob ein Element vor oder hinter einem anderen dargestellt werden soll.

Ändern der Sichtbarkeit ohne Auswirkungen auf den Dokumentenfluss Die Regel display: none ist extrem nützlich. Allerdings verändert sie den Fluss der Elemente im Dokument. Anders funktioniert dagegen die Eigenschaft visibility. Neben dem Standardwert visible gibt es noch einen weiteren, recht gut unterstützten Wert: hidden. Hiermit ist es möglich, Inhalte von der Darstellung auszunehmen, ohne den Fluss der Elemente im Layout des Dokuments zu verändern. Während display: none dafür sorgt, dass das Element in der Darstellung ignoriert wird, entfernt visibility: hidden den Inhalt des Elements, seinen Hintergrund und eventuell definierte Rahmen. Stattdessen ist eine (scheinbar leere) Elementbox zu sehen. Die Anweisungen visibility: hidden und opacity: 0 haben die gleichen Auswirkungen. Der Hauptunterschied besteht in der Unterstützung durch die Browser. Während visibility Teil einer Ergänzung der ursprünglich 1996 entworfenen CSS-Spezifikation war, wird opacity nur von einigen Browsern unterstützt. Gleichzeitig taucht opacity als Teil der CSS 3-Eigenschaften wieder auf.

Stapelung Überlagern sich zwei Elemente – im einfachsten Fall, weil ein Element in einem anderen enthalten ist –, wird das in der Quellcode-Reihenfolge spätere Element über dem voranDie Eigenschaften »visibility« und »z-index«

|

103

gehenden dargestellt. Das ist an sich auch gut so. Durch Positionierung und die Tatsache, dass jedes Element allein schon zwei »Ebenen« besitzt, wird die Sache etwas komplizierter. Bei einem normalen Block-Element werden die Bestandteile in der folgenden Reihenfolge (von hinten nach vorne) gestapelt: 1. Hintergrundfarbe 2. Hintergrundbild 3. Rahmen 4. Inline-Inhalte 5. Als Float definierte Inhalte Inline-Elemente und Floats haben wiederum ihre eigenen Hintergründe, Rahmen und Inhalte und besitzen daher noch einmal eine eigene Stapelungsreihenfolge. Von dieser Liste sind alle Elemente ausgenommen, die für position einen anderen Wert haben als static. Jedes dieser Elemente besitzt seinen eigenen Stapelungskontext, der auf die gleiche Weise weitergegeben wird wie der Positionierungskontext. Befinden sich zwei Elemente im gleichen Stapelungskontext, hängt die Reihenfolge ihrer Stapelung davon ab, wo sie sich in der Quellcode-Reihenfolge befinden. Die Aufgabe der Eigenschaft z-index ist es, die standardmäßige Stapelungsreihenfolge für positionierte Elemente zu verändern. Angenommen, Sie haben eine Reihe positionierter Elemente im gleichen Positionierungskontext. Kommt es hierbei zu Überlagerungen in der Darstellung, werden Elemente, die später in der Quellcode-Reihenfolge stehen, in der Darstellung standardmäßig vor den anderen dargestellt. Soll ein bestimmtes Element unabhängig von seiner Position im Quellcode vor oder hinter einem anderen angezeigt werden, können Sie dies über einen entsprechenden Wert (abgesehen vom Standardwert auto) für z-index steuern. Hierbei treten folgende Änderungen auf: • Elemente mit einem negativen Wert für z-index werden entsprechend dieses Wertes im Stapel nach hinten, d.h. vom Betrachter weg, verschoben (Weiteres siehe unten). • Elemente mit dem z-index Wert Null oder auto werden gemäß ihrer Position im Quellcode angezeigt (Weiteres siehe unten). • Elemente mit einem positiven Wert für z-index werden entsprechend dieses Wertes im Stapel nach vorne verschoben. Allgemein werden Elemente mit dem gleichen Positionierungskontext und einem identischen Wert für z-index entsprechend ihrer Position im Quellcode angezeigt. Zuletzt definierte Elemente scheinen dem Betrachter am nächsten zu sein. Die wichtigste Einschränkung besteht darin, dass Elemente sich im gleichen Positionierungskontext befinden müssen, damit sie per z-index entlang der gedachten z-Achse verschoben werden können.

104

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

Sollten Sie einmal ein Element vor einen benachbarten Float verschieben müssen, können Sie ihm eine höhere Position in der Stapelungsreihenfolge verschaffen, indem Sie es mit der Regel position: relative versehen.

Quellcode-Reihenfolge und präzises Layout für die Navigation Im Abschnitt »Stile für Navigationselemente« auf Seite 124 wird das Markup und die Gestaltung von Listen beschrieben. In mehreren Schritten wird gezeigt, wie Sie die primären Navigationselemente einer Site darstellen können. Details werden in Schritt 5 allerdings vermieden. Es wird nur gesagt, dass für das Layout von Navigationselementen ein Haufen Box- und Layouteigenschaften nötig ist. Alle Selektoren in diesem Abschnitt wurden absichtlich so allgemein wie möglich benannt.

Im Folgenden gehen wir davon aus, dass Sie die ersten vier Arbeitsschritte bereits ausgeführt haben. Die Liste sollte bereits angepasst sein, und die Listeneinträge sollten die Definition display: block besitzen. Kapitel 13 enthält ebenfalls eine detaillierte Betrachtung komplexer Seitenlayouts.

Die Liste ausrichten Drei Dinge haben Einfluss auf die Ausrichtung der Navigationsliste: • die allgemeine horizontale oder vertikale Orientierung • die An- oder Abwesenheit von Untereinträgen • die allgemeine Ausrichtung eventuell vorhandener Untereinträge Üblicherweise wird die primäre Navigation auf kommerziellen Websites horizontal ausgerichtet. Dies geht am besten mit Stylesheet-Regeln wie den folgenden, wobei Längenangaben nach Bedarf angepasst werden: #nav { display: block; height: 1.5em; overflow: hidden; } #nav li { width: 8.333em; float: left; overflow: hidden; }

Beachten Sie, dass #nav seinen Positionierungskontext von #hauptteil erhält, wodurch die Navigation im Quelltext nach dem Hauptinhalt stehen kann. Der Platz für #nav wird dadurch geschaffen, dass #hauptteil mit einem entsprechenden Innenabstand (padding)

Quellcode-Reihenfolge und präzises Layout für die Navigation

|

105

versehen wird. Dies wird durch den hellgrauen Leerraum verdeutlicht, der auf beiden Seiten zu sehen ist. Er wird gebraucht, um Rundungsunterschiede der verschiedenen Browser auszugleichen. Bringt die Verwendung von float aufgrund von Rundungsunterschieden oder Darstellungsfehlern im Internet Explorer nicht die gewünschten Ergebnisse, gibt es noch eine weitere Methode: Verwenden Sie für die umgebende Liste die Regel ul { position: relative; }, und steuern Sie dann die Positionierung der einzelnen Einträge mit der Regel li { position: absolute; } und den passenden Layout-Koordinaten. (Dies funktioniert nicht, wenn position: absolute bereits verwendet wurde, um die Platzierung in der Quellcode-Reihenfolge auszugleichen.) Die Bevorzugung von float: left gegenüber position: absolute für die Platzierung der Einträge in der Navigationsliste hat mit dem zuvor behandelten Stapelungskontext zu tun. Elemente mit ungewöhnlichen Stapelungseigenschaften können ungewollte Auswirkungen auf die Werte von position und z-index in anderen Teilen des Dokuments haben, was in der Testphase des Projekts zu Problemen führen kann. Bei Werbeeinblendungen von Drittanbietern oder von Inhalten, die ungeschulte Benutzer einem CMS hinzugefügt haben, können diese Schwierigkeiten sogar noch größer werden. Eine vertikal orientierte Navigation ist dagegen deutlich einfacher zu gestalten. Die größte Schwierigkeit liegt in der Behandlung von Listeneinträgen, die sich über mehrere Zeilen erstrecken. Die Anforderungen lassen sich allerdings verringern, wenn jedem Listeneintrag der primären Navigation möglichst ein eigenes id-Attribut zugewiesen wird. Während die horizontale Navigation durch die mögliche Höhe (height) beschränkt wird, findet eine vertikal orientierte Navigation ihre Grenzen in der Breite (width). Hier kann die Verwendung von float helfen, was zu einfacheren Regeln führt, wie hier gezeigt: #nav { display: block; width: 10em; overflow: hidden; } #nav li { height: 1.5em; overflow: hidden; }

Navigationslisten genau platzieren Typischerweise befindet sich die Liste mit den Navigationslinks an einer von zwei möglichen Stellen im Quellcode des Templates und an einer von zwei möglichen Positionen im Layout. Zudem ist wichtig, wie tief die Liste im Dokumentenbaum verschachtelt ist. Die ersten zwei hier gezeigten Szenarien gehen von folgender Seitenstruktur aus: 1. Wurzelelement des Dokuments A. Container für den Inhalt I. Kopfteil II. Primäre Navigation i. Einzelne Links a. Untereinträge III. Spalten für Inhalt 106

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

IV. Fußteil i. Sekundäre Navigation a. Einzelne Links ii. Copyright-Vermerke etc. Die letzten beiden Szenarien gehen davon aus, dass 1.A.II und 1.A.III (die Spalten für die primäre Navigation und den Hauptinhalt) in der gerade gezeigten Quellcode-Reihenfolge vertauscht sind. Die sichtbare Position der primären Navigationslinks (im Layout) liegt bis auf ganz wenige Ausnahmen innerhalb oder in der Nähe des Kopfteils. Die Hauptfrage ist nur: Befinden sie sich in einer Spalte links vom Hauptinhalt (und wahrscheinlich über weiterem Inhalt) oder horizontal unterhalb des Kopfteils (und erstrecken sie sich dabei über mehrere Spalten)? Die Feinheiten des Layouts von Navigationslinks innerhalb der sie umgebenden Liste wurde im vorigen Abschnitt und in Kapitel 7 bereits behandelt. Hier geht es um die Frage, wie die Links auf der sichtbaren Seite platziert werden. Wie bei den übrigen in diesem Kapitel benutzten Beispielen gehen wir in Abbildung 6-12 davon aus, dass die Navigationsliste sich am Ende von #hauptteil befindet. Dieser Ansatz hat nicht nur Vorteile, aber er führt zu einer logischeren Quellcode-Reihenfolge der Inhalte gemäß ihrer Wichtigkeit. 1

2

3

4

Abbildung 6-12: Das schrittweise Layout einer vertikal orientierten Navigationsliste Quellcode-Reihenfolge und präzises Layout für die Navigation

|

107

Die Dinge werden komplizierter, wenn die Links wie in Abbildung 6-12 vertikal orientiert sind und an die linke Layout-Spalte angrenzen. Nehmen Sie Abbildung 6-12 als Orientierungshilfe, und stellen Sie sich die Standarddarstellung einer vertikal orientierten Liste an dieser Position im Quellcode vor. Dann gehen Sie im Kopf die folgenden Schritte durch: 1. Zurücksetzen der Liste durch list-style-type: none für die Liste und padding-left: 0 für die Listeneinträge 2. Setzen der gewünschten Box-Eigenschaften für die Listeneinträge und die Liste selbst. In unserem Beispiel erhält jeder Listeneintrag an allen vier Seiten etwas Innenabstand sowie an zwei Seiten eine Begrenzungslinie. Die Liste selbst bekommt ebenfalls an zwei Seiten eine Begrenzungslinie (entsprechend Abbildung 10-3, zu sehen in Kapitel 10). 3. Unter Verwendung des Positionierungskontextes von #hauptteil wird die Navigationsliste oberhalb der linken Spalte platziert. 4. Die linke Spalte erhält einen entsprechenden Wert für padding-top.

Layouttypen und Hilfslinien-Raster Bei der Erstellung eines Layouts sind zwei Dinge wichtig: die Breite des Layouts im Verhältnis zum Ansichtsbereich und zu den im Layout verwendeten Hilfslinien. Für die Verbindung der Layoutbreite und der Breite des Ansichtsbereichs gibt es drei gängige Methoden und zwei Ebenen, auf denen Layoutraster angewandt werden. Ihnen werden Warnungen über das Mischen von festen Längeneinheiten und Prozentwerten begegnen. Am häufigsten geht es dabei um Rahmen und abgerundete Ecken. Beides funktioniert deutlich besser, wenn statische Längeneinheiten verwendet werden. Das gilt auch, wenn Sie für Elemente die proportionalen Längenangaben besitzen.

Feste, proportionale und flexible Layouts Obwohl Webbrowser ständig weiterentwickelt werden, muss sich der Designer einer Website drei Fragen stellen, bevor er mit einem Layoutraster (wireframe) oder möglicherweise mit einem zusammengesetzten Layout arbeitet: • Wie viel Platz wird gebraucht, um die »Message« der Site zu kommunzieren? • Wie viel Platz bietet der Ansichtsbereich im Browser eines typischen Besuchers? • Ist es im Sinne des Besuchers, den gesamten Ansichtsbereich zu verwenden? Teilweise müssen diese Fragen im Kontext der einzelnen Bestandteile eines Site-Designs beantwortet werden: »Wie viel Platz brauche ich in x, und warum?« Da sich die Antworten je nach Projekt und Designer unterscheiden, gibt es keine allgemeingültigen Antworten. Es gibt allerdings eine Reihe von Designkonzepten, die die horizontale Anordnung in einem Layout beeinflussen: 108

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

Schriftgrößen Da es eine ideale Anzahl von Wörtern pro Zeile gibt und die häufigsten Wörter einer Sprache bekannt sind, lässt sich folgern, dass schmalere Layouts sich besser mit kleinen Schriftgrößen vertragen; soll die Schrift größer sein, muss das Layout entsprechend breiter sein. Bildgrößen Besteht der Inhalt einer Site zu einem großen Teil aus Fotografien oder anderen Illustrationen, haben ihr Seitenverhältnis und ihre Größe einen großen Einfluss auf das Gesamtdesign der Site. Dies gilt besonders, weil diese Elemente in proportionalen Layouts aufgrund ihrer festen Größe nicht skalierbar sind. Leerraum und Kontrast Leerraum entsteht, wenn ein verhältnismäßig schmales Layout in einem breiten Browserfenster dargestellt wird. Davon abgesehen, wird Leerraum an verschiedenen Stellen im Layout benötigt (z.B. zwischen Textzeilen, vor und nach Absätzen etc.). Bereiche mit hohem Kontrast profitieren ebenfalls davon, wenn der Inhalt einen ausreichend hohen Innenabstand besitzt. Browserbeschränkungen Unerfahrenen Gestaltern werden bei der Implementierung proportionaler und flexibler Layouts erhebliche Darstellungsfehler begegnen. Die Drittelregel, der Goldene Schnitt und die Fibonacci-Folge Wenn Sie überlegen, wie groß der Platz »über dem Knick« für Ihre Startseite oder den Abschnitt einer Seite sein muss, können Sie sich auf diese allgegenwärtigen Zahlenfolgen verlassen, um die Breiten für Spalten und andere Elemente festzulegen. Die Eigenheiten, Vor- und Nachteile der drei grundsätzlichen Layouttypen finden Sie in Tabelle 6-3. Tabelle 6-3: Layouttypen mit ihren Eigenheiten, Vor- und Nachteilen Layouttyp

Eigenheiten

Fest (»fixed«)

Sämtliche Layoutelemente, möglicherweise auch die Spalten, werden in Pixeln (px) definiert.

Vorteile

Nachteile

•

Einfachste Handhabung für Zwischenräume, Begrenzungslinien und detaillierte Hervorhebungen

•

Geringste Anfälligkeit für Darstellungsfehler von Browsern

•

Am besten geeignet für Sites mit vielen Bildern

•

Am schlechtesten zugänglich für Benutzer mit Sehproblemen

•

Am empfindlichsten für das »Überlaufen« von Text in andere Elemente

Layouttypen und Hilfslinien-Raster

|

109

Tabelle 6-3: Layouttypen mit ihren Eigenheiten, Vor- und Nachteilen (Fortsetzung) Layouttyp

Eigenheiten

Proportional

Die meisten oder alle Layoutelemente werden mit Prozentwerten definiert.

Flexibel

Die meisten oder alle Layoutelemente werden mit em-Einheiten definiert.

Vorteile •

Das Layout bleibt unabhängig von der Größe des Ansichtsbereichs konsistent.

•

Am zugänglichsten für Benutzer mit Sehproblemen

•

Bietet den besten Kompromiss zwischen Zugänglichkeit und Lesbarkeit; geringe Probleme bei veränderten Textgrößen.

•

Essenziell für eine erfolgreiche Nutzung von Layoutrastern

•

Wenig oder kein Bedarf für das Mischen von Längeneinheiten; alle Angaben können in em-Einheiten gemacht werden, ohne dass der Inhalt in andere Elemente »überläuft«.

Nachteile •

Floats sind schwer zu handhaben, wenn für Zwischenräume und Rahmen feste Längeneinheiten verwendet werden.

•

Einschränkungen der Lesbarkeit durch zu lange Zeilen in breiten Browserfenstern

•

Der Gestalter muss viele Umrechnungen von Brüchen zu Dezimalwerten und multiplikative Berechnungen von Schriftgrößen vornehmen.

•

Die Darstellung leidet bei schmalem Ansichtsbereich und Schriftgrößen, die mit mehr als 12 Pixeln (oder einem entsprechenden Wert) berechnet werden.

In der Praxis wird Ihre Entscheidung über Layoutbreite und Schriftgröße davon abhängen, mit welcher Größe des Ansichtsbereichs und welcher Bildschirmauflösung die meisten Besucher Ihre Site betrachten. Beim Schreiben dieses Buches lag der kleinste gemeinsame Nenner ungefähr bei 1024 × 768 Pixeln in der Vollbilddarstellung. Der kleinste mögliche Ansichtsbereich hat dabei etwa eine Größe von 1000 × 600 Pixeln (im Internet Explorer 7 mit diversen Tabs und zusätzlichen Werkzeugleisten). Die meisten Layouts werden außerdem zentriert, um auch größeren Browserfenstern auf größeren Bildschirmen zu genügen, wie das 1280 × 800 Pixel große Fenster, das ich bei einer Bildschirmauflösung von 1680 × 1050 Pixeln benutze. Hat Ihre Site besonders weit gesteckte Ziele (und das passende Publikum), wollen Sie vielleicht auch eine Auflösung von 800 × 600 berücksichtigen. Dafür gibt es zwei Möglichkeiten: • Verringern Sie die Breite Ihres Layouts, so dass es auf einen Bildschirm mit der Auflösung von 800 × 600 passt, aber vergessen Sie nicht die Anpassungen für eine ideale Zeilenlänge. • Bleiben Sie bei 1024 × 768 als kleinstem gemeinsamen Nenner für die Größe des Browserfensters. Passen Sie aber die Spaltenbreiten so an, dass der Hauptinhalt der Seite auch bei einer Auflösung von 800 × 600 Pixeln noch ohne horizontales Scrollen zu lesen ist.

110

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

Die beste »Arme-Leute-Lösung« zum Testen von Layouts in verschiedenen Fenstergrößen bietet die Web Developer Toolbar, eine Firefox-Erweiterung. Über einen Dialog können Sie verschiedene eigene Fenstergrößen definieren, zwischen denen Sie dann über ein Menü wechseln können. Experten für Accessibility und Usability empfehlen allerdings, die Bildschirmauflösungen direkt am Monitor umzustellen. Die Unterschiede zwischen verschiedenen Monitoren und Auflösungen sind einfach zu zahlreich (siehe dazu Tabelle 3-3 in Kapitel 3).

Hilfslinien definieren Konsistenz wird oft als die höchste Tugend im Grafikdesign betrachtet, und das Web bietet wenig Ausreden, dem nicht zu folgen. Tatsächlich fördert die Natur der Kaskade an sich (siehe im Abschnitt »Taxonomie auf die Kaskade anwenden« auf Seite 70) Konsistenz in hohem Maße. Umkehrt sind Raster zum Erreichen der Konsistenz eine große Hilfe. Raster werden auf allen Ebenen des Designs einer Website verwendet, besonders bei den Details, aber auch auf Seiten- und Template-Ebene. Ein feines Netz aus Hilfslinien bildet ein Raster kleiner, gleich großer Rechtecke, manchmal sind es auch Quadrate. Viele Designprogramme, insbesondere Photoshop, bieten Unterstützung für diese Hilfslinien. In Photoshop können Sie die Hilfslinien durch den Menübefehl Ansicht → Einblenden → Hilfslinien (bzw. per Strg/Befehlstaste-Komma) aktivieren. Diese Hilfslinien können und sollten beispielsweise die Entfernung zwischen Text und Spaltengrenzen anzeigen. Hilfslinien für die gesamte Seite haben untereinander größere Unterschiede, sind aber nicht weniger konsistent. Das Layoutraster für eine Seite definiert beispielsweise die Spaltenbreiten, legt eine bevorzugte Höhe für Inhaltsblöcke fest und definiert, unter welchen Umständen die Eigenschaft clear benutzt werden sollte. Die Alternative zu einem Raster – den Inhalt in eine oder mehrere Spalten zu stopfen, ohne auf die benötigte Höhe zu achten, die Seitenabschnitte mit unterschiedlichen Spaltenbreiten zu versehen und die Konsistenz bezüglich der Bestandteile wie Bilder oder Überschriften zu vermeiden – ergibt einen visuellen Flickenteppich (siehe Abbildung 6-13). Hier sehen Sie die Website von Weather Channel und Weather Underground etwa zur gleichen Zeit. (Beachten Sie das Durcheinander zwischen den Hilfslinien in der Darstellung bei Weather Underground oben in der Abbildung). Keines der beiden Layouts würde einen großen Blumentopf gewinnen. Immerhin ist auf der Website des Weather Channel selbst für den einfachen Besucher zu erkennen, dass zumindest jemand versucht hat, sich an den Hilfslinien zu orientieren. Nicht so bei Weather Underground. Der Inhalt der Site wird auch hier auf drei Spalten verteilt, allerdings mit deutlich weniger Rücksicht auf die y-Achse des Seitenlayouts. Auf beiden Seiten gibt es bergeweise Werbung im Seiteninhalt und dem Fußteil. Der Unterschied ist auch hier deutlich sichtbar: Beim Weather Channel wird die Hauptspalte

Layouttypen und Hilfslinien-Raster

|

111

unterteilt, um die Textanzeigen zu positionieren, während bei Weather Underground aus dem gleichen Grund der gesamte Inhaltsbereich unterteilt wird.

Abbildung 6-13: Zwei ähnliche Websites mit überlagerten Hilfslinien

Die größten sichtbaren Probleme haben offenbar mit Werbeanzeigen zu tun, denen zu viel Platz eingeräumt wird. Daher gilt: Wenn Sie auf Ihrer Site Werbung schalten wollen, sollten Sie dies von Anfang an im Design berücksichtigen.

Da es schwierig ist, die Höhe eines Inhaltsblocks vorherzusagen, muss besonders die vertikale Aufteilung mit besonderer Disziplin und Planung durchgeführt werden. Sind für ein Seitenlayout genaue Höhenangaben unabdingbar, sollten Sie überlegen, ggf. die Regel overflow: hidden zu verwenden.

112

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

Die Drittelregel, der Goldene Schnitt und die Fibonacci-Folge Die einander ähnlichen Konzepte der Drittelregel, des Goldenen Schnitts und der Fibonacci-Folge sind für das Seitenlayout besonders wichtig. Hierbei ist die Drittelregel am einfachsten zu verstehen und zu berechnen. Der Ansichtsbereich wird horizontal und vertikal in jeweils drei gleich große Bereiche unterteilt. Der Betrachter konzentriert seine Aufmerksamkeit i.d.R. auf die vier Schnittpunkte der gedachten Hilfslinien. Der Goldene Schnitt, oder mathematisch o|, ist eine Konstante mit dem ungefähren Wert 1,618034. Die Berechnungsregel lautet: b verhält sich zu a wie a zur Gesamtlänge a + b. Die Fibonacci-Zahlenfolge erhält man, indem man den aktuellen Wert zu dem vorangehenden addiert. Mathematisch heißt das: xn + x(n + 1) = x(n + 2), sofern man davon ausgeht, dass der niedrigste mögliche Wert von x(n + 2) 1 ist. Beginnt man mit der zweiten Instanz von 1, lauten die ersten Zahlen der Sequenz 1, 2, 3, 5, 8, 13, 21, 34, 55 und 89. Die Drittelregel ergibt ein Verhältnis von 3:3, was eine sehr grobe Annäherung an den Goldenen Schnitt ist. Gleichzeitig ist dies das Verhältnis, zu dem die aufeinander folgenden Fibonacci-Zahlen tendieren. In Abbildung 6-14 sehen Sie eine grafische Darstellung der Drittelregel und der FibonacciFolge. Die hierdurch entstehenden Hilfslinien sind ein ausgezeichneter Startpunkt für eigene Layoutraster. Dies gilt besonders für die Ermittlung von Spaltenbreiten und der Höhe für den Kopf- und den Fußteil im Verhältnis zum Ansichtsbereich.

Abbildung 6-14: Von der Fibonacci-Folge und der Drittelregel inspirierte Layoutraster

Layouttypen und Hilfslinien-Raster

|

113

Implementierung eines flexiblen Layoutrasters Ein Teil der für CSS 3 geplanten Standards besteht in der Definition von kleinsten Einheiten für ein Layoutraster. Einen Link zum Entwurf für die entsprechende Spezifikation finden Sie auf der Website zu diesem Buch.

Die meisten »Feinraster« für Seitenlayouts folgen einer einfachen Regel: Die Zeilenhöhe im Raster entspricht einer Textzeile inklusive dem »Durchschuss« (Zeilenabstand). Zum Beispiel: body { ... font-size: 14px; line-height: 1.714em; ... }

Hierbei gehe ich davon aus, dass die Zeilen (Text + Durchschuss) jeweils eine Höhe von 24 Pixeln haben, es sei denn, die Seite wird irgendwie gezoomt. Selbst wenn der Benutzer den Textzoom verwendet, bleibt der Zeilendurchschuss im Verhältnis zur Textgröße konstant. Der Textzoom wird hier erwähnt, weil er die Zugänglichkeit deutlich erhöhen kann und weil er Layouts, die sich nicht streng an em-Einheiten und einem Raster orientieren, komplett zerschießen kann. Einen Überblick über die Browserunterstützung für das Zoomen finden Sie in Tabelle 6-4. Tabelle 6-4: Überblick über die Unterstützung des Zoomens der verschiedenen Browser Zoom-Typ

IE 8

IE 7

IE 63

Firefox 3

Firefox 2

Safari 4

Safari 3

Textzoom

✓

✓

✓

✓

✓

✓

✓

Seitenzoom

✓

✓

nicht anwendbar

✓

nicht anwendbar

✓

nicht anwendbar

Für die »atomare« Spaltenbreite kann ein beliebiger Wert verwendet werden. Spaltenbreiten, die Quadrate ergeben, scheinen logisch, ergeben aber nicht immer eine angenehme Breite für die Spaltenzwischenräume. Weitere Kandidaten sind: • die Zeilenhöhe, geteilt durch (oder multipliziert mit) o| • 1em oder ein Vielfaches davon • die Breite eines »normalen« Worts in der Standardschrift der Website Auch bei der Implementierung des Feinrasters ist Konsistenz die Hauptsache. Die Spaltenbreiten und andere Linien des Layoutrasters für die Seite sollten sich an den Linien des Feinrasters orientieren. Wollen Sie ein flexibles Layout erstellen, sollten alle Werte in em-Einheiten angegeben werden. Angenommen, ich verwende die Fibonacci-Folge als Grundlage für ein zweispaltiges Layout auf einem quadratischen Raster. Dann erhalte ich vor dem Einfügen von Zwischenräumen und Außenabständen die folgenden Proportionen:

3 Nicht unterstützt für Text, der seinen Wert für font-size von einem in Pixeln (px) angegebenen Wert erbt.

114

|

Kapitel 6: Lösungen für das CSS-Layout-Puzzle

Höhe von Kopf- und Fußteil

8x

Breite der Seitenleiste

13x

Breite für den Hauptinhalt

21x

Wahrscheinliche Breite für eingebettete Fotos

8x

Wahrscheinliche Größe für Überschriften (inkl. Durchschuss)

3x und/oder 5x

Die Aufgabe besteht hierbei darin, den Wert für x zu ermitteln. Als Ausgangspunkt kann man beispielsweise das Verhältnis der Breite für den Haupttext zur Breite der Seitenleiste nehmen. Die Zeilenlänge soll möglichst am unteren Ende des optimalen Bereichs liegen, sagen wir: 12 Wörter. Das entspricht in vielen Schriften ungefähr 36 em. Daraus ergibt sich ein Wert für x von 0,618 em-Einheiten (.618em). Da eine Zeilenhöhe von 0,618 em-Einheiten nicht besonders praktikabel ist, verdopple ich diesen Faktor und erhalte so einen line-height-Wert von 1.235em (was dem Standardwert für viele Schriften ziemlich nahe kommt). Verwende ich den folgenden Wert in der Fibonacci-Folge,komme ich auf 1.853em, was aber wahrscheinlich schon zu groß ist. Alternativ dazu kann ich auch die Verhältnisse meines Layouts betrachten und dieses durch die Breite des Ansichtsbereichs dividieren (ein Verhältnis von 13:21 von der Seitenleiste zum Haupttext ergibt einen Gesamtwert von 34 Einheiten). Das Ergebnis dieser Berechnung entspricht dem Abstand zweier Linien in meinem Feinraster. Er liegt irgendwo zwischen 28 und 30 Pixeln, was eine größere Schrift auf kürzeren Zeilen nahelegt. Unabhängig vom gewählten Wert kann ich das Ergebnis leicht in meinem Stylesheet festlegen. Hierfür verwende ich eine bestimmte Rasterweite und weise jeder wichtigen Klasse für den Site-Inhalt mithilfe der entsprechenden Selektoren die entsprechenden Werte zu.

Layouttypen und Hilfslinien-Raster

|

115

KAPITEL 7

Listen

Listen gibt es überall: Checklisten, Einkaufslisten, To-do-Listen, Besten- und Letztenlisten und einfachen Rangfolgen begegnet man jeden Tag. Auch im Web-Markup lassen sich Listen relativ einfach finden. Sie werden für alle mögliche Dinge verwendet, oft auch für die Navigation. HTML unterstützt drei Arten von Listen: geordnete Listen (ol), ungeordnete Listen (ul) und Definitionslisten (dl).

Geordnete und ungeordnete Listen Der Hauptunterschied zwischen geordneten und ungeordneten Listen besteht in ihrer Semantik: Gelegentlich haben die Listeneinträge eine gewisse Rangfolge (z.B. Wichtigkeit, Abfolge der Ausführung, Zeitpunkt der Hinzufügung, alphabetische Reihenfolge etc.), und manchmal enthält eine Liste einfach nur Daten, die irgendetwas gemeinsam haben.

Browser-Standarddarstellung für geordnete und ungeordnete Listen Auf den ersten Blick sehen Listen ohne Stildefinitionen aus wie einfache Blockelemente (was sie auch sind), die eine Reihe weiterer Blockelemente enthalten. Tatsächlich haben die Listeneinträge aber eine eigene Darstellungsrolle: list-item. Sie wird ein Stück nach rechts von der linken Außenkante der Liste verschoben dargestellt. Aktuelle Benutzerprogramme verwenden teilweise andere Stilregeln für die Standarddarstellung von Listen als ihre Vorgängerversionen, wie Sie in Tabelle 7-1 sehen. Beachten Sie die 40px-Werte. Sie haben zur Folge, dass Listenmarker bei besonders großer Schrift in einer langen geordneten Liste teilweise am linken Rand verborgen werden. Das lässt sich durch Erhöhen der Werte für margin-left und padding-left und die Verwendung von em-Einheiten anstelle von Pixelwerten (px) vermeiden. Eine Testsuite zum Ermitteln des Layoutverhaltens von Listen finden Sie auf der Website zu diesem Buch (www.htmlcssgoodparts.net).

|

117

Tabelle 7-1: Browser-Stilregeln für die Standarddarstellung von geordneten (ol), ungeordneten (ul) und Definitionslisten Benutzerprogramm •

Firefox 2+

•

Internet Explorer 7+

•

Safari 3+

•

Firefox 1.0.x–1.4.x

•

Internet Explorer 6

•

»Quirks«-Darstellungsmodus

Standard-Stilregeln margin: 1em auto 1em 0; padding-left: 40px;

margin: 1em auto 1em 40px;

Gültige geordnete und ungeordnete Listen erstellen Die Erstellung gültiger Listen ist nicht einfach. Daher haben wir hier eine Reihe von Regeln zusammengestellt, die Ihnen dabei helfen sollen: • Eine Liste muss mindestens einen Eintrag enthalten. • Eine Liste kann nur Listeneinträge (li) enthalten. • Das Elternelement eines Listeneintrags muss immer eine Liste sein. • Sämtliche erlaubten Kindelemente von div-Elementen können auch als Kindelemente von Listeneinträgen verwendet werden. • HTML 4.01 erlaubt die Definition von Listeneinträgen ohne schließende Tags. • Die Attribute start (für ol) und value (für li-Elemente innerhalb von ol) sowie type (für beide) sind nur für Dokumente vom Typ Transitional erlaubt, nicht aber für Dokumente vom Typ Strict. • Der Zähler wird für ol-Listeneinträge mit dem display-Wert none nicht inkrementiert.

Die Eigenschaft »list-style-type« und das Attribut »type« Für die Aufzählungszeichen einer geordneten Liste steht eine große Zahl von Zeichen zur Auswahl. Standardmäßig werden Dezimalzahlen verwendet; Buchstaben und römische Zahlen (beide in Groß- und Kleinschreibung) sind aber ebenfalls möglich. Für ungeordnete Listen gibt es drei Arten von Aufzählungszeichen: Punkte, Kreise und Quadrate. Gut unterstützte Werte für die Eigenschaft list-style-type finden Sie in der unten stehenden Liste. Da das Attribut type offiziell als veraltet gilt, werden die entsprechenden Werte hier nur der Vollständigkeit halber angegeben. • circle (type="circle") • disc (type="disc") [Standard für nicht verschachtelte ungeordnete Listen]

118

|

Kapitel 7: Listen

• square (type="square") • decimal (type="1") [Standard für geordnete Listen] • upper-alpha (type="A") [A,B,C,D,…] • lower-alpha (type="a") [a,b,c,d,…] • upper-roman (type="I") [I,II,III,IV,V,…] • lower-roman (type="i") [i,ii,iii, iv,v,…] • none Der Wert none taucht häufig auf, weil für die Navigation einer Website nur selten Listenmarker verwendet werden – besonders wenn eine Technik zur Bildersetzung (siehe im Abschnitt »Grafische Schriften und das Fahrner Image Replacement« auf Seite 162) verwendet wird. Begrenzte Unterstützung gibt es außerdem für die Eigenschaft list-style-image. Hiermit kann anstelle des vom Browser erzeugten Aufzählungszeichens eine eigene Grafik verwendet werden. Allerdings sind die Resultate bei der Verwendung dieser Eigenschaft so gut wie immer enttäuschend. Eigene Aufzählungszeichen lassen sich deutlich besser durch die Verwendung von background-image und background-repeat definieren, wie in Kapitel 9 besprochen wird. Weitere in CSS 2.1 definierte Werte für list-style-type sind lower-latin, upper-latin, lower-greek und upper-greek. Diese werden aber nicht von allen Browsern unterstützt.

Das »nav«-Element (HTML 5) In HTML 5 gibt es eine Reihe neuer Elemente, mit denen die Struktur von HTMLDokumenten verfeinert werden kann. Das wichtigste dieser Elemente ist mit Sicherheit nav. Andere vorgeschlagene Elemente wie z.B. section können für Seitenautoren sehr nützlich sein, haben aber nur geringe Auswirkungen auf den Benutzer. Das nav-Element ist da schon etwas anderes. Hiermit können Sie Inhalte als »Navigation« kennzeichnen, die vom Benutzerprogramm erkannt und ggf. entsprechend behandelt werden. Browser können das nav-Element also dazu verwenden, die Benutzerfreundlichkeit deutlich zu erhöhen. Navigationsinhalte – sprich: die Listen mit Hyperlinks zu den einzelnen Seiten einer Website oder -applikation – können an verschiedenen Stellen einer Seite oder Applikation auftauchen. Sie werden verwendet, um zu verschiedenen Teilen einer Website, Webapplikation oder zu Abschnitten innerhalb einer Seite zu springen. In einem mehrspaltigen Layout könnten Sie die primäre Navigation beispielsweise in der am weitesten links gelegenen Spalte platzieren, während die sekundäre Navigation sich ganz rechts befindet. Bei einem anderen Design befindet sich die primäre Navigation vielleicht als Menü mit aufklappbaren Untereinträgen am Anfang der Seite, während die sekundäre Navigation vielleicht im Fußteil der Seite zu finden ist. Ohne das nav-Element würden Sie die Navigationselemente sehr wahrscheinlich mit einem div-Element umgeben, das ein passendes class-Attribut trägt. Tatsächlich ist nav Geordnete und ungeordnete Listen

|

119

einer der 20 am häufigsten im Web verwendeten Werte für class überhaupt. Manche Sites verwenden außerdem Werte wie nav1 (primäre Navigation) oder nav2 (sekundäre Navigation), um die verschiedenen Arten von Navigationsinhalten genauer zu unterscheiden. Das Problem bei der ausschließlichen Verwendung von class-Werten für die Kennzeichnung von Navigationsinhalten besteht darin, dass es keine standardisierte, Websiteübergreifende Benennung für diese Elemente gibt. Das nav-Element löst dieses Problem, indem es ein Standardelement bereitstellt, das alle Webautoren für den gleichen Zweck verwenden können. Zudem trägt das nav-Element zur Lösung eines weiteren Dilemmas vieler Autoren bei: Es nimmt ihnen die Entscheidung darüber ab, an welcher Position in der Quellcode-Reihenfolge des Dokuments die Navigationsinhalte platziert werden sollen, ohne dass die Zugänglichkeit negativ beeinflusst wird oder die Benutzbarkeit auf Mobilgeräten mit sehr kleinem Bildschirm eingeschränkt wird.

Überlegungen zu Zugänglichkeit und Usability Bei der Platzierung der Navigationsinhalte in der Quellcode-Reihenfolge sollten Sie einige Punkte bezüglich der Zugänglichkeit bedenken. Zum Beispiel: 1. Es ist eine häufige Sorge, dass die Zugänglichkeit einer Site für Benutzer von Hilfsgeräten (Bildschirmlesegeräten, Braille-Zeilen etc.) leidet, wenn die primäre Navigation am Anfang der Quellcode-Reihenfolge eines Dokuments definiert wird. Es wird befürchtet, dass Benutzer, die die primäre Navigation am Anfang des Dokuments erwarten, sie an anderer Stelle nur schwer finden können. 2. Paradoxerweise gibt es eine gegensätzliche Sorge, dass der Inhalt weniger zugänglich wird, wenn Sie die primäre Navigation am Anfang der Quellcode-Reihenfolge des Dokuments definieren. Das Grund ist, dass sich die Benutzer von Hilfstechnologien auf jeder Seite erst durch die gleiche lange Liste mit Navigationslinks graben müssen, um an den eigentlichen Inhalt zu kommen. Das kann frustrierend und sehr zeitaufwendig sein. 3. Eng verwandt mit dem zweiten Anliegen ist die Frage der Usability in Browsern auf den kleinen Bildschirmen von Mobilgeräten. Eine Reihe mobiler Browser besitzt eigene Möglichkeiten, um die Inhalte in einer einzigen Spalte darzustellen und so auf kleinen Bildschirmen leichter lesbar zu machen. Diese Reformatierung basiert oft auf der Quellcode-Reihenfolge des Inhalts. Befindet sich die primäre Navigation im Quellcode am Anfang des Dokuments, haben diese Browser das gleiche Problem wie die Benutzer von Hilfsgeräten. Die Besucher müssen sich auf jeder Seite zuerst durch eine lange Navigationsliste scrollen, um an den Hauptinhalt zu kommen. In der Praxis umgehen Autoren das zweite und dritte Problem oft, indem sie einen »Direkt zum Hauptinhalt«-Link vor der primären Navigation einfügen. Das hilft zwar, ist aber eigentlich nur ein Hack, weil es vor HTML 5 keine Standardmethode gab, mit der Bildschirmleseprogramme oder Mobilbrowser (ohne heuristische Methoden) die Navigation vom Hauptinhalt unterscheiden konnten.

120

|

Kapitel 7: Listen

Browsern ermöglichen, die Navigation auf andere Weise anzuzeigen Durch das nav-Element in HTML 5 verfügen Browser nun über ein Standardelement, das Navigationselemente eindeutig kennzeichnet. Hierdurch ist es möglich, die Navigation für den Benutzer mit einer eigenen Darstellung zu versehen. Im aktuellen Entwurf der HTML 5-Spezifikation heißt es dazu: Benutzerprogramme (z.B. Bildschirmleseprogramme) für Benutzer, für die das Weglassen von Navigationsinformationen vorteilhaft ist oder denen es hilft, wenn Navigationsinformationen sofort zur Verfügung stehen, können dieses Element verwenden, um zu ermitteln, welche Inhalte einer Seite übersprungen oder nur auf Anforderung dargestellt werden sollen.

Dabei ist das nav-Element nicht nur für Bildschirmleseprogramme vorteilhaft. Auch Browser auf kleinen Mobilgeräten profitieren davon. Solche Geräte können den Inhalt von nav-Elementen beispielsweise durch ein spezielles Softkey-Menü zugänglich machen, anstatt ihn innerhalb des Hauptinhalts einer Seite darzustellen. Natürlich ist die ganze Nützlichkeit des nav-Elements nur ein frommer Wunsch, solange Hilfsgeräte und -programme, Browser auf Mobilgeräten und andere Benutzerprogramme mit diesem Element noch gar nichts anfangen können.

Die Zählweise in geordneten Listen anpassen Angenommen, wir haben die folgende geordnete Liste:

Längere Welllenlängen 1. Rot 2. Orange 3. Gelb 4. Grün

Kürzere Wellenlängen 1. Blau 2. Indigo 3. Violett Der Quellcode für diese Listen sieht wie folgt aus: La ¨ngere Wellenla ¨ngen


• Rot
• Orange
• Gelb
• Gru¨n


Ku ¨ngen ¨rzere Wellenla


• Blau


Geordnete und ungeordnete Listen

|

121


• Indigo
• Violett


Die Beziehung beider Listen sollte klar sein, genau wie ihr Layout. Allerdings sollten Sie das Attribut start im Quellcode-Beispiel nicht übersehen. Die hier gezeigte Implementierung validiert nur bei Verwendung eines Transitional-Dokumenttyps. Leider besteht die einzige verlässliche Methode, um die Zählung einer Liste zu unterbrechen und in einer folgenden Liste fortzuführen, in der Verwendung der veralteten HTML 4-Attribute start und value. Mit dem Attribut start können Sie einen Startwert für die Zählung festlegen, während value (definiert für li) dem Aufzählungszeichen einen Wert zuweist, ab dem die folgenden Listeneinträge weitergezählt werden. Eine Zählfunktion wird auch durch CSS 2.1 implementiert. Allerdings ist sie schwer zu verstehen und kann nur über das Pseudoelement :before aktiviert werden. Hierdurch wird leider verhindert, dass Inhalt und Aufzählungszeichen an einem gemeinsamen Rand ausgerichtet werden können. Außerdem wird diese Zähler-Implementierung vom Internet Explorer noch nicht unterstützt. Um die Folge der Aufzählungszeichen an einer beliebigen Stelle zu beginnen, weisen Sie entweder der Liste das Attribut start oder dem ersten Listeneintrag das Attribut value zu. Unabhängig vom Wert für list-style-type (dieser wird beibehalten) muss für start bzw. value ein numerischer Wert (1,2,3 etc.) angegeben werden.

Andere Verwendungen für Listen Für Listen gibt zwei offensichtliche Anwendungen: Gliederungen und Aufzählungen.

Gliederungen In ihrer einfachsten Form ist eine HTML-Gliederung nichts weiter als eine Folge korrekt verschachtelter geordneter Listen, z.B. mit folgenden Stildefinitionen: ol ol ol ol ol ol ol ol ol ol

ol ol ol ol ol

{ { { { {

list-style-type: list-style-type: list-style-type: list-style-type: list-style-type:

upper-roman; upper-alpha; decimal; } lower-alpha; lower-roman;

} } } }

Die Gliederungsebenen 6 bis 10 wiederholen diese Folge bei Bedarf, wobei die Schrift neben der Standardeinrückung vermutlich weniger betont werden sollte (z.B., indem sie kleiner oder heller dargestellt wird).

Aufzählungen Selten, aber nicht unbekannt ist die Verwendung von Kommas, um mehrere Listeneinträge voneinander zu trennen. Für diese Methode gibt es in Webdokumenten mehrere

122

|

Kapitel 7: Listen

Gründe. Meistens geht um Platzersparnis. Ebenso wahrscheinlich ist es, dass Ihr Chef darauf besteht, die Liste in dieser Form darzustellen. Um eine solche Liste zu implementieren, umgeben Sie den betreffenden Absatz mit einem div-Element, das ein class-Attribut Ihrer Wahl trägt. Dann teilen Sie den Absatz an der Stelle auf, an der die Liste stehen soll. Sie erhalten zwei Absätze, die von einer Liste getrennt werden. Dann verwenden Sie folgende Stilregeln: .liste p, .liste ul, .liste li { display: inline; } .liste ul { list-style-type: none; padding-left:0; }

Endet der Inhalt jedes Listeneintrags korrekt mit einem Komma (oder mit dem abschließenden »und«), sollte das Ergebnis strengen redaktionellen wie auch semantischen Anforderungen genügen. Das scheinbar überflüssige div ist beabsichtigt. Schließlich handelt es sich ja eigentlich immer noch um einen Absatz.

Das Layout für Links im Fußteil anpassen Das Verhalten von inline-block haben wir bereits in Kapitel 6 besprochen. Es kann besonders bei der Arbeit mit Links im Fußteil hilfreich sein. Anstatt mit float-basierten Lösungen zu experimentieren, können Sie das Ziel mit den folgenden Regeln viel einfacher erreichen: #fussteil ul { list-style-type: none; text-align: center; } #fussteil li { display: inline-block; }

Wollen Sie eigene Aufzählungszeichen für die Links im Fußteil verwenden, können Sie den Wert für padding-left für die Listeneinträge entsprechend anpassen und bei Bedarf ein eigenes Hintergrundbild definieren.

Aufzählungszeichen als Hintergrundbild? Sie haben richtig gelesen. Um eigene Aufzählungszeichen zu definieren, wird die CSSEigenschaft list-style-image einfach ignoriert. Eigentlich ist sie gerade für die Definition eigener Aufzählungszeichen gedacht, sie hat aber eine Reihe von Nachteilen. Das erste Problem besteht darin, dass das Bild für list-style-image prinzipiell auf der Grundlinie dargestellt wird. Der Gestalter muss die Grafik in seinem Bildbearbeitungsprogramm also pixelgenau erstellen – eine Anforderung, die das Ziel der Trennung von Inhalt und Darstellung rundheraus übergeht. Der zweite Nachteil ist eine Folge des ersten: Wenn der Besucher nur den Text der Seite zoomt, behalten die Aufzählungszeichen ihre ursprüngliche Größe. Der dritte Nachteil besteht darin, dass der Gestalter bei der Verwendung von list-styleimage keine Sprites verwenden kann, wie es mit den background-Eigenschaften möglich wäre, wenn auch nicht ohne gewisse Gefahren.

Andere Verwendungen für Listen

|

123

Stile für Navigationselemente In diesem Abschnitt verwenden wir den Begriff »nav« sowohl für die Liste, die die Listeneinträge mit den primären Navigationslinks enthält, als auch für das entsprechende Designelement, das letztendlich auf der fertigen Website zu sehen ist. Die primäre Navigation kann entweder vertikal oder horizontal gestaltet werden. Im zweiten Fall werden die Elemente mithilfe von float von links nach rechts angeordnet, während sie im ersten Fall in einer Spalte übereinander erscheinen. Die übrigen Schritte bei der Gestaltung des Navigationsbereichs sind in beiden Fällen recht ähnlich.

Platzierung der primären Navigation in der Quellcode-Reihenfolge Die erste Frage, die man sich stellen muss, lautet: An welcher Stelle soll die Navigation im Quellcode des Templates stehen? Bei der Beantwortung dieser Frage gibt es einige Dinge zu bedenken: Benutzer von Hilfsgeräten und -programmen erwarten, dass die Navigation möglichst früh in der Quellcode-Reihenfolge erscheint. Diese Erwartungshaltung ist ein Relikt der Designtrends und -werkzeuge aus den Neunzigerjahren. In dieser Zeit stand die Navigation fast immer an zweiter Stelle in der Quellcode-Reihenfolge (nach dem Kopfteil der Seite). Gleichzeitig gehen Sie etwas respektvoller mit der Zeit von Benutzern von Hilfstechnologien um, wenn der Hauptinhalt möglichst früh im Quelltext auftaucht. Der Bedarf an diesem Vorgehen wird durch Funktionen zum Überspringen von Listen und Erwartungen seitens der Benutzer abgeschwächt. Er sollte aber nicht ignoriert werden. Die spätere Platzierung der Navigationselemente kann außerdem gewisse Vorteile für die Suchmaschinenoptimierung (SEO) haben. Die Platzierung der Navigation am Seitenanfang ermöglicht die Verwendung einfacherer Stildefinitionen (in gewissem Maße). Wenn Sie die Navigation erst gegen Ende der Quellcode-Reihenfolge einer Seite definieren, müssen Sie sich mit ziemlicher Sicherheit auf den Positionierungskontext verlassen, damit die Navigation an der gewünschten Stelle dargestellt wird. Die Komplexität des Stylesheets nimmt zu. Die Navigation lässt sich leichter warten, wenn sie aus einer eigenen Datei eingebunden wird. Außerdem muss bei einem gut erstellten Template eine Datei weniger inkludiert werden. Das ist bei den meisten Websites keine große Sache. Bei Websites mit vielen Besuchern kann aber selbst eine eingesparte Include-Datei schon die Performance erhöhen.

124

|

Kapitel 7: Listen

Rezept für die primäre Navigation Sobald Sie die Darstellung für Ihre primäre Navigation definiert und sich für einen Platz in der Quellcode-Reihenfolge entschieden haben, können Sie sie in das Layout Ihrer Site integrieren: 1. Versehen Sie die Navigation und ihre Bestandteile mit id-Attributen. Hinweise zur Benennung der id-Attribute finden Sie im Abschnitt »Taxonomie auf die Kaskade anwenden« auf Seite 70. 2. Setzen Sie vom Benutzerprogramm definierte Stile für die Navigation und ihre Bestandteile zurück. Hierfür reicht es meistens schon, etwas wie { margin: 0; padding: 0; list-style-type: none; } in Ihr Stylesheet einzufügen. 3. Platzieren Sie die Navigationsliste im Layout. Die hierfür nötigen Schritte sind davon abhängig, ob es sich um eine horizontale oder vertikale Navigation handelt, wo im Quellcode sie definiert wurde und welche Position sie im Layout einnehmen soll. Am geringsten ist die Gefahr von Fehlern, wenn Sie die Navigation innerhalb des Hauptinhalts definieren. Dieser wird relativ positioniert. Die Navigation selbst kann nun innerhalb der Grenzen des Hauptinhalts absolut positioniert werden. 4. Versehen Sie die Listeneinträge für die Navigationslinks ggf. mit den nötigen Werten für display und box. Auf den meisten Sites werden die Links in gleicher Größe und horizontal ausgerichtet dargestellt. Viele der Stile für die einzelnen Links werden Sie also über den Selektor #nav li ansprechen. 5. Platzieren Sie die Listeneinträge mit den Navigationslinks. Bei horizontal ausgerichteten Navigationselementen geht das per float: left oder position: relative. Beim zweiten Ansatz sind Änderungen am Design komplizierter. Dafür kann die erste Methode zu Problemen mit dem Internet Explorer führen. Vertikal ausgerichtete Navigationselemente werden in diesem Schritt vermutlich per display: block definiert. Die Wahrscheinlichkeit mehrerer Verschachtelungsebenen ist hier größer als bei horizontaler Ausrichtung. Die Listen für verschachtelte Navigationselemente sollten jeweils einen eigenen id-Wert bekommen (z.B. #navSubUeberUns). Weitere Details zu diesem Schritt finden Sie im Abschnitt »Quellcode-Reihenfolge und präzises Layout für die Navigation« auf Seite 105. 6. Vergrößern Sie Navigationslinks auf die volle Höhe und Breite der enthaltenen Listeneinträge. Hierfür definieren Sie die Darstellungsrolle der Links (a) als display: block. Die Vorteile dieser Methode werden in Kapitel 8 beschrieben. Um die richtigen Werte für width, height und padding zu finden, ist vermutlich etwas Rechenarbeit nötig. Außerdem kann es hilfreich sein, overflow: hidden für die enthaltenen Listeneinträge zu verwenden. 7. Verwenden Sie bei Bedarf die »Fahrner Image Replacement«-Methode für Ihre Listeneinträge und Links. Die »Fahrner Image Replacement«-Methode (FIR, eine Methode zur Ersetzung von Text durch Bilder) wird in Kapitel 9 beschrieben. Hierbei ist es möglich, dass sowohl die Navigationselemente (li) als auch die Links mit Hintergrundbildern versehen werden. Befindet sich der Mauszeiger über einem Link (»hover«), wird ggf. ein anderes Hintergrundbild dargestellt als für die übrigen Links. Stile für Navigationselemente

|

125

Rezept für die Navigation im Fußteil Die Stile für die sekundäre Navigation sind normalerweise einfacher zu definieren als für die primäre Navigation – einerseits, weil ihre Position in der Quellcode-Reihenfolge meistens klar ist (am Ende, vor den Copyright-Hinweis), andererseits, weil die Links selten konstante Größenangaben besitzen. Sehr wahrscheinlich wird für die sekundäre Navigation eine der drei folgenden Layoutmethoden verwendet: Zentriert, umgeben mit genügend Leerraum, wodurch mögliche Zeilenumbrüche nicht zu Kollisionen mit dem darunter stehenden Inhalt führen Ein Beispiel für dieses Layout finden Sie auf den öffentlichen Seiten von PayPal. Bei dieser Methode wird die Darstellungsrolle der Listeneinträge als display: inline definiert, die seitlichen Begrenzungslinien mit entsprechenden Werten für border. Mehr oder weniger bündig mit einer der unteren Ecken des Seitenlayouts Dieser Ansatz ist auf den Facebook-Benutzerseiten zu sehen. Der Hauptunterschied zwischen dieser Methode und der zuvor beschriebenen Zentrierung besteht in der Textausrichtung (text-align: right anstelle von text-align: center) und der vertikalen Ausdehnung (auf eine Zeile beschränkt, keine Umbrüche). Als Liste mit minimalen Stildefinitionen am Ende der dritten Spalte der Site Dieser Ansatz wird bei Weblogs immer beliebter. Hierbei befindet sich die sekundäre Navigation sowohl im Quellcode als auch in der Darstellung innerhalb der dritten Spalte. Das letzte beschriebene Layout ist völlig unproblematisch. Hierbei gibt es nur zwei Kleinigkeiten mit Trennlinien und Leerraum zu beachten. Hier sind die nötigen Schritte: 1. Versehen Sie die Liste oder ihre Einträge mit der Definition list-style-type: none. 2. Soll die Liste zentriert werden, definieren Sie die nötigen Werte für width, margin-left und margin-right. 3. Legen Sie für die Navigationsliste den gewünschten Wert für text-align fest und definieren Sie display-inline für die einzelnen Einträge. 4. Geben Sie sowohl der Liste als auch ihren Einträgen die passenden Werte für padding und line-height, es sei denn, Sie haben für die Links display: inline-block festgelegt. In diesem Fall sollten die fraglichen Box- und Texteigenschaften zugewiesen werden. Auf lange Sicht ist es einfacher, für die linke und rechte Seite jedes Eintrags den gleichen Wert für padding zu verwenden, auch wenn das auf den ersten Blick nicht so scheint. 5. Fügen Sie die Trennzeichen für die einzelnen Listeneinträge ein. Sollen hierfür eigene Aufzählungszeichen verwendet werden, definieren Sie diese am besten als Hintergrundbilder. 6. Kennzeichnen Sie das erste und letzte Element der Liste mit passenden class- oder id-Werten, und umbrechen Sie die Liste für die gewünschte Zeilenzahl. Oft hilft hier

126

|

Kapitel 7: Listen

die Verwendung der Eigenschaft white-space. Besitzen die Elemente einer Zeile die gleichen erkennbaren semantischen Eigenschaften, können Sie diese auch bedenkenlos auf mehrere Listen verteilen. 7. Passen Sie die Stilregeln nach Bedarf an die Anforderungen des Gesamtkonzepts an.

Definitionslisten Während geordnete und ungeordnete Listen einfache Datensammlungen sind, deren Elemente vage Gemeinsamkeiten haben, besteht bei Definitionslisten eine wesentlich engere Beziehung zwischen dem Definitionsbegriff (dt) und der Definition für diesen Begriff (dd). Auf jeden Begriff folgen eine oder mehrere Definitionen, die sich direkt auf den Begriff beziehen müssen. Um gültig zu sein, muss eine Definitionsliste mindestens ein dt- oder dd-Element enthalten. Um semantisch nützlich zu sein, muss die Liste jedoch mindestens je eines dieser Elemente besitzen. dt-Elemente dürfen nur Text und Inline-Elemente enthalten, während dd-Elemente die gleichen Elemente enthalten können wie li. Weder die Anzahl noch die Anordnung der dd- und dt-Elemente in einer Definitionsliste sind festgelegt. Es liegt beim Autor, die Elemente sinnvoll zu verwenden.

Stile für Definitionslisten Für Definitionslisten verwenden Benutzerprogramme nur minimale Stildefinitionen, die sich wie folgt beschreiben lassen: • dt-Elemente werden so ähnlich dargestellt wie Absätze ohne Außenabstände. • dd-Elemente werden per margin-left eingerückt, besitzen aber prinzipiell keine Aufzählungszeichen. • dd-Elemente besitzen genauso wenige Einschränkungen für die möglichen Inhalte wie li-Elemente. • Text innerhalb von Definitionslisten besitzt standardmäßig keine besondere Formatierung. Am häufigsten werden Definitionslisten für Lexika (Glossare, Wörterbücher) und transkribierte Dialoge verwendet. Das erste Szenario ist relativ einfach, und die Browser-Standardstile sind für diesen Zweck meistens ausreichend. Besonders typografiebewusste Designer wollen den Inhalt von dt möglicherweise fettgedruckt darstellen. Für die Gestaltung von Dialogen werden dagegen andere Werte benötigt. Hierfür sind folgende Änderungen nötig: • Die Breite für dt-Elemente sollte mit einem eigenen und konstanten Wert für width und der Deklaration clear: left versehen werden. • Der margin-left-Wert für dd-Elemente sollte etwas größer sein als die Breite für dt-Elemente.

Definitionslisten

|

127

• Der Inhalt von dt-Elementen sollte eine eigene typografische Gestaltung erhalten (z.B. per font-weight: bold oder text-transform: uppercase). Da die hier beschriebenen Formen direkt von Druckerzeugnissen inspiriert sind, gibt es reichlich gute Gründe, sie im folgenden Abschnitt zu übernehmen.

Wörterbuch-Beispiel Die folgenden Zeilen stammen aus dem American Heritage® Dictionary of the English Language, vierte Auflage: e
con
o
my n. Inflected forms: pl. e
con
o
mies 1. a. Careful, thrifty management of resources, such as money, materials, or labor: learned to practice economy in making out the household budget. b. An example or result of such management; a saving. 2. a. The system or range of economic activity in a country, region, or community: Effects of inflation were felt at every level of the economy. b. A specific type of economic system: an industrial economy; a planned economy. 3. An orderly, functional arrangement of parts; an organized system: »the sense that there is a moral economy in the world, that good is rewarded and evil is punished« (George F. Will). 4. Efficient, sparing, or conservative use: wrote with an economy of language. 5. The least expensive class of accommodations, especially on an airplane. 6. Theology The method of God’s government of and activity within the world. adj. Economical or inexpensive to buy or use: an economy car; an economy motel.

Hier ist der Quelltext für die oben gezeigte Passage:

e·con·o·my

n. Inflected forms: pl. e·con·o·mies


• 
  
  
• Careful, thrifty management of resources, such as money, materials, or labor: learned to practice economy in making out the household budget.
• An example or result of such management; a saving.



• 
  
  
• The system or range of economic activity in a country, region, or community: Effects of inflation were felt at every level of the economy.
• A specific type of economic system: an industrial economy; a planned economy.



• An orderly, functional arrangement of parts; an organized system: the sense that there is a moral economy in the world, that good is rewarded and evil is punished (George F. Will).


128

|

Kapitel 7: Listen


• Efficient, sparing, or conservative use: wrote with an economy of language.
• The least expensive class of accommodations, especially on an airplane.
• Theology The method of God’s government of and activity within the world.


adj. Economical or inexpensive to buy or use: an economy car; an economy motel.

Die für die Darstellung verwendeten Stildefinitionen finden Sie auf der Website zu diesem Buch. Das oben stehende Markup hat ein paar interessante Eigenheiten: Die verschiedenen Definitionen werden im Quelltext nicht als aufeinanderfolgende dd-Elemente, sondern als Elemente einer geordneten Liste markiert Der Grund hierfür ist, dass der Gestalter – in diesem Falle ich – entschieden hat, dass es besser ist, die Nummerierung beizubehalten, als sich an einer sehr geringfügigen semantischen Angelegenheit aufzureiben. Würde der Internet Explorer so wie seine Mitbewerber automatisch erzeugte Nummerierungen unterstützen, wäre ich nicht zu dieser Entscheidung gezwungen. Entscheidungen dieser Art sind bei mangelnder Browserunterstützung nicht selten. Benutzern anderer Browser als Internet Explorer werden die verschiedenen Definitionen als Inline-Elemente angezeigt Die Verwendung von display: inline sorgt dafür, dass die Aufzählungszeichen für die Listeneinträge nicht mehr angezeigt werden. Sie müssten die Listenmarker also über die Funktion counter() (ein möglicher Wert der Eigenschaft content) selbst wieder einfügen. Setzt der Gestalter die Darstellung in einem per Conditional Comments eingebundenen Stylesheet für den Internet Explorer zurück, sehen dessen Benutzer hier einfache geordnete Listen. Der Quellcode wird mit diversen Vorkommen von span und class zugemüllt. Die Fülle an Inline-Markup beleuchtet die Situation der Befürworter von Mikroformaten. Sie sind der Meinung, dass man Dinge, die man semantisch kennzeichnen kann, auch kennzeichnen sollte. Aus der Sicht des Gestalters bietet das zusätzliche Markup die Möglichkeit, die Kennzeichnungen entsprechend unterschiedlich darzustellen. Lässt man die Nummerierung und kleinere Details weg, kann eine allgemeine dt/ddStruktur verwendet werden: economy Careful, thrifty management of resources, such as money, materials, or labor: learned to practice economy in making out the household budget. An example or result of such management; a saving. The system or range of economic activity in a country, region, or community:

Definitionslisten

|

129

Effects of inflation were felt at every level of the economy. A specific type of economic system: an industrial economy; a planned economy. An orderly, functional arrangement of parts; an organized system: “the sense that there is a moral economy in the world, that good is rewarded and evil is punished” (George F. Will). Efficient, sparing, or conservative use: wrote with an economy of language. The least expensive class of accommodations, especially on an airplane. The method of God’s government of and activity within the world. Economical or inexpensive to buy or use: an economy car; an economy motel. ...

Beispiel für einen Dialog Ein Dialog ist dagegen etwas völlig anderes als eine Definitionsliste, aber die Teile passen gut zusammen. Hier eine Passage aus Pygmalion, Akt 4, von George Bernard Shaw: HIGGINS: [In despairing wrath outside] What the devil have I done with my slippers? [He appears at the door] LIZA: [Snatching up the slippers, and hurling them at him one after the other with all her force] There are your slippers. And there. Take your slippers; and may you never have a day’s luck with them! HIGGINS: [Astounded] What on earth –! [He comes to her] What’s the matter? Get up. [He pulls her up] Anything wrong? LIZA: [Breathless] Nothing wrong – with you. I’ve won your bet for you, haven’t I? That’s enough for you. I don’t matter, I suppose. HIGGINS: You won my bet! You! Presumptuous insect! I won it. What did you throw those slippers at me for? LIZA: Because I wanted to smash your face. I’d like to kill you, you selfish brute. Why didn’t you leave me where you picked me out of – in the gutter? You thank God it’s all over, and that now you can throw me back again there, do you? [She crisps her fingers frantically]

Hier ist der dazugehörige Quelltext:

Higgins In despairing wrath outside What the devil have I done with my slippers? He appears at the door Liza Snatching up the slippers, and hurling them at him one after the other with all her force There are your slippers. And there. Take your slippers; and may you never have a day’s luck with them! Higgins Astounded What on earth—! He comes to her What’s the matter? Get up. He pulls her up Anything wrong? Liza Breathless Nothing wrong — with you.

130

|

Kapitel 7: Listen

I’ve won your bet for you, hav’n’t I? That’s enough for you. Idon’t matter, I suppose. Higgins You won my bet! You! Presumptuous insect! I won it. What did you throw those slippers at me for? Liza Because I wanted to smash your face. I’d like to kill you, you selfish brute. Why didn’t you leave me where you picked me out of — in the gutter? You thank God it’s all over, and that now you can throw me back again there, do you? She crisps her fingers frantically

Wie beim Wörterbuch-Beispiel werden auch hier span-Elemente und class-Attribute genutzt, um zusätzliche Informationen bereitzustellen, in diesem Fall die Bühnenanweisungen (stageDir). Was die Stylesheet-Regeln angeht, entspricht der allgemeine Ansatz dem zuvor beschriebenen, außer dass für das Element dt die Regel clear: left verwendet wurde. Der letzte deutliche Unterschied zwischen der Darstellung und dem Quelltext besteht darin, dass die Namen der Rollen in Großbuchstaben dargestellt werden. Wie in Kapitel 12 beschrieben, wird hierfür die Eigenschaft text-transform eingesetzt. Die genauen Stylesheet-Regeln für das Dialog-Beispiel finden Sie auf der Website zu diesem Buch. Irgendwann gab es einmal den Vorschlag, in HTML 5 ein dialog-Element einzuführen. Inzwischen wurde dieses Element aber wieder aus der Spezifikation entfernt.

Aufmerksame Webentwickler werden feststellen, dass sie ständig mit Listen zu tun haben. Der Nutzen und die Allgegenwart von Listen werden nur von der Herausforderung übertroffen, sie auch angemessen darzustellen.

Definitionslisten

|

131

KAPITEL 8

Überschriften, Hyperlinks, Inline-Elemente und Zitate

Der Bedarf nach leistungsfähigen Stildefinitionen für eine Site beginnt sicherlich beim Layout und endet mit Akzenten. Für Hervorhebungen bieten HTML und CSS vielseitige Möglichkeiten, insbesondere bei Überschriften und Hyperlinks. HTML definiert außerdem eine Reihe von Inline-Elementen, die es ermöglichen, verschiedene Inhalte sehr detailliert zu unterscheiden.

Überschriften und gutes Schreiben HTML definiert sechs Abstufungen für Überschriften: von h1 (am wichtigsten) bis h6 (am unwichtigsten), wie in Abbildung 8-1 zu sehen ist. (Die Schriftgrößen und Außenabstände sind die vom Browser definierten Stile für den Internet Explorer 8.) Für Uneingeweihte sind Überschriften nicht immer einfach zu handhaben: Standardmäßig werden die drei wichtigsten Überschriften für den Normalbenutzer irritierend groß dargestellt. Die Anpassung der oberen und unteren Außenabstände kann ebenfalls schnell zu einem Großprojekt werden.

Abbildung 8-1: Die sechs Abstufungen für Überschriften in der Darstellung durch den Internet Explorer 8 |

133

HTML und CSS besitzen absichtlich alle nötigen Mittel, um sämtliche Probleme zu meistern, die einem Entwickler bei der Arbeit mit Überschriften begegnen können. Werden Überschriften korrekt mit den Elementen für den eigentlichen Inhalt verbunden, heben sie möglicherweise wichtige Details der Dokumentenstruktur hervor. Gleichzeitig geben sie dem Gestalter die Möglichkeit, bei Bedarf auf bestimmte Überschriftengruppen gesondert einzugehen.

Gedruckte Überschriften Selbst wenn wir uns nicht damit befassen, wie Überschriften gestaltet werden sollen, bleiben einige Fragen offen. Hierzu gehört ihre Verwendung zur Kennzeichnung bestimmter Inhalte. Außerdem könnte man sich fragen, warum man die Überschriftenelemente überhaupt verwenden soll. Hierfür gibt es eine gute Erklärung aus dem Printbereich. Selbst der kürzeste gedruckte Text lässt sich meist in kleinere Abschnitte unterteilen, die einzeln und gemeinsam mit Überschriften versehen werden können. Im Falle eines Sachbuches – wie diesem – erhält jeder größere Bereich (der ein oder mehrere Kapitel enthält) eine Überschrift der Kategorie A (entsprechend h1). Der Buchtitel hat seinen eigenen Kontext und wird separat gestaltet. Überschriften der Kategorie B (h2) sind für Kapitelüberschriften reserviert, C-Überschriften (h3) für die wichtigsten Abschnitte eines Kapitels und so weiter. In anderen Büchern werden die Abschnitte selbst wie kleine Bücher behandelt, d.h., jeder Bereich erhält seine eigene Titelseite, während die einzelnen Kapitel mit A-Überschriften gekennzeichnet werden. Abgesehen davon, dass es ohnehin eine gute Idee ist, dem Leser bei der Orientierung im Dokument zu helfen und Änderungen im Kontext anzuzeigen, helfen Überschriften, den Inhalt in leicht verdauliche Happen zu unterteilen. Sämtliche Zuweisungen von Überschriften für bestimmte Teile beziehen sich auf das Buch als Ganzes. Dinge wie Datentabellen und Illustrationen haben zwar auch Beschriftungen, diese zählen aber nicht als Überschriften, sondern nur als Markierung für untergeordnetes (aber trotzdem wertvolles) Material. In HTML entspricht die Hierarchie von h1–h6 den Überschriften in gedruckten Büchern und Artikeln. Allerdings gibt es noch zwei weitere Dinge zu bedenken: Der einzige Ort, an dem das title-Element zuverlässig dargestellt wird, ist die Titelzeile des Browsers Das zwingt gewissenhafte Entwickler dazu, diese Information in einem h1- (oder vielleicht in einem h2-) Element am Anfang der Quellcode-Reihenfolge des Dokuments zu wiederholen. Das gilt auch, wenn der Dokumententitel einen größeren Zusammenhang herstellt, wie im folgenden Abschnitt besprochen wird. Ist der Firmenname besonders wertvoll, z.B. weil viele Besucher ihn in eine Suchmaschine eingeben, kann es vorteilhaft sein, ihn in einem h1-Element zu nennen Dieser Punkt basiert auf der Annahme, dass jede Seite jeweils nur ein h1-Element enthält, das am Anfang der Quellcode-Reihenfolge platziert wird. 134

|

Kapitel 8: Überschriften, Hyperlinks, Inline-Elemente und Zitate

Optimale Platzierung für Überschriften Traditionell gilt: Je höher die Gewichtung der Überschrift ist, desto größer ist der Umfang des vorgestellten Inhalts. Die Verwendung von Überschriften ist das Gegenteil der Benutzung von »Container-Elementen«, die in den Quellcodebeispielen im Abschnitt »Mit Dokumentenbäumen arbeiten« auf Seite 18 und im Abschnitt »Angewohnheit 4: Auf Kurs bleiben« auf Seite 58 zu sehen sind. Jeder korrekt zugewiesene Container verweist auf den Kontext einer Passage oder verstärkt so die Modularität des Inhalts. Im Web besteht der Hauptzweck von Überschriften darin, diese modularen Einheiten für Menschen lesbar anzuzeigen. Bei gewissenhafter Verwendung der Überschriftenelemente versieht ein Gestalter oder Entwickler jedes div-Element auch mit einer Überschrift der entsprechenden Gewichtung. Da alle diese Markup-Elemente einen mehr oder weniger breiten Geltungsbereich anzeigen sollen, wird normalerweise davon ausgegangen, dass die erste Überschrift ein h1-Element sein sollte. Hierauf folgen h2, h3 usw., wobei der Geltungsbereich immer enger wird. Die Gewichtung der Überschriften sollte immer ihrer jeweiligen Rolle entsprechen. Gleichzeitig sollte das Überspringen einer Überschriftenebene nach Möglichkeit vermieden werden. Normalerweise verpacke ich den Titel der Website und einen Link auf die Homepage in einem h1-Element (außer in der Druckversion). Für die Überschrift bzw. den Titel der Seite verwende ich ein h2-Element; die verschiedenen Abschnittsüberschriften erhalten je nach Bedarf eine der übrigen vier Überschriftsebenen. Auch ohne div-Elemente für die Markierung des Kontexts kann Software aus der Platzierung der Überschriften den Zusammenhang des dazwischenliegenden Inhalts zumindest so gut ableiten, um daraus bei Bedarf ein Inhaltsverzeichnis zu erstellen. Außerdem hat der Inhalt der Überschriftenelemente, insbesondere h1 und h2, einen übermäßigen Einfluss auf die Suchmaschinenrangfolge. Die tatsächlichen Auswirkungen unterscheiden sich von Anbieter zu Anbieter.

Stile für Überschriften Ein häufiger Grund für Kopfschmerzen bei Gestaltern ist die Tatsache, dass Außenabstände von Überschriften anders funktionieren als bei den meisten anderen Blockelementen.

Größe und Schriftart Die meisten guten Designs verwenden anstelle der Browser-Standarddarstellung eigene Stildefinitionen für Überschriften. Das liegt nicht zuletzt daran, dass die meisten Browser Überschriften einfach zu groß und hässlich darstellen.

Stile für Überschriften

|

135

Der erste Schritt zu attraktiven Überschriften besteht in der typografischen Gestaltung. Hierzu gehören Angaben zu Größe, Zeilenhöhe (line-height), Schriftart, Farbe und Boxverhalten für den gesamten auf der Site verwendeten Text. Zumindest sollten Überschriften eigene Größenangaben erhalten, die auf die verschiedenen Inhaltsebenen und die Absicht des Designers abgestimmt sind. Eine ausführliche Diskussion der Typografie finden Sie in Kapitel 12.

Die Größen von Überschriften anpassen Die erste Aktion, die Gestalter vor der Arbeit an Überschriften durchführen sollten, besteht darin, die Standardstile des Browsers für die Boxeigenschaften und die Werte für font-size zurücksetzen. Hier ist meine Empfehlung: h2 { margin: 0 0 1.5em 0; padding: 0; border: 0; ... }

Damit sind aber noch nicht alle gestalterischen Probleme gelöst. Auch line-height braucht etwas Aufmerksamkeit. Wichtiger sind aber die Positionen der Überschriften innerhalb der Seitenstruktur. Wird die Überschrift mit eigenen Boxwerten an den dazuhörigen Abschnittscontainer angepasst, ist der Aufwand beim Zurücksetzen nicht ganz so groß. Ansonsten sind für die Beziehung zwischen Überschriften und den folgenden Blockelementen ebenfalls Anpassungen nötig. Je nach Designvorgaben kann der Gestalter die Änderungen auch mit dem Selektor für benachbarte Geschwisterelemente (+) vornehmen, sofern dies von den erwarteten Browsern unterstützt wird. Schwieriger wird die Kontrolle der Überschriftenhöhe, wenn man sich strikt an das Designraster halten muss oder andere Platzbeschränkungen eine Rolle spielen. Am einfachsten definiert man für Überschriften eine feste Größe und beschränkt diese mit overflow: hidden. Allerdings ist dieser Ansatz so unflexibel, dass er für die meisten Sites nicht verwendbar ist. Ein weiterer Ansatz, die Höhe von Überschriften in einem Raster zu steuern, besteht darin, hohe line-height-Werte für den Haupttext zu verwenden, so dass alle Schriftgrößen auf einer Zeile mit verschiedenen Werten für line-height untergebracht werden können. Allerdings ist dieser Ansatz keine gute Idee für Sites, auf denen möglichst wenig gescrollt werden soll. Eine weitere Lösung ist eine Kombination aus Anpassungen von Größe und Kontrast, um so den Bedarf an unterschiedlichen Schriftgrößen (und damit Zeilenhöhen) zu verringern. Die beste Methode zur Steuerung der Überschriftenhöhen unterscheidet sich von Projekt zu Projekt und von Designer zu Designer. Jedenfalls ist das Ziel, die Überschriftenhöhen zu kontrollieren, ein gutes Beispiel für die Zusammenarbeit zwischen Gestaltern, Designern und Inhaltsautoren.

136

|

Kapitel 8: Überschriften, Hyperlinks, Inline-Elemente und Zitate

Überschriften hervorheben Die Überschriften einer Site können außerdem Begrenzungslinien enthalten. Diese können eine beliebige Länge, Farbe und beliebige Stile besitzen. Sie werden für einen Blocktext entlang einer der Außenkanten oder im Falle von Überschriften manchmal auch auf der Grundlinie platziert. Im Falle einfacher durchgehender Linien entlang der Außenkanten können Begrenzungslinien einfach mit der Eigenschaft border-bottom (oder auch border-top) definiert werden, z.B. mit h3 {border-bottom: 1px solid rgb(85,170,255); }. Die meisten anderen Akzente für Überschriften werden normalerweise über Hintergrundbilder realisiert, die in Kapitel 9 besprochen werden.

Markup für Links Die HTML-Inline-Elemente werden benutzt, um Wörter, Sätze oder kurze Passagen innerhalb größerer Inhaltsblöcke gemäß ihrer Bedeutung zu markieren. Am bekanntesten sind neben Hyperlinks – dem eigentlichen Grund des ganzen Unternehmens – und Formularelementen die Elemente, mit denen Hervorhebungen realisiert werden. Mit dem Begriff »Link« meinen wir in diesem Abschnitt alle Arten von mit dem a-Element erstellten Hyperlinks. Informationen zum Element link finden Sie in Kapitel 3 und auf der Website zu diesem Buch (www.htmlcssgoodparts.net).

Formularelemente werden in Kapitel 13 besprochen, während die semantisch orientierten Inline-Elemente am Ende dieses Kapitels behandelt werden. Es gibt eine Reihe von Gründen, bei der Implementierung von Links sehr aufmerksam zu sein: • Links sind prinzipiell interaktiv; wenn der Benutzer einen Link aktiviert, sorgt er dafür, dass etwas Neues passiert. Schon aus diesem Grund sollten Links immer gut vom umgebenden Inhalt zu unterscheiden sein. • Die Gestaltung von Links kann sich auf bestimmte Besucherinteressen beziehen. • Die Standard-Browserstile für Links basieren auf veralteten Annahmen über die Benutzerumgebung, die auf aktuellen Websites nur noch äußerst selten anzutreffen ist.

Link-Attribute Für Links (a-Elemente) können die folgenden Attribute definiert werden: href

Dieses Attribut ist das Herz der Applikationsschicht des Webs. Es definiert das Linkziel und erspart dem Benutzer die Eingabe oder das Einfügen von URIs in das Adressfeld des Browsers.

Markup für Links

|

137

target

Dieses Attribut übernimmt den Namen eines Fensters, Tabs oder Frames, in dem das Linkziel angezeigt werden soll. In den DTDs vom Typ Strict ist es nicht erlaubt. Die dazugehörige Funktionalität wird in diesem Fall in der Verhaltensschicht der Site definiert. Weitere Informationen zu target im Zusammenhang mit Frames finden Sie in Kapitel 14. rel

Wie bei link-Elementen kann dieses Attribut verwendet werden, um die Beziehung zwischen dem aktuellen Dokument und dem Linkziel zu beschreiben. Am häufigsten wird hierfür der Wert nofollow verwendet. Damit werden die Crawler-Programme der Suchmaschinen angewiesen, das Linkziel nicht in ihren Index aufzunehmen. Die nofollow-Funktion wurde von Google erfunden, damit Spam-Links in benutzererzeugten Inhalten bei der Berechnung der Rangfolge kein Gewicht zukommt. Abgesehen von nofollow gibt es für rel keine allgemein definierten Werte. Außerdem gibt es eine Reihe universeller Attribute, von denen title für Links wohl am wichtigsten ist.

Virtuose Verwendung des »href«-Attributs Bei href-Attributen sieht man manchmal den Wald vor lauter Bäumen nicht. Sie geben den Wert an und machen dann mit anderen Dingen weiter. Trotzdem gibt es vier Prinzipien, denen Sie bei der Erstellung von Links folgen sollten: Genauigkeit Zwischen Eingabefehlern und Links besteht eine lange, kranke und ziemlich verkorkste Beziehung. Daher ist es absolut wichtig, Links in der fertigen Version der Website durch Aktivieren zu überprüfen, und zwar bevor die Website veröffentlicht wird. Gültigkeit Die Struktur von URIs folgt einer detaillierten Spezifikation (IETF RFC 2396, http://www.ietf.org/rfc/rfc2396.txt), die festlegt, wie der Inhalt von Links aufgebaut ist. Bestimmte Zeichen müssen in URIs geschützt (escapt) werden, damit das Dokument validiert. Die Kodierung von URIs wird im Kasten »URL-Kodierung im Detail: ASCII-Entities« auf Seite 255 behandelt. Aktualität Mit der Zeit entwickeln Webdokumente den Hang, zu verschwinden oder verschoben zu werden. Das Ergebnis sind die berüchtigten »toten Links«. Es gehört zum guten Ton im Web, dass die Betreiber von Websites Weiterleitungen oder andere Ausfallsicherungen für verschobene oder anderweitig außer Reichweite bewegte Dokumente einrichten. Das passiert aber leider nicht immer. Auf jeden Fall muss irgendjemand überprüfen, ob die Links noch aktuell sind. Ich empfehle, sämtliche Links nach Möglichkeit vierteljährlich zu überprüfen. Einen Überblick über die Probleme und Lösungen im Zusammenhang mit der Aktualität von Links, zum

138

|

Kapitel 8: Überschriften, Hyperlinks, Inline-Elemente und Zitate

Beispiel über die Bequemlichkeit automatischer Link-Überprüfungen, finden Sie auf der Website zu diesem Buch. Kürze Solange die Suchmaschinenoptimierung (SEO) nicht so wichtig ist, sollten die Werte für href so kurz wie möglich sein, ohne dabei allerdings die enthaltenen Hinweise auf den Inhalt des Ziels zu verwässern. Kürzere href-Werte sorgen für eine bessere Lesbarkeit des Quellcodes und verringern die Gefahr von Eingabefehlern.

Links auf bestimmte Teile eines Dokuments Leser, deren HTML-Wissen bereits etwas angestaubt ist, werden das Attribut name kennen, das ausführlich in Kapitel 14 behandelt wird. Heutzutage wird stattdessen das Attribut id mit entsprechenden Werten verwendet, was Links im gleichen Dokument vereinfacht und mehr Bedeutung verleiht. Gegeben sei folgender Link: ...

Klickt der Benutzer auf diesen Link, gelangt er nicht nur auf die Seite schwalbe.html, sondern direkt nach dem Laden der Seite zu dem Element mit dem id-Wert europaeisch. Manchmal müssen die Benutzer wissen, dass ein solches Linkziel existiert (z.B. bei »Permalinks«). Eine beliebte Methode, die in den meisten aktuellen Browsern funktioniert, besteht darin, einen »Selbstlink« am Ende seines Elternelements einzufügen, diesen mit einem konsistent verwendeten Symbol zu kennzeichnen und Stile wie die folgenden zu definieren: p.enthaeltSelbstLink a { color: #fff; } /* entspricht der Hintergrundfarbe */ p.enthaeltSelbstLink:hover a { color: #999; } /* etwas Kontrast, aber nicht so viel wie fu ¨r den Haupttext */ ...

U¨ber die Geschwindigkeit von europa ¨ischen Schwalben wird viel spekuliert, besonders auf ironische Weise. →



Dies gibt Besuchern, die sich mit der Website auskennen, die Möglichkeit, den Wert von href zu kopieren und in ihren eigenen Webinhalten weiterzuverwenden.

Effektiver Inhalt für Links und Werte für das »title«-Attribut Nicht immer haben Links auch einen idealen Inhalt. Das kann verschiedene Gründe haben: • Viele Links sind nicht als Teil des Seiteninhalts, sondern ihrer Schnittstelle angelegt. Das verleitet Designer dazu, die Links mit ideografischen Inhalten oder nur den kürzesten Stichwörtern zu füllen. • Auf Seiten, auf denen es um Einkäufe oder um die Erstellung von Benutzerkonten geht, enthalten viele Links aus gutem Grund eine entsprechende Aufforderung (z.B. »Hier klicken«) anstelle einer aussagekräftigen Beschreibung. Markup für Links

|

139

• Manchmal wird bei der Erstellung einer Site (oder eines Teils davon) davon ausgegangen, dass der Benutzer den Inhalt in einem bestimmten Kontext betrachtet. • Vielleicht hat sich der Designer entschieden, ein Logo oder ein anderes Bild als Inhalt für den Link zu verwenden. Wenn sich die oben beschriebenen Umstände vermeiden lassen, sollten Links drei der vier für href-Attribute beschriebenen »Tugenden« in der hier beschriebenen Reihenfolge aufweisen: Kürze, Genauigkeit und Aktualität. Die häufigsten Gründe, die beschreibende Links verhindern, führen direkt zum Attribut

title, das besonders Benutzern von Hilfstechnologien dienlich sein kann.

Gehen wir von den gerade beschriebenen Situationen aus, wären die folgenden Werte für title, jeweils der Situation entsprechend, angemessen: Schlüsselwörter der Schnittstelle Kontakt

Handlungsaufforderung Klicken Sie hier, um sich fu ¨r unsere E-Mail-Liste anzumelden.

Einzelner Kontext

Logografik als Inhalt eines Links Dieser Artikel ist erha¨ltlich bei:
...


Beachten Sie besonders das Beispiel »Handlungsaufforderung«. Hier erhält der Link seinen Kontext erst durch den Inhalt des title-Attributs. Der Inhalt des Links dient als Beispiel für Dinge, die vermieden werden sollten. Trotzdem sind knappe Handlungsaufforderungen auf Startseiten notwendig. Nach Möglichkeit sollte der Autor etwas Verständlicheres verwenden als einfach nur »Hier klicken«. Wird das title-Attribut gewissenhaft eingesetzt, erleichtert dies die automatische Erfassung des Dokumenteninhalts und der ausgehenden Links. So wie Überschriften die größere Struktur des Dokuments beschreiben, können title-Attribute den Inhalt im Detail beschreiben. Neben den hier beschriebenen Vorteilen besitzt das title-Attribut aber auch gewisse Einschränkungen. Dies gilt besonders für die Zugänglichkeit für Benutzer, die für die Navigation auf der Seite die Tastatur verwenden, was sich (beispielsweise) mit speziellem

140

|

Kapitel 8: Überschriften, Hyperlinks, Inline-Elemente und Zitate

JavaScript-Code reparieren lässt. Aus diesem und anderen Gründen sollten für das Verständnis wichtige Inhalte immer sofort sichtbar sein.

Stildefinitionen für Links Links sind auch ohne zusätzliche Skripte schon interaktiv. Daher ist die Aufmerksamkeit des Gestalters hier besonders gefragt. Verlässt man sich auf die Standarddarstellung des Browsers, haben Links zwei ernsthafte Mängel: • Die Standardschriftfarben für Links sind schlimmstenfalls unattraktiv und im besten Falle für die meisten Farbpaletten nicht verwendbar. • Da Links Inline-Elemente sind, beanspruchen sie nur den Platz, der gerade für ihre Darstellung nötig ist. Wenn es nicht möglich ist, wichtige Links mit einer angemessenen Menge an Inhalt zu füllen, sind sie entweder schwer zu finden und zu benutzen oder einfach nur groß und hässlich. Aufgrund ihrer Interaktivität ist die Definition von Stilen für Links aufwendiger als für andere Elemente.

Pseudoklassen für Links Links können verschiedene Zustände haben (z.B. aktiv, besucht etc.). Daher ist es zwar logisch, aber nicht besonders praktikabel, Stildefinitionen für Links nur über den Elementselektor zuzuweisen. Deshalb definiert CSS vier Pseudoklassen, entsprechend den vier möglichen Linkzuständen: :link (der Link wurde noch nicht angeklickt), :visited (der Link wurde bereits angeklickt), :hover (der Mauszeiger befindet sich über dem Link) und :active (der Link wird momentan angeklickt). In einem allgemeinen Stylesheet sollten die Pseudoklassen in folgender Reihenfolge definiert werden: :link, :visited, :hover, :active. Zuvor definieren Sie eine Regel für das allgemeine Element a ohne Pseudoklassen. Als Eselsbrücke kann man die englischen Wörter LoVe HAte verwenden. Der Grund für diese Reihenfolge besteht in der bereits besprochenen Spezifität. In diesem Fall greift die Regel, nach der Selektoren mit gleicher Spezifität gemäß ihrer Reihenfolge im Quellcode gewichtet werden (der letzte Selektor hat Vorrang vor dem ersten). Links sind zu Beginn unbesucht, aber das ändert sich. In beiden Fällen muss sich der Mauszeiger nicht über dem Link befinden. Sehr wahrscheinlich wollen Sie die anderen beiden Zustände (Mauszeiger über dem Link, Link wird angeklickt) mit eigenen Stilen versehen, um sie von den anderen unterscheiden zu können. Außerdem kann ein Link natürlich nur dann aktiviert werden, wenn sich der Mauszeiger bereits darüber befindet.

Stildefinitionen für Links

|

141

Wäre die Reihenfolge der Pseudoklassen-Regeln umgekehrt, würden die Stile :hover und :active vom Browser ignoriert werden, da in diesem Fall die »allgemeine« Regel für benutzbare Links aufgrund ihrer Position im Quellcode Vorrang vor den spezielleren Regeln bekäme, auch wenn sich der Mauszeiger über einem Link befände. Für die Selektoren mit Pseudoklassen gibt es keine besonderen Einschränkungen, welche Paare aus Eigenschaft und Wert Sie hier verwenden. Bei der Priorität der Selektoren gibt es eine wichtige Ausnahme: Wird eine Eigenschaft in einer Regel definiert, die auf das Element a ohne weitere Pseudoklassen zutrifft, werden Regeln mit Pseudoklassen im Falle eines Konflikts in Firefox und Internet Explorer nicht angewendet. Anders gesagt: Enthält Ihr Stylesheet die Regel a { color: #00f; }, so wird die Regel a:visited { color: #808; } ignoriert. Wurde dagegen a:link { color: #00f; } definiert, so wird a:visited { color: #808; } beachtet. Außerdem enthält die CSS-Spezifikation noch die Pseudoklasse :focus. Hiermit lassen sich gezielt Stile für Elemente definieren, die gerade den Eingabefokus haben, aber nicht aktiviert sind. Diese Pseudoklasse wird vom Internet Explorer aber erst ab der Version 8 unterstützt. Sie kommt beispielsweise zum Einsatz, wenn der Benutzer die Tastatur zur Navigation zwischen den Elementen verwendet oder den Mauszeiger während eines Klicks vom Element wegbewegt. Wird :focus für Links verwendet, sollte die Eigenschaft nach :hover, aber vor :active definiert werden.

Mit »display: block« den anklickbaren Bereich von Links vergrößern Gehört ein Link zur Benutzerschnittstelle einer Site (z.B. als Teil der Navigation) oder soll er als Handlungsaufforderung verwendet werden, kann es praktisch sein, ihn wie einen Button benutzen zu können. Hierbei ist nicht nur der Linktext, sondern die gesamte Box des Links anklickbar. Die Beziehung zwischen der Interaktivität eines Links und dem Cursor wurde bereits im Abschnitt »Links auf das aktuelle Element deaktivieren« auf Seite 67 kurz besprochen. Zuerst müssen Sie für den Link die Regel display: block definieren. Durch den veränderten display-Wert können Sie die Größe des anklickbaren Bereichs mit den Eigenschaften width und height steuern. Dieses lässt sich durch passende Werte für padding und die verschiedenen Eigenschaften für Hintergründe (ggf. zusammen mit Bildersetzungsmethoden wie dem Fahrner Image Replacement) noch verfeinern (siehe im Abschnitt »Grafische Schriften und das Fahrner Image Replacement« auf Seite 162). Bei der Definition von Stilen für Links der Benutzerschnittstelle muss der Gestalter folgende Dinge beachten: Den Wert von display für Container-Elemente Damit Links das gewünschte Verhalten zeigen, müssen sie sich innerhalb von Elementen finden, deren Wert für display entweder block oder inline-block ist.

142

|

Kapitel 8: Überschriften, Hyperlinks, Inline-Elemente und Zitate

Statische oder flexible Layouts? Die Positionierung von Hintergrundbildern (sei es für Hintergründe oder als Teil des Fahrner Image Replacements) ist in statischen Layouts meistens kein großes Thema. In proportionalen oder auf Hilfslinien basierenden Layouts werden sie dagegen am besten innerhalb des sie umgebenden Links zentriert. Die Höhe und Breite von Links berechnen Im einfachsten Fall reicht es, für Links einen height-Wert von 100% festzulegen. Ist eine detaillierte Zuweisung nötig, können Höhe, Breite, Rahmen (falls vorhanden) und Innenabstände separat berechnet und zugewiesen werden. Formatierungstechniken für Links werden auch im Kontext der Navigation in den Kapiteln 5 und 7 beschrieben. Das Verhalten der Eigenschaft cursor wird auf der Website zu diesem Buch gezeigt.

Stildefinitionen für die Pseudoklassen »:hover« und »:active« CSS-Anfänger erliegen oft der Versuchung, Schriftgewicht, Schriftgröße oder die Dimensionen von Links während der Interaktion zu verändern. Machen Sie das nicht! Stildefinitionen, die die Größe eines Elements ohne Vorwarnung ändern, können das gesamte Seitenlayout gefährden. Die Frustration der Benutzer, die mit der Seite interagieren müssen, ist Ihnen gewiss. Diese Regel kann weniger streng genommen werden, wenn der umgebende Inhalt zuverlässig an festen Punkten im Layout verankert ist. Um ausgezeichnete Ergebnisse zu erzielen, müssen allerdings Designer wie Entwickler ein hohes Maß an Training und Erfahrung besitzen.

Die Eigenschaft »text-decoration« Manchmal ist es nützlich, kurze Textpassagen mit Unter-, Über- oder Durchstreichungen zu versehen. Zu diesem Zweck gibt es die Eigenschaft text-decoration mit den folgenden möglichen Werten: underline

Unterstreichung. Der Standardwert für die Elemente a und ins. line-through

Durchstreichung. Der Standardwert für das Element del. overline

Überstreichung. Das Gegenstück zu underline. Wird nur selten benutzt. Der Wert blink wird in der CSS 2.1-Spezifikation ebenfalls erwähnt. Er wird heutzutage aber nur noch von Firefox unterstützt, und das auch nur, wenn er ausdrücklich in den about: config-Einstellungen des Browsers aktiviert wird. Stildefinitionen für Links

|

143

Die Eigenschaft »cursor« CSS stellt eine Schnittstelle zu der Systembibliothek der Mauszeiger-Objekte des Betriebssystems zur Verfügung. Diese lässt sich über die Eigenschaft cursor nutzen. Der Standardwert ist auto. Weitere mögliche Werte sind: • default (meist ein Pfeil) • pointer (Der Standardwert für Links) • crosshair (»Fadenkreuz«, verwendet z.B. für Elemente, die per Drag and Drop verschoben werden können) • text (der Standardzeiger für reine Textinhalte, oft eine Einfügemarke) • help • progress • wait Von diesen Werten wird help am häufigsten verwendet, z.B. um dem Benutzer zu signalisieren, dass für das betreffende Element ein »Tool Tip« zur Verfügung steht. Der Wert kann auch benutzt werden, um Links hervorzuheben, die auf eine Liste mit häufig gestellten Fragen (FAQ) oder andere Hilfe-Ressourcen verweisen. Eine Verwendung der anderen Werte sollte auf Webapplikationen beschränkt bleiben. Es empfiehlt sich, die Wirksamkeit eigener Werte durch Benutzertests zu bestätigen.

Semantische Bedeutung durch Inline-Elemente Neben Links gibt es eine Anzahl weiterer Inline-Elemente, mit denen auch feine Bedeutungsunterschiede des Inhalts verdeutlicht werden können. Eine Zusammenfassung dieser Elemente sehen Sie in Tabelle 8-1. Tabelle 8-1: Inline-Elemente in HTML 4 Element

Beschreibung

entsprechendes »Präsentationselement«

em

Hervorhebung

i, u

strong

starke Hervorhebung

b

cite

Quellenangabe

i

Verwendet für Titel von Büchern, Zeitschriften, Fernsehprogramme und die lange Namensform von audiovisuellen Medien, aber nicht für andere Eigennamen.

code

Programmiercode

tt

siehe kbd, samp

kbd

Benutzereingaben

tt

samp

Beispiel f. Ausgabe von tt Programmen

abbr

Abkürzung

144

|

Erklärungen

Laut HTML 4.01-Spezifikation unterschiedlich zu code. code impliziert die Ausführbarkeit, während samp die Ausgabe von Programmen kennzeichnet.

[keine]

Kapitel 8: Überschriften, Hyperlinks, Inline-Elemente und Zitate

Tabelle 8-1: Inline-Elemente in HTML 4 (Fortsetzung) Element

Beschreibung

entsprechendes »Präsentationselement«

Erklärungen

acronym

Akronym

[keine]

Akronyme und Abkürzungen werden auf unterschiedliche Weise gebildet. Ihre Formatierung ist länderabhängig.

sup

hochgestellt

[keine]

Erhält am besten einen möglichst kleinen Wert für lineheight.

sub

tiefgestellt

[keine]

ins

Einfügung

[keine]

Standardmäßig unterstrichen dargestellt.

del

Löschung

strike

Kennzeichnet obsolete Textpassagen, z.B. in Gesetzestexten. Oft gefolgt von ins, um eine Aktualisierung zu kennzeichnen.

q

Kurzzitat (Inline)

[keine]

Das Verhalten ist browserabhängig. Für längere Zitate sollte blockquote verwendet werden.

var

Variable, irrationale Zahl

i

z.B. 2pr, (sin2θ + cos2θ) = 1

dfn

Definition

i und em (im Kontext)

Kennzeichnet Begriffe, die im Lauftext als Definitionsbegriff verwendet werden, z.B. als Ergänzung zu Definitionslisten (siehe im Abschnitt »Definitionslisten« auf Seite 127); besonders effektiv bei Zuweisung eines id-Werts, um als Linkziel für sich selbst zu dienen.

Die meisten in Tabelle 8-1 gezeigten Elemente sind bezüglich ihrer Standarddarstellung im Browser relativ leicht verständlich. Zwei Inline-Elemente haben dagegen keine Standardstile und müssen gesondert betrachtet werden: abbr and acronym. Wie bereits im Abschnitt »Effektiver Inhalt für Links und Werte für das ›title‹-Attribut« auf Seite 139 erwähnt wurde, betrachten Webbenutzer bestimmte Inhalte außerhalb ihres vorgesehenen Kontexts. Dies ist besonders bei Akronymen und Abkürzungen der Fall, die oftmals Fachbegriffe oder Umgangssprache enthalten. Besucher, die den Kontext nicht kennen, kann dies leicht so sehr verwirren, dass für sie die gesamte Website unverständlich wird. Wenn Sie andererseits mithilfe des title-Attributs Hinweise auf die Bedeutung von Akronymen und Abkürzungen einbauen, wird Ihr Text insgesamt zugänglicher. In aktuellen Versionen von Firefox wird für die Standarddarstellung die folgende Regel Errata: rules are -> rule is verwendet: acronym, abbr { border-bottom: 1px dotted; }

Sie können Regeln wie diese auch um die Definition cursor: help erweitern. Das wird zwar akzeptiert, aber nur selten verwendet. Die Vorteile dieser Methode werden im Abschnitt »Die Eigenschaft ›cursor‹« auf Seite 144 erklärt. Wie weit abbr und acronym von den aktuellen Browsern unterstützt werden, sehen Sie in Tabelle 8-2.

Semantische Bedeutung durch Inline-Elemente

|

145

Tabelle 8-2: Unterstützung für »abbr« und »acronym« (Stand: Mitte 2009) Element

Benutzbar in

abbr

DOM

acronym

IE 6

IE 7

IE 8

FF 2

FF 3

Safari 3

Safari 4

✓

✓

✓

✓

✓

✓

Stylesheets

✓

✓

✓

✓

✓

DOM

✓

✓

✓

✓

✓

✓

✓

✓

✓

Stylesheets

✓ ✓

✓ ✓

Zitate Für Kurzzitate bietet HTML das Inline-Element q. Längere Zitate werden normalerweise mit dem Blockelement blockquote markiert. Nach der HTML 4.01-Spezifikation sollen diese Elemente das Attribut cite unterstützen. Hiermit kann ein URI angegeben werden, unter dem die Quelle des Zitats gefunden werden kann. In der Praxis wird cite jedoch von allen Browsern außer dem Internet Explorer 8 ignoriert. Das Resultat sind Zitate, die in cite- und a-Elemente gequetscht werden. Damit keine Metadaten verlorengehen, sollten für das cite-Attribut aber trotzdem gültige URI-Werte angegeben werden. Das blockquote-Element hat drei hervorstechende Eigenschaften: In der Standarddarstellung der Browser wird es mit einem unübersehbaren Wert für margin-left angezeigt. Anführungszeichen müssen bei Bedarf selbst eingefügt werden. Außerdem verlangen DTDs vom Typ Strict, dass blockquote-Elemente selbst mindestens ein Blockelement (normalerweise einen Absatz) enthalten. Das Markup für Zitate bietet nur eingeschränkt Unterstützung für die Pseudoelemente :before und :after, die vom Internet Explorer erst ab der Version 8 unterstützt werden. In Browsern, die :before und :after unterstützen, werden öffnende und schließende Anführungszeichen im Browser-Stylesheet für die Standarddarstellung für den Inhalt von q-Elementen definiert. Das Element blockqouote geht dagegen in allen aktuellen Browsern leer aus. Um blockquote trotzdem mit typografisch korrekten Anführungszeichen zu versehen, können Sie zum Beispiel die folgenden Regeln in Ihrem Stylesheet definieren: blockquote:before { content: open-quote; } blockquote:after { content: close-quote; }

Die Pseudoelemente :before und :after werden selbstverständlich genauso verwendet wie für das q-Element; ohne die Eigenschaft content wären sie wertlos. Interessanterweise kann content auch nur für diese Selektoren verwendet werden. Die Werte für content können auch dafür sorgen, die Standardstile des Browsers zu überschreiben, wodurch Autoren bei Bedarf eigene Zeichen verwenden können. Diese Methode ist zwar etwas arbeitsintensiver, erhöht aber die Kompatibilität mit Hilfstechnologien. Üblicherweise werden als Werte für content meist open-quote, close-quote oder eine andere, mit Anführungszeichen umgebene ASCII-Zeichenkette verwendet. Zeichen außerhalb des ASCII-Zeichensatzes, literale Anführungszeichen und kodierte Zeilenumbrüche müssen, wie in Kapitel 14 beschrieben wird, mit einem vorangestellten Escape-Zeichen geschützt werden. 146

|

Kapitel 8: Überschriften, Hyperlinks, Inline-Elemente und Zitate

KAPITEL 9

Farben und Hintergründe

Für die meisten von uns sind Farben im Web völlig normal. Für Web-Profis bedeuten sie dagegen eine Menge Arbeit. Erfahrene Entwickler müssen beispielsweise wissen, welche Farbcodes einer tatsächlichen Farbe entsprechen. Und das ist erst der Anfang. Bei Webfarben geht es nicht nur um Zahlen, sondern auch um Kunst. Daher ist es sicher von Vorteil, sich in beiden Bereichen auszukennen. Hintergründe haben ebenfalls ihre eigenen Tücken. Die Zuweisung einer schlichten Hintergrundfarbe für ein Element ist nicht schwer. Sobald aber Bilder ins Spiel kommen, vervielfachen sich die Fragen der Implementierung. Da in diesem Buch Webfarben und -grafiken nicht bis ins letzte Detail behandelt werden, möchte ich Sie zumindest auf die bereits vorhandenen Ressourcen verweisen. Eine Reihe von Informationen ist über die Website zu diesem Buch (http://www.htmlcssgoodparts.net) verlinkt. Außerdem empfehle ich die folgenden Bücher: • Web Style Guide, 3. Auflage, von Sarah Horton und Patrick Lynch (Yale University Press) • Painting the Web (http://oreilly.com/catalog/9780596515096/) von Shelley Powers (O’Reilly)

Farbenlehre und Webfarben Zu den CSS 2.1-Eigenschaften, für die Farbwerte definiert werden können, gehören die verschiedenen Hintergrund-(background-*)- und Rahmen-(border-*)-Eigenschaften. Außerdem gibt es noch die Eigenschaft color, mit der die Farbe für Text, Über-, Unter- und Durchstreichungen festgelegt werden kann.

|

147

Usability, Zugänglichkeit und Farbe Wenn Sie zwei Elementen Text- und Hintergrundfarben zuweisen, sollten Sie die folgenden Dinge beachten: • Enthält ein Stylesheet eine Definition für background oder background-color, sollte unbedingt auch eine Definition von color folgen. Anders herum sollte einer Definition von color unbedingt auch eine Definition der Hintergrundfarbe vorangestellt werden. Dies verhindert, dass Definitionen in Browser- oder Benutzer-Stylesheets Ihren Text unlesbar machen. • Werden Hintergrundbilder verwendet, sollte auf jeden Fall auch eine passende Hintergrundfarbe definiert werden. Auch hier ist die Lesbarkeit der Grund. • Die Zugänglichkeit wird erleichtert, wenn es zwischen Text- und Hintergrundfarbe einen deutlichen Kontrast gibt. Dies gilt besonders in Bezug auf die Farbhelligkeit. Auch die Sehschärfe älterer Besucher spielt eine Rolle. Mit dem Alter nimmt die Anpassungsfähigkeit der Strukturen im Auge ab, wodurch Details und Farben schwerer zu unterscheiden sind. Dieser Verlust tritt besonders im Nahbereich auf und ist allgemein als Altersweitsichtigkeit bekannt. Designs mit hohem Kontrast können auch bei Farbenblindheit helfen. Hierzu ein paar Informationen: • Die bei Weitem häufigste Form der Farbenblindheit ist die Rot-Grün-Blindheit, die bei ungefähr 5 % der Bevölkerung (überwiegend bei Männern) auftritt. • Farbenblindheit äußert sich darin, dass bestimmte Wellenlängen des Lichts vollkommen dunkel wahrgenommen werden. Ähnlich wie infrarote oder ultraviolette Wellenlängen vom menschlichen Auge nicht erkannt werden, nehmen farbenblinde Menschen bestimmte Bereiche des normalerweise sichtbaren Lichtspektrums nicht wahr. • Website-Besuchern mit einer Rotschwäche erscheinen rote Farbschattierungen stark grün oder blau eingefärbt, während Besucher mit einer Grünschwäche grüne Farbschattierungen mit einer starken Rot- oder Blaufärbung wahrnehmen. Besuchern mit einer vollkommenen Farbschwäche fehlt jegliche Farbinformation, was sich auf die Helligkeitswahrnehmung aller Farben auswirken kann. • Die verbleibenden für Farbenblinde sichtbaren Wellenlängen können trotzdem als weißes Licht empfunden werden. Der so wahrgenomme Bereich erscheint Farbenblinden größer als Besuchern mit normaler Farbwahrnehmung. Der umgekehrte Satz gilt für Schwarz. Links zu Farbblindheitssimulatoren und anderen Ressourcen für die Kontrast-Analyse finden Sie auf der Website zu diesem Buch.

148

|

Kapitel 9: Farben und Hintergründe

Das additive Farbmodell Das additive Farbmodell ist benannt nach der Art, wie Farben durch Hinzufügen gemischt werden. Dieses Modell wird beispielsweise im Kunstunterricht gelehrt, da es sich auf Farben und andere Pigmente bezieht. Wird es auf einen weißen Untergrund (Papier, Leinwand etc.) angewandt, entstehen aus blauen, roten und gelben Pigmenten die folgenden Farbschattierungen: • Blau + Rot = Violett • Blau + Gelb = Grün • Rot + Gelb = Orange Durch Hinzufügen schwarzer oder weißer Pigmente (typischerweise Kohle bzw. Bleiweiß) kann sofort die gewünschte Farbe hergestellt werden. Im Farbdruck hängt die Helligkeit einer Farbe vom verwendeten Pigment (Tinte, Toner etc.), der Deckkraft der Farbe und ihrer Sättigung ab.

Das HSB-Farbmodell Um Farben auch ohne Erfahrung mit Pigmenten schnell identifizieren zu können, ist das HSB-Farbmodell (Hue, Saturation, Brightness – Farbton, Sättigung und Helligkeit) am einfachsten zu verstehen. Es ordnet alle sichtbaren Farbtöne nach absteigender Wellenlänge (von Rot nach Violett). Basierend auf den drei Grundfarben werden die Farbabstufungen meist auf einer runden 360-Grad-Skala angeordnet. In der HSB-Notation entspricht 0 der Farbe Rot, 120 entspricht Grün, und 240 steht für Blau. Die Zuordnung der Farben zu ihren HSB-Werten geschieht nach folgenden Regeln: • Die Werte für den Farbton folgen den Farben des Regenbogens, wobei Rot den niedrigsten und Violett den höchsten Wert besitzt. • Die Werte für die Sättigung bewegen sich auf dem Farbrad von neutral bis zum intensivsten Wert. Um Weiß oder eine Grauschattierung zu erzeugen, muss der Sättigungswert Null sein. • Die Werte für die Helligkeit bewegen sich von Null bis 100 %. Der Helligkeitswert Null ergibt immer Schwarz. Der Helligkeitswert 100 % kann für jede beliebige Farbe gelten.

Das subtraktive Farbmodell In den USA. wird das additive Farbmodell in der Grundschule gelehrt, während das subtraktive Modell erst in der Highschool behandelt wird. Allein schon diese Tatsache verdeutlicht, wie komplex das subtraktive Modell offenbar ist. In der physischen Welt wird alles sichtbare Licht reflektiert. Ist ein Pigment vorhanden (unabhängig davon, ob es absichtlich auf eine Oberfläche aufgebracht wurde, naturgemäß dort vorhanden ist, oder durch einen natürlichen Prozess erzeugt wurde) absorbiert es

Farbenlehre und Webfarben

|

149

sämtliche Wellenlängen des Lichts, die nicht seiner Farbe entsprechen. Je dunkler oder gesättigter eine Farbe ist, desto weniger Licht reflektiert sie, was zu dem Begriff subtraktiv führt. Moderne Anzeigegeräte (sprich: Monitore) funktionieren jedoch, indem sie Licht aussenden, anstatt es zu reflektieren. Ältere Röhrenmonitore (CRT) und die aktuellen LCD-Bildschirme projizieren ein Pixel mit einer engen roten, grünen oder blauen Wellenlänge unterschiedlicher Intensität. Haben alle drei Farbkanäle die maximale Intensität, strahlt der Monitor weißes Licht ab. Schwarz wird dagegen erzeugt, wenn alle drei Kanäle die geringstmögliche Intensität haben. Sind nur zwei Kanäle aktiv und haben diese die größtmögliche Intensität, entstehen die folgenden sekundären Farben: • Rot + Grün = Gelb • Grün + Blau = Cyan • Blau + Rot = Magenta Farben, die weder primäre noch sekundäre Farben sind, werden erzeugt, indem alle drei Farbkanäle mit unterschiedlicher Intensität gemischt werden. Der aktuell von CSS unterstützte 24-Bit-Farbraum ermöglicht eine Auswahl aus mehr als 16 Millionen verschiedenen Farben. Diese basieren auf 256 Intensitätsabstufungen (8 Bit) für jeden Kanal. Je näher der erzeugte Farbwert dem Wert Null ist (z.B. bei der Angabe rbg(0,0,0)), desto dunkler erscheint die Farbe. Die Farbwerte für die 256 möglichen Graustufen sind leicht zu erkennen, denn die Werte ihrer Einzelfarben sind immer gleich (z.B. rbg(100,100,100)). Weitere Informationen zum subtraktiven Farbmodell finden Sie auf der Website zu diesem Buch.

Design, Kontrast und Komplementärfarben Eine gut gestaltete Website basiert normalerweise auf Designrichtlinien und Anforderungsdokumenten. Sie fassen sämtliche verfügbaren Informationen und Meinungen zu den erwarteten Besucher- und Geschäftszielen zusammen. Der Gestaltungsprozess wird stark von der Funktion des Designs beeinflusst. Im Gegensatz zur Kunst will effektives Grafikdesign Ideen verständlich vermitteln und dem Nutzer beim Erreichen (oder Finden) bestimmter Ziele helfen. Ästhetik spielt im Design natürlich auch eine wesentliche Rolle. Sie wird allerdings davon bestimmt, welche Ideen mit dem Design transportiert werden sollen. Idealerweise werden Motive und Designrichtlinien festgelegt, sobald klar ist, wie eine Website erstellt werden soll. Hierbei sind die Erwartungen von Kunden und Händlern genau so wichtig wie die Besucher- und Geschäftsziele. Ein wichtiger visueller Bestandteil jedes Sitedesigns (und der zugrunde liegenden Motive) ist die Farbpalette, die im Design für die Kommunikation der Ideen verwendet wird. Paletten bestehen fast immer aus mindestens drei Farben oder Graustufen für Vorder-

150

|

Kapitel 9: Farben und Hintergründe

grund (Text), Hintergrund und hergehobene Akzente. Paletten mit sechs und mehr Farben sind nicht ungewöhnlich. Wir haben bereits gesagt, dass Kontrast Menschen mit Sehproblemen helfen kann. Dies gilt aber auch für Besucher, die die volle Sehfähigkeit haben. Oftmals verwenden Designer Komplementärfarben für Vorder- und Hintergrund, um einen möglichst hohen Kontrast zu erreichen. Komplementärfarben sind »gegensätzliche« Farbtöne; eine genaue Beschreibung bietet das HSB-Modell: Die Komplementärfarbe liegt auf dem HSB-Farbrad genau gegenüber der gegebenen Farbe. So ist Gelb beispielsweise die Komplementärfarbe zu Blau. Komplementärfarben finden sich auch bezogen auf Sättigung und Helligkeit. Im substraktiven Farbmodell können Komplementärfarben gefunden werden, indem die Werte eines Farbkanals so umgekehrt werden, wie in Tabelle 9-1 beschrieben. Tabelle 9-1: Beispiele für Komplementärfarben im subtraktiven/RGB-Modell Grundfarbe

Komplementärfarbe

Rot

Grün

Blau

Rot

Grün

Blau

255

255

255

0

0

0

255

255

0

0

0

255

51

102

153

204

153

102

43

61

21

212

194

234

143

34

69

112

221

186

192

114

12

63

141

243

Der Begriff »umgekehrt« bezieht sich auf den Wert, den man erhält, wenn der erste Wert von 255 (der höchste mögliche Dezimalwert für einen einzelnen Farbkanal in 24-BitFarbe) subtrahiert wird. Wenn Sie sich die zwei Farben eines Kanals in einer bestimmten Zeile ansehen, werden Sie feststellen, dass sie addiert wiederum 255 ergeben.

Farben identifizieren, Kurzfassung Man kann lernen, Farben sowohl auf dem Bildschirm und in Stylesheet-Regeln auf den ersten Blick zu erkennen. Hierfür ist allerdings beständiges Üben nötig. Wir können Ihnen hier nur die richtige Richtung zeigen: • Mit genug Erfahrung reicht ein Blick auf den sechsstelligen Hexadezimalcode (z.B. #00009C), um darin die Werte der einzelnen Kanäle zu erkennen. • Die Fähigkeit, hexadezimale Zahlen im Kopf in Dezimalzahlen umzurechnen, ist zwar ganz nett, aber selten wirklich nötig. Wenn Sie sich damit abfinden können, A, B, C, D, E und F als Zahlen zu betrachten, sind Sie schon gut dabei. Der amerikanische Satiriker und Mathematiker Tom Lehrer brachte es so auf den Punkt: »Keine Panik – hexadezimal ist eigentlich das Gleiche wie dezimal … nur mit sechzehn Fingern.« • Je höher der Wert einer Farbe in allen drei Kanälen ist, desto heller ist sie.

Farbenlehre und Webfarben

|

151

• Je größer die zusammengefassten anteiligen Unterschiede zwischen den Kanalwerten sind, desto höher ist die Sättigung der Farbe. • Die Identifizierung der Farben wird einfacher, wenn Sie das Farbrad im Kopf in primäre und sekundäre Farbbereiche unterteilen. Der Rest ist Arithmetik. • Wenn nichts mehr geht, verwenden Sie ein Pipettenwerkzeug zum Kopieren und Einfügen der gewünschten Farbe.

Abbildung 9-1: ColorZilla stellt ein Pipettenwerkzeug zur Verfügung, mit dem Farbwerte gemessen und kopiert werden können.

Die in Abbildung 9-1 gezeigte Firefox-Erweiterung ColorZilla (https://addons.mozilla.org/ en-US/firefox/addon/271) ist eine Möglichkeit. Nach der Installation kann ColorZilla über einen kleinen Button in der Statusleiste des Browsers aktiviert werden. Nach dem An-

152

|

Kapitel 9: Farben und Hintergründe

klicken verwandelt sich der Mauszeiger in ein Pipettenwerkzeug. Für Mac-User gibt es außerdem das (etwas kompliziertere) Programm DigitalColor Meter aus dem Ordner Dienstprogramme.

Monitore und die »websichere« Farbpalette Im Abschnitt zu CSS-Längeneinheiten (siehe im Abschnitt »CSS-Maßeinheiten« auf Seite 34) haben wir bereits über die Vielfalt möglicher Bildschirmauflösungen gesprochen und erklärt, wie Farbwerte in einem Stylesheet definiert werden. Auf die möglichen Ergebnisse kommen wir jetzt zu sprechen. Die Farbdarstellung aller existierenden Anzeigetechnologien basiert auf Annahmen über die Umgebung, in der sie benutzt werden. Das Vertrauen auf die Farbwiedergabe eines Monitors hängt von dessen Herstellungsdatum, der Qualität der Bauteile und der Herstellungsqualität ab. Aufgrund dieser Unterschiede sehen die meisten Menschen nur selten die gleichen Farben. Nur ein verschwindend kleiner Teil der möglichen hexadezimalen Farbwerte wird als websicher betrachtet. Einen Überblick sehen Sie in Tabelle 9-2. Tabelle 9-2: »Websichere« Farben Hexadezimal

8-Bit-dezimal

Prozentwert1

00

0

0%

33

51

20 %

66

102

40 %

99

153

60 %

cc

204

80 %

ff

255

100 %

Die websichere Farbpalette bekam ihren Namen, weil die hiermit definierbaren 216 Farben auch mit der schwachen Grafikhardware der 1990-Jahre recht genau wiedergegeben werden konnten. Auch heute hat die websichere Palette noch Bedeutung, allerdings aus einem anderen Grund: Ältere Standard-LCD-Monitore sind nicht in der Lage, einen 24-Bit-Farbverlauf in voller Farbtiefe wiederzugeben, wie in Abbildung 9-2 zu sehen ist. HD-fähige LCD-Monitore und Röhrendisplays mit der passenden Grafikhardware haben normalerweise nicht die Probleme billiger Geräte. Sie werden allerdings bestenfalls von der Hälfte der entwickelten Welt wirklich benutzt. Die Herausforderungen bei einer originalgetreuen Farbwiedergabe betreffen auch Bilder und die darin eingebetteten Farbprofile (siehe im Abschnitt »Mit Farbprofilen arbeiten« auf Seite 189).

1 Obwohl sie als Teil der CSS 1-Spezifikation definiert ist, konnte sich die Verwendung von Prozentwerten nie richtig durchsetzen. Sie werden hier nur der Vollständigkeit halber angegeben.

Farbenlehre und Webfarben

|

153

Abbildung 9-2: Ältere Standard-LCD-Monitore machen keine gute Figur bei der Darstellung von Farbverläufen.

Eigene Farbpaletten erstellen Wenn Sie Auftragsarbeiten ausführen oder fest bei einer Firma angestellt sind, stehen die Chancen recht gut, dass mindestens zwei Palettenfarben bereits feststehen. Um diese Wahl auszugleichen, gibt es zwei beliebte systematische Methoden: Mathematik und die Verwendung »gefundener« Farben. Beim mathematischen Ansatz werden sogenannte Farb-Dyaden, -Triaden oder -Tetraden gebildet, die eine offensichtliche Beziehung zu den Ausgangsfarben haben. Im Falle einer Triade geht man davon aus, dass zwei Farben bereits feststehen. Nehmen wir an, dies seien die stets beliebten HSB-Werte 205 und 105 – Aquamarin und ein helles Gelbgrün. Der Mittelwert für diese beiden Farben liegt bei 155 , einer Farbe, die als »Seegrün« bezeichnet wird. Als dritte Farbe der Triade kann entweder dieser Farbton oder seine Komplementärfarbe eingesetzt werden. Jetzt gilt es nur noch, die richtige Sättigung und Helligkeit für diese Farbe zu finden und sie in Ihr Design zu integrieren. Die beliebteste Alternative zur Berechnung von Winkeln besteht in der Verwendung »gefundener« Farben. Nehmen Sie hierfür ein attraktives Foto, und benutzen Sie ein Pipettenwerkzeug, um die Farben darin zu messen. Danach entscheiden Sie nach Gefühl, welche dieser Farben am besten zu Ihrer Palette passt. 154

|

Kapitel 9: Farben und Hintergründe

Die Erstellung von Paletten wird wesentlich detaillierter auf der Website zu diesem Buch besprochen.

CSS-Hintergründe CSS-Hintergründe können für viele verschiedene Elemente definiert werden. Gibt es eine Elementbox, können Sie fast immer auch einen Hintergrund dafür festlegen. Am besten fangen wir mit einem Überblick über die CSS-Eigenschaften an, mit denen sich das Erscheinungsbild von Hintergründen steuern lässt (siehe Tabelle 9-3). Tabelle 9-3: CSS-Eigenschaften für Hintergründe (Standardwerte sind fettgedruckt dargestellt) Eigenschaft

Zweck

background

Kurzschrift-Eigenschaft, fasst die Werte mehrerer Einzeleigenschaften zusammen.

background-attachment

Legt fest, ob der Hintergrund zusammen mit dem restlichen Inhalt gescrollt werden soll oder nicht.

•

fixed

•

scroll

Definiert die Hintergrundfarbe

•

[Farbwert]

•

transparent

•

none

•

[URI]

•

[Längenangabe]

•

[Prozentwert]

background-color

background-image

background-position

background-repeat

Definiert das Hintergrundbild, das ggf. vor einer definierten Hintergrundfarbe angezeigt wird. Definiert die Position des Hintergrundbildes im umgebenden Element. Bei der Angabe zweier Werte werden diese durch ein Leerzeichen getrennt.

Legt fest, ob und wie das Hintergrundbild »gekachelt« werden soll.

Werte

•

bottom

•

center

•

left

•

right

•

top

•

no-repeat

•

repeat

•

repeat-x

•

repeat-y

Die richtigen Werte für »background-position« Wird ein Wert für background-position angegeben, besteht er i.d.R. aus zwei Teilen: dem Abstand von der linken Kante und dem Abstand von der Oberkante des Elements. Werden Längeneinheiten wie px oder em verwendet, sind die Ergebnisse leicht vorherzusagen. Wird nur ein Wert angegeben, gilt dieser für die horizontale Position. Der fehlende Wert wird

CSS-Hintergründe

|

155

automatisch als center bzw. 50% ergänzt. Das Hintergrundbild wird um die angegebenen Werte von der linken oberen Ecke des Elements verschoben dargestellt. Negative Werte sind möglich und sorgen dafür, dass das Hintergrundbild ganz oder teilweise außerhalb seines Elements liegt und nicht dargestellt wird. Bei gekachelten Hintergründen wird das Startbild möglicherweise außerhalb des sichtbaren Bereichs platziert. Bei der Angabe von Schlüsselwörtern oder Prozentwerten ändert sich das Verhalten von background-position. Prozentwerte definieren nicht nur den Abstand von der linken oberen Ecke des Elements, sondern auch die Position im Hintergrundbild selbst. Auf diese Weise ist es möglich, ein Hintergrundbild in der Mitte des Elements zu zentrieren. Nehmen wir beispielsweise die Werte 33% 33%. Sie bezeichnen einerseits einen Punkt, der um ein Drittel der Höhe und Breite des Elements von dessen linker oberer Ecke entfernt ist. Gleichzeitig bezeichnet der Wert den gleichen Punkt im Hintergrundbild. Für die Darstellung werden diese beiden Punkte zur Deckung gebracht, wie in Abbildung 9-3 zu sehen ist.

Abbildung 9-3: Ein Hintergrundbild, das mit der Einstellung »background-position: 33% 33%;« definiert wurde. Die Hilfslinien dienen nur der Illustration.

Die für background-position möglichen Schlüsselwörter entsprechen den Werten 0% (left bzw. top), 50% (center bzw. center) und 100% (bottom bzw. right). Für Designer, die die Drittelregel oder den Goldenen Schnitt in ihren Designs einsetzen möchten, birgt diese Methode einige Schwierigkeiten. Was machen Sie beispielsweise, wenn das Bild in Abbildung 9-3 an den Koordinaten 33% 33% zentriert werden soll? Die einzige effektive Methode besteht darin, die Höhe und Breite Ihres Layouts ausdrücklich festzulegen, was neue Herausforderungen mit sich bringt. Wenn es nur darum geht, Hintergrundbilder zu zentrieren, ist der Aufwand vermutlich zu groß.

156

|

Kapitel 9: Farben und Hintergründe

In CSS 3 wird es vermutlich die Eigenschaft background-size geben, mit der die Größe des Hintergrundbildes gesteuert werden kann. Im Moment wird sie aber von den meisten Browsern noch nicht unterstützt.

Die CSS-Kurzschrift-Eigenschaft »background« Wie margin, border, padding und font ist auch background eine sogenannte KurzschriftEigenschaft. Die Werte für einzelnen Eigenschaften werden in der folgenden Reihenfolge, durch Leerzeichen getrennt, angegeben: background-color background-image background-repeat background-position background-attachment

Wie die anderen Kurzschrift-Eigenschaften so kann auch background eine Menge Platz sparen, hat aber auch einen entscheidenden Nachteil: Werden einzelne Werte nicht angegeben, können sich die Ergebnisse unterscheiden.

Hintergrundbilder erstellen Tatsächlich kann die Erstellung von Hintergrundbildern schwieriger sein als ihre Verwendung in einer Website. Wie in Abbildung 9-4 gezeigt ist, gibt es verschiedene Arten von Hintergrundbildern, die jeweils ihre eigenen technischen Probleme aufwerfen.

Abbildung 9-4: Beliebte Stile für Hintergrundbilder

»Faux Columns« Als »Faux Columns« bezeichnet man eine Methode, verschieden hohe Spalten mithilfe von Hintergrundfarben und -bildern gleich hoch erscheinen zu lassen. Im Hintergrundbilder erstellen

|

157

Abschnitt zu mehrspaltigen Layouts (siehe im Abschnitt »Mehrspaltige Layouts implementieren« auf Seite 91) wird gesagt, dass es möglich ist, ein Element an die Höhe seines Inhalts anzupassen. Meistens ist der Aufwand aber nicht gerechtfertigt. Wird dem Container-Element für eine Spalte ein Hintergrundbild zugewiesen, das dieses Verhalten imitieren soll, ist das Ergebnis eine Illusion, die meist genauso gut funktioniert. Manchmal ist die Spaltenhöhe in einem Layout nicht mit Sicherheit vorhersagbar. In solchen Fällen kann diese Technik auch verwendet werden, um anstelle der Eigenschaften border-left und border-right vertikale Trennlinien zwischen den Spalten zu erzeugen. Hintergrundtexturen und -muster Texturen und Muster sind als Hintergründe recht beliebt, in manchen Jahren mehr, in anderen weniger. Sie können einem Design eine gewisse »Patina« verleihen, als sei der Inhalt schon lange oder häufig verwendet worden. Diese Hintergründe bestehen entweder aus gekachelten (vertikal und/oder horizontal wiederholten) Bildern oder aus großen Einzelbildern. Nicht-wiederholte Motive und Symbole Hierunter versteht man Muster, die deutlich weniger detailliert sind und meistens in einer bestimmten Ecke des Browser-Ansichtsbereichs verankert werden. Schattenwürfe und Gel-Effekte Schattenwürfe vermitteln den Eindruck, dass bestimmte Elemente sich näher am Benutzer befinden als der eigentliche Ansichtsbereich und sind ungefähr so beliebt, wie es strukturierte Hintergründe einmal waren. Gel-Effekte werden oft für Links und Buttons verwendet – besonders auf Websites, die sich als Teil der »Web 2.0«-Bewegung verstehen. Beide Effekte werden auf ähnliche Weise erstellt. Abgerundete Ecken Die Techniken zur Erstellung abgerundeter Ecken unterscheiden sich vollkommen von der Methode für Schattenwürfe. Die Herausforderungen an den Gestalter bei der Implementierung sind dagegen sehr ähnlich. Diese Hintergründe können um Schrift ergänzt werden, die ebenfalls als Grafik vorliegt. Oftmals wird für die Implementierung grafischer Schriften das im Abschnitt »Grafische Schriften und das Fahrner Image Replacement« auf Seite 162 beschriebene »Fahrner Image Replacement« – eine Methode zur Ersetzung von Text durch Bilder – eingesetzt.

»Faux Columns« Stellen Sie sich ein zweispaltiges Layout vor, bei dem die Spalten eine variable Höhe haben können. Unabhängig von den verwendeten CSS-Regeln ergibt sich ein Problem: Die Spalten haben so gut wie immer unterschiedlich viel Inhalt und sind damit unterschiedlich hoch. Die Regel ... { overflow: auto; height: 1%; } für das Container-Element der Spalten gibt Ihnen ein weiteres Element, für das Hintergründe definiert werden können.

158

|

Kapitel 9: Farben und Hintergründe

Trotzdem bleibt die ursprüngliche Aufgabe bestehen: beide Spalten so aussehen zu lassen, als hätten sie die gleiche Höhe. Sollen die beiden Spalten unterschiedliche Hintergründe haben, verwenden Sie die folgenden Arbeitsschritte: 1. Definieren Sie für den Container, der die Spalten enthält, die Regel #spalten_container { overflow: auto; height: 1%; }. Dieser Schritt ist nicht unbedingt nötig, er erhöht aber die Flexibilität, mit der Sie das Layout-Markup umsetzen. 2. Um Rundungsfehlern, Änderungen durch den Benutzer und zukünftigen Änderungen am Layout zu begegnen, sollte das Hintergrundbild breiter sein als die tatsächlich benötigte Breite. Diese hängt normalerweise von Ihrem Layout ab und davon, wie Sie das Hintergrundbild in Ihr Layout einbauen. Wenn Sie mit einem flexiblen Layout (siehe Kapitel 6) arbeiten, sollte das Hintergrundbild deutlich größer sein als die geplante Layoutbreite. 3. Um Bandbreite zu sparen, sollten Hintergrundbilder, die zu Mustern zusammengesetzt werden, nicht höher sein als für die Kachelung nötig. 4. In den meisten Fällen wollen Sie die proportionale Breite Ihrer Spalten berechnen. Davon ausgenommen sind Situationen, in denen eine Spalte unabhängig von Änderungen durch den Benutzer oder das verwendete Benutzerprogramm eine statische Breite erhalten soll. 5. Für flexible Layouts füllen Sie die gewünschten Bereiche proportional. Soll mindestens eine Spalte eine feste Breite erhalten, berechnen Sie die Breite des Bereichs für diese Spalte wie folgt: Addieren Sie die Breite der Spalte und des gewünschten Zwischenraums. Soll stattdessen zwischen zwei Spalten eine grafische Trennlinie auf ganzer Höhe realisiert werden, platzieren Sie diese an der X-Koordinate, an der sich die beiden farbigen Hintergrundbereiche berühren würden. 6. Hierfür kommen folgenden Eigenschaften zum Einsatz: background-color

Als Wert sollte normalerweise die gewünschte Hintergrundfarbe für die Hauptspalte gewählt werden. background-repeat

Vorsichtigen Leuten wird hier der Wert repeat-y empfohlen. background-position

Unabhängig davon, ob es sich um ein statisches oder proportionales Layout handelt, verwenden Sie hier einen ähnlichen Wert für die x-Koordinate (den ersten der beiden Werte) wie für die Breite des farbigen Bereichs. Bei festen Layouts entspricht dieser Wert der umgekehrten Breite für den Raum zwischen den Spalten. Ist dieser beispielsweise mit einer Breite von 5 Pixeln definiert, würde die Definition so lauten: background-position: --5px 0. Normalerweise würde Ihr Spaltenhintergrund keine transparenten Pixel enthalten und der background-color-Wert für das Container-Element der Spalten entspräche der Farbe für die Hauptspalte. Eine Ausnahme tritt auf, wenn die Spaltenfarben als Hilfe zur Hintergrundbilder erstellen

|

159

Ortsbestimmung verwendet werden sollen. Oftmals lassen sich in solchen Fällen Ressourcen sparen, indem ein einzelnes Hintergrundbild verwendet wird, das für die proportionale Spalte transparente Pixel verwendet. Die Hintergrundfarbe wird hierbei (ortsabhängig) vom background-color-Wert des Container-Elements für die Spalten definiert. Diese Methode funktioniert für zweispaltige Layouts recht gut. Bei dreispaltigen Layouts mit variabler Breite ist die Sache komplizierter. (Hintergründe mit fester Breite lassen sich normalerweise auf das body-Element beschränken.) Wird bei einem dreispaltigen Layout für jede Spalte ein eigener Hintergrund benötigt, verwenden Sie zwei Hintergrundbilder: eines für body oder das breiteste Container-Element und ein weiteres für den Container, der die zwei anderen Spalten enthält (siehe Kapitel 6). Danach können die beschriebenen Schritte zweimal hintereinander durchgeführt werden.

Gekachelte Hintergrundtexturen und -muster Standardmäßig werden Hintergrundbilder automatisch gekachelt dargestellt. Die linke obere Ecke des Ausgangsbildes wird hierbei bündig an der linken oberen Ecke der umgebenden Elementbox ausgerichtet. Gekachelte Hintergründe sind schwerer umzusetzen, wenn ein asymmetrisches Ausgangsbild verwendet wird, können aber helfen, Bandbreite zu sparen. Um sie zu erstellen, können Benutzer von Adobe Photoshop die folgende (mit viel Zoomen und Schielen verbundene) Methode verwenden: 1. Verwenden Sie Filter → Sonstige Filter → Verschiebungseffekt, um die Nahtstellen zu zentrieren, die durch den Mangel an Symmetrie im Ausgangsbild entstehen. Die Nahtstellen sollten die Form eines Kreuzes darstellen. 2. Versehen Sie das Ausgangsbild mit zwei angrenzenden Duplikaten (eines für jede Achse). Die Verwendung eigener Hilfslinien (Ansicht → Einblenden → Magnetische Hilfslinien) kann diesen Arbeitsschritt stark erleichtern. 3. Reduzieren Sie die drei Kopien des Ausgangsbildes auf eine gemeinsame Ebene. 4. Verwenden Sie eine Kombination aus Kopierstempel, Reparaturpinsel und BewegenWerkzeug, um die Nahtstellen zu verbergen. Vermeiden Sie Weichzeichnungsfilter. Diese schaffen mehr Probleme, als sie lösen, es sei denn, sie werden nur auf einen winzigen Bereich des Bildes angewandt. Das richtige Werkzeug finden Sie am besten durch Erfahrung und Ausprobieren. Dieser Schritt sollte zuerst an den Stellen durchgeführt werden, an denen sich die Nahtstellen mit den Kanten Ihres Ausgangsbildes berühren. Einige dieser Aktionen sind nur für die Duplikate nötig. Fügen Sie diese Bereiche anschließend in die entsprechenden Regionen des Originals ein. 5. Beschneiden Sie das Bild wieder auf seine ursprüngliche Größe. 6. Wiederholen Sie die Schritte 2 bis 4 im zentralen Bildbereich. Machen Sie sich auf häufige Verwendung des Rückgängig-Befehls und der Protokoll-Palette gefasst.

160

|

Kapitel 9: Farben und Hintergründe

7. Speichern Sie das Bild, laden Sie es hoch, und weisen Sie es dem gewünschten Element zu. Die Standardwerte für Hintergründe sollten für diese Aufgabe ausreichen. Symmetrische Bilder sollten ebenfalls verschoben werden – entweder bereits bei der Erstellung oder mithilfe der Eigenschaft background-position. Ansonsten erscheinen oberhalb und links des Elements möglicherweise leere Bereiche.

Größere Hintergrundtexturen und nicht wiederholte Embleme Größere Hintergrundbilder können leicht aus schon vorhandenem Material erstellt werden. Allerdings verbrauchen sie meist deutlich mehr Bandbreite. Der Trick ist daher, den bestmöglichen Kompromiss zwischen Dateigröße, Bildgröße (Höhe/Breite) und nützlichen Details zu finden. Um kleinere Dateien zu bekommen, muss man entweder die Bildgröße oder den Detailreichtum verringern (oder beides!). Wird ein Hintergrund für das body-Element definiert, wird die Herausforderung sogar noch größer, da das Hintergrundbild mindestens 1680 × 1050 Pixel groß sein muss. Eine Größe von 1920 × 1200 Pixeln (Full HD, 1080p) ist nur in den allerwenigsten Fällen nötig. Zwar gibt es seltene Fälle, in denen Ihr großes Hintergrundbild mehrere Male größer ist als das Element, für das es benutzt wird, oder exakt auf ein Element mit garantiert festen Maßen abgestimmt ist. Ansonsten sollte Ihr Stylesheet ungefähr so aussehen: #meinElement { background-image: url(/pfad/zum/bild.png); background-attachment: fixed; background-position: 50% 50%; }

Wenn Sie ein Hintergrundbild erstellen, das ein Emblem enthält (z.B. ein Ideogramm, eine geometrische Form, eine berühmte Illustration aus der Public Domain oder sonst einen Teil der visuellen Identität des Website-Betreibers), wird dieses fast immer kleiner sein als das Ausgangsbild für ein gekacheltes Muster. Bei der Erstellung eines solchen Hintergrundbildes und der entsprechenden CSS-Regeln sollten Sie sich an die folgenden Richtlinien halten: • Verwenden Sie mehr Kontrast als für ein Hintergrundmuster. Dabei sollte die Lesbarkeit des darüberliegenden Inhalts nicht beeinträchtigt werden. • Ist das Hintergrundbild deutlich kleiner als die Ausmaße des Elements, sollten Sie das Bild an einer Seite oder Ecke des Elements verankern. Die Ergebnisse werden dadurch leichter vorhersagbar. • In den meisten Fällen ist die Regel background-attachment: fixed am besten geeignet. • Stellen Sie die Lesbarkeit eines Elements, dessen Hintergrundbild an der Unterkante verankert ist, sicher, indem Sie den Wert für padding-bottom ungefähr auf die tatsächliche Höhe des Hintergrundbilds setzen.

Hintergrundbilder erstellen

|

161

Schattenwürfe, Gel-Effekte und abgerundete Ecken Um Schattenwürfe, Gel-Effekte und abgerundete Ecken zu erstellen, können Sie entweder den Effekte-Dialog der Ebenenpalette von Photoshop verwenden oder eine umfangreiche Kombination aus Werkzeugen und Filtern Wir betrachten diese drei Hintergrund-Effekte separat, weil hierbei ein paar Unwägbarkeiten auftreten können. So kann es sein, dass ein Designer, der diese Effekte einsetzt, ein Layout mit festen Breiten voraussetzt. Dadurch kann es passieren, dass die Ecken von Schattenwürfen über die sichtbaren Layoutkanten hinausgeschoben werden (normalerweise über die Ober- und Unterkante des Ansichtsbereichs) oder dass der Gestalter gezwungen wird, schlechten Markup-Code zu schreiben. Der Grund für diese Probleme liegt im Fluss der Elemente selbst: Abgesehen von PluginInstanzen oder Bildern ist es unmöglich, die Höhe eines Elements sicher vorherzusagen. Hintergrundbilder können von aktuellen Browsern nicht beliebig skaliert werden. Daher müssen Effekte, die an vorhersagbaren Stellen im Layout erscheinen müssen (z.B. bei abgerundeten Ecken oder den Ecken von Schattenwürfen) einzeln platziert werden, wenn die Ausmaße des Elements nicht bekannt sind. Der am Anfang von im Abschnitt »Angewohnheit 1: In der Kürze liegt die Würze« auf Seite 50 gezeigte Markup- und CSS-Code ist ein Negativbeispiel für das Prinzip der Einfachheit. In Firefox und Safari ist es möglich, abgerundete Ecken mit proprietären CSS-Eigenschaften zu definieren (-moz-border-radius bzw. -webkit-border-radius). Der Internet Explorer hat momentan leider nichts Vergleichbares im Angebot. Diese beiden Eigenschaften dienen als experimentelle Vorabimplementierung der in CSS 3 geplanten Eigenschaft border-radius.

Grafische Schriften und das Fahrner Image Replacement In Kapitel 12 finden Sie umfassende Informationen zur Web-Typografie. Im Bezug auf Hintergrundbilder sind dabei zwei Dinge zu beachten: der Mangel an Schriften, die im Web benutzbar sind, und die Vorteile, die das Anti-Aliasing gerade bei großen Schriften bringt. Anhand von Inline- und Hintergrundbildern haben Designer die Möglichkeit, attraktive Typografie auch im Web umzusetzen, schließlich sind die Browser seit 1993 in der Lage, Bilder darzustellen. In der ersten Jahreshälfte von 2002 arbeitete eine Reihe von WebExperten (mich eingeschlossen) unabhängig an Techniken, um grafische Schriften nicht mehr im Markup, sondern im Stylesheet zu definieren. Allgemein werden diese Methoden als Fahrner Image Replacement (FIR) bezeichnet oder als Fahrner-Methode zur Bildersetzung. Sie sind benannt nach Todd Fahrner, einem CSS-Pionier, der als einer der Ersten seine Ideen zur Bildersetzung ausarbeitete und publizierte. Beispiele für die Verwendung dieser Technik finden Sie in Abbildung 9-5.

162

|

Kapitel 9: Farben und Hintergründe

1

2

3

Abbildung 9-5: Drei Schritte von einer einfachen Überschrift zu einer mit der FIR-Methode realisierten grafischen Überschrift: (1) zeigt die ursprüngliche Überschrift, (2) zeigt die Überschrift mit ihrem neuen Hintergrundbild, und (3) zeigt das fertige Resultat, nachdem die ursprüngliche Überschrift per »textindent« aus dem sichtbaren Bereich verschoben wurde.

Das Hauptargument für die Verwendung der FIR-Methode ist, dass ein Bild nur dann im Inhalt eines Dokuments auftauchen sollte, wenn es tatsächlich Teil des Inhalts ist. Wie kann man die Vorteile von Bildern also auch dann nutzen, wenn man sie in die Präsentationsschicht verschiebt, wo sie hingehören? Es ist offensichtlich, dass die Hintergrund-Eigenschaften hierbei eine Rolle spielen. Allerdings reichen sie allein nicht aus. Der Text bleibt weiterhin sichtbar (siehe Bild 2 in Abbildung 9-5). Um das Problem zu lösen, brauchen wir einen Weg, den Text aus dem sichtbaren Bereich zu entfernen, ohne Änderungen am Markup-Code vornehmen zu müssen. Zuerst versuchte man, den zu versteckenden Text mit einem span-Element zu umgeben und dieses per display: none zu verbergen. Dies verhindert aber die Darstellung für Benutzer von Hilfstechnologien. Die Überschrift wird nicht »vorgelesen«, weil mit display: none kennzeichnete Elemente ignoriert werden. Weitere Bildersetzungen wurden getestet, die aber alle mit zusätzlichem Markup arbeiteten. Jede Methode setzte hierfür eigene CSS-Regeln ein (z.B. visibility oder position), um den Textinhalt aus dem sichtbaren Bereich zu entfernen. Nach einer Weile hatte der Entwickler Mike Rundle die Idee, die Eigenschaft text-indent zu verwenden, um nur den Text zu verschieben. Fast zur gleichen Zeit kam Russ Weakley auf den Gedanken,

Grafische Schriften und das Fahrner Image Replacement

|

163

winzigen Text vor einem Hintergrund mit der gleichen Farbe zu verstecken. Dabei ließ er genügend Platz am Rand des Elements, wodurch der Text komplett unsichtbar wurde.

Die FIR-Stylesheet-Regeln Hier ist der CSS-Code für die Methoden von Rundle und Weakley. Gegeben sei eine Überschrift zweiten Grades mit dem Inhalt Lorem ipsum dolor sit amet, consectetur adipiscing elit und ein Hintergrundbild mit einer Höhe von 30 Pixeln: /* *** Rundle-Methode (Phark) *** */ h2 { height: 30px; margin: 0; text-indent: –10000px; background-image: url(/pfad/zum/bild.png); background-repeat: no-repeat; } /* *** Weakley-Methode *** */ h2 { height: 1px; margin-bottom: –1px; padding-top: 30px; color: #fff; background-color: #fff; background-image: url(/pfad/zum/bild.png); background-repeat: no-repeat; font-size: 1px; line-height: 1; }

Die Weakley-Methode benötigt deutlich mehr Code, umgeht aber ein böses Darstellungsproblem im Internet Explorer 6. Es tritt auf, wenn text-indent auf einen Link angewandt wird, der als Float definiert wurde. Der Text selbst folgt dem Wert von text-indent, aber seine Unterstreichung nicht. Wir sollten nicht verschweigen, dass die Weakley-Methode, die mit kleinem, verstecktem Text arbeitet, möglicherweise zu Problemen mit Suchmaschinen führen kann. Das gilt besonders dann, wenn sie nur verwendet wird, um die Seite zur Suchmaschinenoptimierung (SEO) mit Stichwörtern aufzupumpen.

Nachteile der FIR-Methode Das Fahrner Image Replacement hat zwei große Nachteile: Zum einen haben Gestalter keinen Einfluss auf die Darstellung der Hintergrundbilder in Druckseiten (wo sie vermutlich überhaupt nicht angezeigt werden), zum anderen gibt es einen kleinen Kreis von Benutzern, die die Darstellung von Bildern deaktiviert haben. Diese sind nicht in der Lage, die aus dem sichtbaren Bereich verschobene Schrift zu lesen.

164

|

Kapitel 9: Farben und Hintergründe

Nur die wenigsten Benutzer wissen, dass mit der FIR-Methode ersetzte Inhalte immer noch ausgewählt und in die Zwischenablage kopiert werden können. Daher sollten Inhalte, die wahrscheinlich kopiert werden (z.B. Kontaktinformationen) immer in normalem Text dargestellt oder zumindest wiederholt werden.

Die Serverlast mit Sprites verringern Ein Jahr, nachdem die FIR-Methode bekannt wurde, veröffentlichte Dave Shea im Webzine A List Apart einen Artikel, der eine Idee aus der Zeit der 8-Bit-Computerspiele wiederbelebte: Sprites. In den Spielen wurde sie meist verwendet, um verschiedene »Landschaften« oder »Szenen« in einer gemeinsamen Datei zu speichern. Das Programm stellte dann, je nach Situation, nur den passenden Teil des Bildes dar. Gestalter können diesen Ansatz verwenden, um verschiedene ähnliche Hintergrundbilder in einer gemeinsamen Datei zu speichern, um so die Zahl der Serveranfragen und den Wartungsaufwand gering zu halten. Die Verwendung von Sprites bietet sich beispielsweise für Navigationslinks an. In vielen Fällen können die Grafiken für inaktive (:link) und aktive (:hover) Linkzustände in einer Datei kombiniert werden. Nehmen Sie beispielsweise das Navigationsmenü in Abbildung 9-6. Die verschiedenen Einträge sind als grafische Schriften realisiert, die mit der FIR-Methode eingebunden werden, da die verwendete Schrift nicht von allen Browsern und Betriebssystemen zuverlässig unterstützt wird.

Abbildung 9-6: Das gewünschte Ergebnis der Verwendung von Sprites für ein Navigationsmenü

Hierbei gibt es keine Regel, wie die Ausgangsgrafik angelegt ist. Normalerweise würde ich die »aktiven« Linkzustände wohl unter den neutralen platzieren. Letztendlich können Sie das aber selbst entscheiden. Wichtig ist nur, dass Sie sich die Ursprungskoordinaten für jeden Teil notieren, da diese später als Werte für background-position wichtig sind. Wenn Sie grafische Schriften aus einer gemeinsamen Datei mit der FIR-Methode einsetzen wollen, führen Sie nacheinander die folgenden Schritte aus: 1. Geben Sie Ihrer Navigation das gewünschte Layout (siehe im Abschnitt »Rezept für die primäre Navigation« auf Seite 125). Die Serverlast mit Sprites verringern

|

165

2. Geben Sie für die Listeneinträge mit den Navigationslinks und für die :hover-Pseudoelemente der Links denselben background-image-Wert an. Jetzt sollte für jeden Listeneintrag das gleichen Hintergrundbild zu sehen sein (siehe Abbildung 9-7). 3. Definieren Sie für die einzelnen Links und ihre Pseudoklassen (z.B. #nav li { ... } und #nav li a:hover { ... }) die passenden Werte für background-position. Für die Demonstration dieser Technik auf der Website zu diesem Buch kamen die folgenden Stylesheet-Regeln zum Einsatz: #nav li { #nav li a { #nav li, #nav li a { #nav li a:link, #nav li a:visited { #navUeber #navKontakt #navForum #navGalerie

{ { { {

#navUeber #navKontakt #navForum #navGalerie

a:hover a:hover a:hover a:hover

background-image: url(/images/bg_nav.gif); } display: block; width: 100%; height: 100%; } text-indent: –10000px; } background-image: none; }

background-position: background-position: background-position: background-position: { { { {

0 0; } –144px 0; } –288px 0; } –432px 0; }

background-position: background-position: background-position: background-position:

0 –24px; } –144px –24px; } –288px –24px; } –432px –24px; }

Abbildung 9-7: Das Hintergrundbild für ein mit Sprites realisiertes Navigationsmenü

166

|

Kapitel 9: Farben und Hintergründe

KAPITEL 10

(Daten-)Tabellen

Altgediente Webentwickler erinnern sich noch an die Bücher, die empfahlen, das Layout mit table-Elementen umzusetzen. Früher war dies die einzige verlässliche Layout-Methode, mit der Browser umgehen konnten. Und wie in der Diskussion dreispaltiger Layouts (siehe im Abschnitt »Mehrspaltige Layouts implementieren« auf Seite 91) bereits angesprochen wurde, scheinen Tabellenlayouts ja auch vergleichsweise einfach umsetzbar zu sein. Tun Sie das nicht!

Nachteile von Layout-Tabellen Layout-Tabellen bringen nur wenige unliebsame Überraschungen mit sich, doch ihre Verwendung geht auf Kosten der Usability und Wartungsfreundlichkeit Ihrer Site. Tabellenbasierte Layouts sind bei der Erstellung einer neuen Site vielleicht einfacher zu entwickeln. Doch sobald die Site aktualisiert werden muss, ein Redesign oder einfach nur ein Wartungs-Update ansteht, bereiten Tabellen schnell Kopfschmerzen.

Quellcode-Reihenfolge: Die Quadratur des Kreises Bei der Verwendung von Layout-Tabellen sind Sie gezwungen, die gesamte Website um einen bestimmten Rendering-Algorithmus (den für Tabellen) herum zu bauen. Dieser hat eigentlich die Funktion, tabellarische Daten darzustellen. Deshalb ist die Inhaltsstruktur auch deutlich besser für die Darstellung von Tabellenkalkulationen geeignet als für Dokumente mit Textpassagen. (Sie schreiben Ihren Bericht oder ein Memo ja auch nicht mit Microsoft Excel, oder?) Die Verwendung von Layout-Tabellen hat besonders für die Benutzer von Hilfstechnologien bedeutende Nachteile. Da deren Hersteller die Intention der Webentwickler nicht kennen können, werden die Inhalte von Tabellen in Bildschirmleseprogrammen, BrailleZeilen etc. gemäß der Quellcode-Reihenfolge dargestellt. Das hat unter anderem zur Folge, dass auf Hilfe angewiesene Benutzer auch 15 Jahre nach der ersten Implementierung von Tabellen noch davon ausgehen, dass die Navigation der Site sich am Seitenanfang befindet, unabhängig davon, ob das wirklich sinnvoll ist. |

167

Auf Websites, in denen die linke Spalte den Inhalt der Seitenleiste enthält, wird die Wichtigkeit des Inhalts sogar noch stärker auf den Kopf gestellt. Stellen Sie sich vor, Sie müssten sich erst durch dreihundert unzusammenhängende Wörter unwichtigen Mülls graben, bevor auch nur der Titel des Dokuments, geschweige denn der Inhalt, in Sichtweite kommt. Mit diesen Dingen müssen sich die Benutzer von Hilfstechnologien täglich herumschlagen.

Vom CSS-Zen bleibt nur ein Mythos Bei richtiger Anwendung bietet das Prinzip des CSS-Zen (siehe im Abschnitt »Die Funktionsprinzipien des CSS-Zen« auf Seite 60) unbegrenzte Redesign-Varianten. Ermöglicht wird diese Flexibilität durch strukturelles Markup und die korrekte Verwendung von class- und id-Werten. Hierdurch wird wiederum die Implementierungszeit deutlich verringert. So habe ich für drei der letzten vier Redesigns von henick.net jeweils nur ein paar Stunden gebraucht. Wenn Website und Seiten eine sinnvolle Struktur haben und die Anforderungen an den richtigen Stellen übererfüllt wurden (Overbuilding), so können selbst riesige Websites in ein paar Tagen mit einem komplett neuen Look and Feel versehen werden. Bei der Verwendung von Tabellen für das Layout ist das nicht möglich. Eigentlich sollte das Design das vorhandene Markup verschönern. Bei Layout-Tabellen wird das Design jedoch vom Markup diktiert. Redesigns werden dadurch auf Änderungen von Farben und Akzenten beschränkt. Sobald neue Inhalte hinzukommen, alte entfernt werden oder eine größere Layoutänderung ansteht, müssten vollkommen neue Templates für die Website erstellt werden.

Die unvermeidliche Abhängigkeit von Templates Solange Sie nicht Berge von Templates für die Website verwenden, tendiert die Flexibilität von Tabellen-Layouts gegen Null. Gerade in größeren Firmen, in denen ein detaillierter Genehmigungsprozess durchlaufen werden muss, stehen Tabellen für ein Design, das ab dem ersten Tag keinerlei Änderungen mehr zulässt. Allein das ist schon frustrierend. Was passiert aber, wenn es ein größeres Problem mit der Site gibt? Hiervon betroffene Besucher sind schon die zweite Gruppe von Benachteiligten. Wenn nicht sofort etwas passiert, kann das schnell teuer werden. Sobald die ersten Rückmeldungen über Probleme mit einer tabellenbasierten Site eintrudeln, beginnt das für die Website zuständige Team vermutlich auch schon mit der Planung des nächsten Layouts, das mindestens genauso viel Arbeit bedeutet wie das erste. Ist die Zeit gekommen, stattdessen CSS einzusetzen, wird die Arbeit anfangs sogar noch schwieriger. Schließlich müssen sich die Teammitglieder erst einmal mit der Knappheit und den Referenzpunkten von CSS vertraut machen. Welche Zeit wäre also besser für diesen Schritt geeignet als jetzt?

168

|

Kapitel 10: (Daten-)Tabellen

Positionierung ist bei Tabellen-Layouts wertlos Die Eigenschaften float und position sind zwei der wichtigsten Grundpfeiler bei CSSbasierten Layouts. Bei der Verwendung von Tabellen für das Layout verlieren die Eigenschaften für die Positionierung fast ihre gesamte Macht. Die Anordnung von Layout-Elementen, das »Stapeln« von Inhalten und diverse andere Hilfen stehen nicht zur Verfügung. Beim Tabellenlayout haben die Entwickler keine Wahl – ihre Kreativität bleibt auf eine Tabellenzelle beschränkt, Querdenken geht nicht, weil die Darstellungseigenschaften nichts anderes zulassen. Und damit genug von diesem Horrorszenario!

Bestandteile einer Datentabelle Am besten versteht man das Markup einer Datentabelle, indem man sich die einzelnen Bestandteile ansieht, die in Abbildung 10-1 gezeigt sind. col

td

colgroup

thead tr tbody

tfoot th

Abbildung 10-1: Anatomie einer Datentabelle

Zeilen und Zellen: tr und td Diese Elemente enthalten typischerweise die Daten eines einzelnen Datensatzes. Die Zeilen werden in einzelne Zellen (td) unterteilt. Analoge Zellen in verschiedenen Spalten werden immer in konsistenten Spalten dargestellt. Abgesehen von tbody müssen Zeilen und Zellen immer in einer Tabelle enthalten sein. Leser, die sich mit relationalen Datenbanken auskennen, erkennen, dass das tr-Element die Grenze eines einzelnen Datensatzes markiert. Spalten und Spaltengruppen: col und colgroup Während die Zeile für einen Datensatz steht, bezeichnet die Spalte eine bestimmte Datenkategorie (z.B. Anzahl der Achsen in Abbildung 10-1).

Bestandteile einer Datentabelle

|

169

Zeilen- und Spaltenüberschriften: th th funktioniert als Alternative zu td und definiert die Art der Daten einer bestimmten Zeile oder Spalte. Dabei besteht der Unterschied zwischen th und td nicht nur in der Art der Darstellung, sondern auch in ihrer Funktion. th-Elemente sind speziell dafür gedacht, keine Daten, sondern ihre Beschreibung zu enthalten. Beschriftungen: caption So wie die Elemente h1, h2 usw. Überschriften für normalen Text markieren, steht caption für eine Beschriftung der Tabelle. Standardmäßig wird das caption-Element über der Tabelle dargestellt. (Dieses Verhalten lässt sich mit der Eigenschaft captionside verändern.) Kopf- und Fußteil für Tabellen: thead und tfoot Diese Elemente dienen als praktische Behälter und können beispielsweise eine Beschreibung der Daten in den Spalten und (seltener) in den Zeilen der Tabelle enthalten. Sie unterscheiden sich aus zwei Gründen von einfachen Tabellenzeilen: – Um die verschiedenen Datentypen zu beschreiben, werden möglicherweise mehrere Zeilen benötigt. So kann die erste Zeile die verschiedenen Datenklassen beschreiben, während die zweite die Datentypen der einzelnen Spalten beschreibt. – Gemäß der Spezifikationen von HTML und CSS sollten die Elemente thead und tfoot bei seitenbasierten Medien auf jeder Druckseite wiederholt werden. Bei Systemen, die nur allgemeine Zeilen und Spalten verwenden, ist das oft nicht möglich. Offiziell sind thead und tfoot nicht nötig, damit das Dokument validiert, tbody dagegen schon. Der Tabellen»körper«: tbody Der Tabellenkörper enthält alle Tabellenzellen mit den tatsächlichen Daten, aber keine Metadaten.

Beispiel: Die volle Packung Tabellen-Markup Eine Tabelle, die sämtliche gerade beschriebenen Elemente verwendet, könnte beispielsweise wie folgt aussehen: Benzin- und Dieselfahrzeuge







170

|

Kapitel 10: (Daten-)Tabellen









Anzahl der Passagiere (inkl. Fahrer)
		Gesamtgewicht	Maximalgewicht
Fahrzeugtyp	Anzahl der Achsen	Gesamtgewicht	Maximalgewicht	Anzahl der Passagiere (inkl. Fahrer)
		Gewicht
LKW	≥2	>1.5t	2.5t–25t	1
PKW	2	0.5t–2.5t	1.5t–4t	1–8
Motorrad	2	Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree Cookies