AcmeStore.com

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

...

• 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-left: 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-right: 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

1. Rot
2. Orange
3. Gelb
4. Gru¨n

Ku ¨ngen

¨rzere Wellenla
5. Blau


Geordnete und ungeordnete Listen

|

121


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

<span class="partOfSpeech">n. <span class="variants">Inflected forms: <span class="partOfSpeech">pl. e·con·o·mies

1. 1. Careful, thrifty management of resources, such as money, materials, or labor: <span class="usageEx">learned to practice economy in making out the household budget.
   2. An example or result of such management; a saving.
2. 1. The system or range of economic activity in a country, region, or community: <span class="usageEx">Effects of inflation were felt at every level of the economy.
   2. A specific type of economic system: <span class="usageEx">an industrial economy; a planned economy.
3. An orderly, functional arrangement of parts; an organized system: <span class="usageEx">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


4. Efficient, sparing, or conservative use: <span class="usageEx">wrote with an economy of language.
5. The least expensive class of accommodations, especially on an airplane.
6. <span class="subjectFocus">Theology The method of God’s government of and activity within the world.

<span class="partOfSpeech">adj. Economical or inexpensive to buy or use: <span class="usageEx">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: <span class="usageEx">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: <span class="usageEx">

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: <span class="usageEx">“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: <span class="usageEx">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

<span class="stageDir">In despairing wrath outside What the devil have I done with my slippers? <span class="stageDir">He appears at the door

Liza

<span class="stageDir">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

<span class="stageDir">Astounded What on earth—! <span class="stageDir"> He comes to her What’s the matter? Get up. <span class="stageDir"> He pulls her up Anything wrong?

Liza

<span class="stageDir">Breathless Nothing wrong — with <em>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

<em>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? <span class="stageDir">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 ✓

✓

Stylesheets

✓

✓

✓

DOM

✓

✓

✓

✓

✓

✓

✓

✓

✓

Stylesheets

IE 8

FF 2

FF 3

Safari 3

✓

✓

✓

✓

✓

Safari 4 ✓ ✓

✓

✓ ✓

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:

170

|

Kapitel 10: (Daten-)Tabellen

rowspan="2" scope="colgroup">Anzahl der Achsen colspan="2" scope="colgroup">Gewicht rowspan="2" scope="colgroup" abbr="Passagiere">Anzahl der Passagiere (inkl. Fahrer)



Benzin- und Dieselfahrzeuge

rowspan="2" scope="colgroup" abbr="Typ">Fahrzeugtyp
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	<0.25t	0.3t–0.5t	1–2



Ein genauer Blick auf das obige Markup enthüllt einige interessante Details: •

caption ist ein Kindelement (ein direkter Nachfahr) von table. Es erscheint über der eigentlichen Tabelle. Das caption-Element ist optional. Wird es verwendet, muss es als erstes Kindelement von table definiert werden, um gültig zu sein.

Bestandteile einer Datentabelle

|

171

•

Wird es verwendet, hat das Element summary für Tabellen die gleiche Funktion wie title für das gesamte Dokument. colgroup kann benutzt werden, um mehrere Spalten zu einer semantischen Gruppe zusammenzufassen. Das Element col ist dagegen für Spalten mit dem gleichen

•

Kontext reserviert. •

Um in XHTML gültig zu sein, müssen auch colgroup-Elemente ohne eigenen Inhalt mit einem schließenden Tag versehen werden. In HTML sind die Endtags dagegen optional.

•

Die Elemente rowspan und colspan erleichtern die Darstellung einzelner Daten über mehrere Zeilen oder Spalten hinweg. Sie können auch mit thead verwendet werden, um eine bessere Gruppierung der Felder zu erreichen.

•

Jede Spalte und jede Spaltengruppe erhält einen eigenen id-Wert. Auf diese Weise müssen nicht die Zellen der ersten Zeile mit Breitenangaben versehen werden. Stattdessen kann die CSS-Eigenschaft width für die Spalten selbst festgelegt werden.

•

Verglichen mit dem Kopfteil ist die Darstellung von Zeilen und Zellen im Fußteil umgekehrt.

•

Die Verwendung des Attributs scope für jedes th-Element im Kopf- und Fußteil der Tabelle erleichtert das Anlegen von Metadaten. Das td-Element unterstützt wiederum das Attribut headers. Als Wert kann eine durch Leerzeichen getrennte Liste mit den ids der entsprechenden th-Elemente angegeben werden.

•

Außerdem erhalten die th-Elemente im Markup-Beispiel ein abbr-Attribut. Benutzerprogramme können dessen Wert als Alternative benutzen, wenn der normale Inhalt zu lang ist und Platz-, bzw. Zeitersparnis wichtig ist.

•

Entgegen der Intuition folgt das Element tfoot direkt auf thead. Erst danach kommt tbody. Wird die Reihenfolge nicht eingehalten, wird das Dokument nicht validiert (siehe dazu auch Kapitel 14).

Ein Attribut, das nicht im Kopfteil der Tabelle verwendet wird, ist headers. Stattdessen wird es in td-Elementen eingesetzt. Wie bereits gesagt wurde, ist der Wert eine durch Leerzeichen getrennte Liste mit den ids der entsprechenden th-Elemente. Browser, die sämtliche Attributselektoren unterstützen, ermöglichen es, einzelne Zellen gemäß ihres Kontexts mit Stilen zu versehen. Ansonsten wäre der Gestalter gezwungen, das Pseudoelement :nth-child() zu verwenden (es wird im Abschnitt »Attribute und Kindselektoren« auf Seite 177 erklärt), ohne den tatsächlichen Inhalt der Zelle zu berücksichtigen. Die verschiedenen HTML-Attribute zum Steuern der Darstellung von Tabellen und Teilen davon werden zwar noch weitgehend unterstützt. Allerdings verringert ihr Einsatz die Flexibilität einer korrekten Datentabelle, besonders wenn diese benutzergenerierte Inhalte enthält. Stattdessen sollte auch hier die Darstellung nach Möglichkeit mit den entsprechenden CSS-Eigenschaften erfolgen. Die Attribute colspan und rowspan sind hiervon ausgenommen.

172

|

Kapitel 10: (Daten-)Tabellen

Tabellenzellen anlegen Bevor Sie sich auf Details wie eigene Spaltenhöhen und Hintergründe stürzen, sollten Sie sicherstellen, dass die einzelnen Zellen das gewünschte Aussehen haben. Wir konzentrieren uns hier auf Tabellenzellen, weil es für sie, verglichen mit den anderen Tabellenelementen, die meisten CSS-Eigenschaften gibt. Am besten fängt man bei den Trennlinien an. Wenn Sie sich eine beliebige Tabelle aus dem letzten Jahrtausend anschauen, finden Sie mit ziemlicher Sicherheit Code wie diesen:

Die hier genannten Attribut/Wert-Paare sollen sicherstellen, dass zwischen den Tabellenzellen keine Zwischenräume entstehen. Dieser Effekt lässt sich leicht auch mit CSS erreichen: table { border-collapse: collapse; } td, th { padding: 0; }

Das Ergebnis sehen Sie in Abbildung 10-2.

Abbildung 10-2: Datentabelle ohne Rahmen und Zwischenräume zwischen den Zellen

Ist das geschafft, besteht der nächste Schritt darin, die Zellen durch Trennlinien zu unterscheiden. Da die Zellen bündig mit ihren Nachbarn dargestellt werden, wird nur eine border-Definition gebraucht, wie in Abbildung 10-3 zu sehen ist. Durch die Definition von »border-collapse: collapse« für die Tabelle werden hierbei die Trennlinien von aneinandergrenzenden Zellen automatisch zusammengefasst. Die Regel lautet daher einfach: td, th { border: 1px solid #000; }

1

2

3 Abbildung 10-3: Durch die Definition von border-collapse: collapse werden die Rahmen von aneinandergrenzenden Zellen zusammengefasst.

Tabellenzellen anlegen

|

173

Die Trennlinen können später entfernt werden, es sei denn, für die Tabelle selbst und für die einzelnen Spalten wurde ein Wert für width definiert (wovon dringend abgeraten wird). Die An- oder Abwesenheit von Rahmen für die einzelnen Zellen löst keinerlei Programmier- oder Darstellungsfehler aus. Mit Trennlinien sieht die Tabelle nun so aus wie in Abbildung 10-4.

Abbildung 10-4: Die Beispieltabelle mit Trennlinien zwischen den Zellen

Wie schon gesagt wurde, verhindert die Definition border-collapse: collapse die Verdopplung der Trennlinien zwischen benachbarten Zellen. Jetzt fehlt uns noch eines: etwas Leerraum zwischen den Trennlinien und dem Tabelleninhalt, um die Lesbarkeit zu erhöhen. Außerdem soll auch die Tabelle selbst mit einem Rahmen umgeben werden. Das Ergebnis sehen Sie in Abbildung 10-5. Wir verwenden die folgenden Stildefinitionen: table { margin-left: 1px; border: 1px solid #000; } td, th { padding: 5px; }

Abbildung 10-5: Die Beispieltabelle mit einem Außenrahmen und genügend Platz zwischen dem Zelleninhalt und den Trennlinien

Tabellen- und Datenanordnung Aufgrund ihrer Komplexität führen die Feinheiten der Darstellung von Tabellen schnell zu Frustrationen. Erfahrene Entwickler können immerhin erahnen, wie eine Tabelle ohne Stildefinitionen dargestellt wird. Davon abgesehen, sieht das ideale Layout für Tabellen so gut wie immer anders aus als die Standarddarstellung der Browser.

174

|

Kapitel 10: (Daten-)Tabellen

Der erste Schritt bei der Gestaltung einer Tabelle besteht darin, die Zelleninhalte an gemeinsamen Hilfslinien auszurichten. Die Standardwerte hierfür sehen Sie in Tabelle 10-1. Tabelle 10-1: Standardausrichtung für von links nach rechts gelesene Tabelleninhalte Element

text-align

vertical-align

td

left

middle

th

center

middle

Normalerweise sollte die Darstellung der Daten diesen Regeln folgen: • Literale Daten sollten linksbündig und an der Oberkante der Zelle ausgerichtet werden. • th-Inhalte innerhalb des thead-Elements sollten entsprechend der von ihnen beschriebenen Daten und an der Unterkante der Zelle ausgerichtet werden. Allerdings gibt es gerade für diese Regeln reichlich Ausnahmen. Hier zwei Beispiele: • Designer richten die ersten beiden Spalten gerne an einem gemeinsamen Rand aus, um die am weitesten links stehende Datenspalte hervorzuheben. • Enthalten zwei benachbarte Zellen die gleichen Daten, wird oft die erste Zelle mit einem passenden Wert für rowspan bzw. colspan versehen und der Inhalt nur einmal aufgeführt. Dieser wird meist (auf Kosten der Zugänglichkeit) horizontal zentriert. Hierbei liegt die größte Schwierigkeit bei der Anwendung einheitlicher Gestaltungsmerkmale nicht in den Werten, sondern in den Selektoren. Soll nur mit Selektoren und ohne zusätzliche class-Werte ein präzises Layout der Tabelle erstellt werden, wird der Internet Explorer von seinen Mitbewerbern (siehe im Abschnitt »Fehlende oder schlechte Unterstützung für Selektoren« auf Seite 275) gnadenlos abgehängt. Neben der Ausrichtung von Tabellendaten müssen oft auch eigene Spaltenbreiten definiert werden. Das geht am besten mit id-Werten, die den Elementen colgroup und col zugewiesen werden. Es ergeben sich die folgenden CSS-Regeln: #typ #achsen #gvw #mvw #pax

{ { { { {

width: width: width: width: width:

8em; 8em; 4em; 4em; 8em;

} } } } }

Die Ergebnisse sehen Sie in Abbildung 10-6. Können die Tabellen aufgrund Ihrer Vorgaben nicht einzeln angepasst werden, erhalten Sie vielleicht die Erlaubnis, die Spaltenbreiten Ihrer Tabellen zumindest zu standardisieren. Das Ergebnis wäre vergleichbar mit den im Abschnitt »Einheitliche Gestaltung von gleichen Formularelementen« auf Seite 261 beschriebenen klassenbasierten Größen für Formularfelder. Bevor Sie die Ergebnisse in Abbildung 10-6 genauer betrachten, sollten Sie beachten, dass für jede Spalte eine eigene Regel definiert wurde. Prinzipiell ist es in Ordnung, die Breite mehrerer Spalten mit einer gemeinsamen Regel zu steuern. Allerdings kann dieses Vor-

Tabellenzellen anlegen

|

175

gehen in der Zukunft zu Problemen mit der Spezifität führen, weshalb wir die Regeln hier einzeln definiert haben.

Abbildung 10-6: Die Beispieltabelle mit angepassten Spaltenbreiten

Um positive Ergebnisse zu erzielen, sollten Sie sich bei der Gestaltung von col und colgroup auf die Eigenschaft width und background-* beschränken. Ändert sich das Layout oder der Inhalt einer Tabelle, führt die Verwendung von HTML-Attributen zur Steuerung der Darstellung schnell zu Problemen. Diese können zu Konflikten mit dem Wert von overflow oder anderen unerwarteten Ergebnissen führen. Weitreichende Änderungen am Markup-Code der Tabelle wären die Folge. Wenn Sie die Darstellung der Tabelle dagegen allein mit CSS-Stilen bestimmen, beschränken sich die Änderungen am Markup normalerweise auf die Reihenfolge der Daten und des Quellcodes.

Tabellenkopf- und -fußteil und ihre Zellen Werden die Daten an einem vorhersagbaren Raster ausgerichtet, sind die Ergebnisse meist besser lesbar. In Abbildung 10-7 sehen Sie die Tabelle, wenn den einzelnen Zellen die folgenden Werte für text-align und vertical-align zugewiesen werden: tbody thead tfoot thead th, tfoot

th th th th

{ { { {

text-align: right; } vertical-align: bottom; } vertical-align: top; } text-align: left; }

thead th[rowspan]:first-child, tfoot th[rowspan]:first-child { text-align: right; }

176

|

Kapitel 10: (Daten-)Tabellen

Abbildung 10-7: Die Beispieltabelle mit ausgerichteten Zellen im Kopf- bzw. Fußteil

Attribute und Kindselektoren Im letzten Stylesheet-Beispiel finden Sie zwei Selektoren, die wir noch nicht besprochen haben: thead th[rowspan]:first-child und tfoot th[rowspan]:first-child. Sie passen auf Elemente vom Typ th. Ein solches Element muss folgende Bedingungen erfüllen: Es muss ein Nachfahren-Element von thead oder tfoot sein, es muss ein rowspan-Attribut besitzen, und es muss das erste Kindelement seines Elternelements sein. Sie könnten jetzt denken, ich hätte mir diese Selektoren einfach ausgedacht. Das stimmt aber nicht. Mithilfe von Attribut- und :nth-child()-Selektoren (Teil von CSS 3) können Sie fast jedes Element in der Kaskade ansprechen, und zwar ohne hierfür zusätzliche idoder class-Attribute verwenden zu müssen. Leider fehlt im Internet Explorer wieder einmal jegliche Unterstützung für diese fortgeschrittenen Selektoren. Daher muss das Markup zumindest im Moment noch mit class-Attributen versehen werden. Oder aber Sie machen nichts, und alle dürfen des Kaisers neue Kleider in aller Öffentlichkeit bewundern. Im Falle von IE 8 ist der Frust besonders groß, denn der Attributselektor an sich wird unterstützt – nur nicht in Kombination mit Elementselektoren. Beachten Sie auch, dass :last-child momentan noch von keiner Version des Internet Explorers unterstützt wird, während :nth-child() in Firefox (ab Version 3.5) neu hinzugekommen ist. Wollen Sie die Tabellenzeilen beispielsweise mit alternierenden Farben (oder anderen Effekten) versehen, werden Sie zumindest in der näheren Zukunft nicht ohne class-Attribute auskommen. In Firefox können alternierende Farben beispielsweise so implementiert werden: tbody tr:nth-child(2n+1) td { background-color: #ccc; }

Mit den folgenden zwei Schritten finden Sie das richtige Argument für das Pseudoelement :nth-child(): 1. Definieren Sie die Schrittweite, in der die Farben gewechselt werden sollen. Dieser Zahl wird der Buchstabe n nachgestellt.

Tabellenkopf- und -fußteil und ihre Zellen

|

177

2. Ermitteln Sie die Nummer des ersten Elements, das mit Stilen versehen werden soll. Dieser Zahl wird ein Pluszeichen vorangestellt, und beides zusammen wird an den bestehenden Wert angehängt. Der vorige Selektor trifft also auf alle ungeraden tr-Elemente zu, wobei mit dem tr-Element Nummer 1 begonnen wird. (Hätten Sie nur den Wert 2n benutzt, wären alle geraden Elemente ausgewählt worden.)

Den Kontrast für Kopf- und Fußteil reduzieren Die bisherige Schriftgestaltung der Tabelle hat noch einen kleinen Makel: Der Inhalt von Kopf- und Fußteil fordert im Verhältnis zum eigentlichen Inhalt noch zu viel Aufmerksamkeit. Das lässt sich entweder mit weniger Kontrast oder einer geringeren Schriftgröße lösen. Die beiden Methoden können aber auch problemlos kombiniert werden. Hierbei verwenden wir für unsere Beispieltabelle die folgenden Stile: thead th, tfoot th { font-size: .75em; background-color: #ddd; color: #777; }

Eine andere Möglichkeit, den Kontrast für die Tabellenzellen zu verringern, besteht darin, die Helligkeit der Trennlinien zu erhöhen. Das Ergebnis sehen Sie in Abbildung 10-8.

Abbildung 10-8: Die Beispieltabelle mit verringerter Schriftgröße und weniger Kontrast in Kopf- und Fußteil sowie weniger Kontrast für die Trennlinien

Die letzten Schritte bestehen darin, die Überschrift anzupassen. Außerdem nehmen wir ein paar Abstimmungen an den Spaltenbreiten vor. Die zweite Spalte ist etwas zu breit, während die dritte und vierte etwas zu schmal für ihre Inhalte ausfallen: caption { padding-bottom: .413em; color: #777; font-size: 75%; font-weight: bold; text-align: left; } #type { width: 7.5em; } #axlect { width: 5em; } #gvw { width: 5em; }

178

|

Kapitel 10: (Daten-)Tabellen

#mvw { width: 5em; } #pax { width: 5em; }

Das Endergebnis sehen Sie in Abbildung 10-9. Eine Vorher/Nachher-Ansicht wird in Abbildung 10-10 gezeigt.

Abbildung 10-9: Die Beispieltabelle mit Anpassungen für Überschrift und einige Spaltenbreiten

Abbildung 10-10: Vorher/Nachher-Ansicht der Beispieltabelle

Der Grund für diese Stildefinitionen sollte jetzt klar sein. Welches der beiden Tabellendesigns in Abbildung 10-10 gefällt Ihnen besser?

Rollover-Effekte für Tabellen Ist eine Tabelle besonders breit oder verwendet sie rowspan- und colspan-Elemente, um die Daten korrekt darzustellen, sind möglicherweise Rollover-Effekte nützlich. Der einfachste Effekt ist eine Hervorhebung der Tabellenzeile, über der sich gerade der Mauszeiger befindet. Hierfür reicht eine Regel wie die folgende, die in allen größeren Browsern (außer dem Internet Explorer 6) funktioniert: tr:hover { background-color: #fcc; }

Sollen dagegen Spalten hervorgehoben werden, kommen Sie um ein Skript nicht herum. Befindet sich der Mauszeiger über einer bestimmten Zelle, lassen sich die darüber und

Tabellenkopf- und -fußteil und ihre Zellen

|

179

darunter befindlichen Zellen mit der DOM-API finden und verändern, indem die passenden style-Attribute hinzugefügt werden oder den Zellen bei Bedarf ein passender classWert zugewiesen wird. Und dann gibt es da noch die title-Attribute für Tabellenzellen. Diese haben wir im vorigen Beispiel nicht verwendet. Das lässt sich aber schnell ändern, beispielsweise indem Sie als Wert eine Beschreibung des Inhalts verwenden (etwa »Vergleich der Gesamtgewichte von LKWs«). Ein so detaillierter Ansatz braucht viele Worte und verringert möglicherweise die Benutzbarkeit besonders kleiner Tabellen. Die Arbeit mit größeren Tabellen wird jedoch erleichtert, weil es einfacher ist, den Sinn der Daten zu erfassen. Unabhängig davon, ob sie mit vom Benutzer ausgelösten Events interagieren oder nicht, sollte eines klar sein: Mit Tabellen kann man deutlich mehr anstellen, als nur ihren unnötigen Leerraum entfernen. Gestalter, die ein effektives Informationsdesign umsetzen sollen, finden in CSS eine Menge nützlicher Werkzeuge für ihre Aufgabe.

180

|

Kapitel 10: (Daten-)Tabellen

KAPITEL 11

Bilder und Multimedia

Man kann sich kaum noch vorstellen, dass das Web früher nur aus Text bestand. Zwar konnte man Bilder verlinken, die dann in einem eigenen Fenster angezeigt wurden. Allerdings wurden die Bilder und der Rest der Seite immer getrennt dargestellt. Der Browser NCSA Mosaic war damals eine kleine Revolution, weil er Bilder und Text gemeinsam in einem Dokument darstellen konnte. Kurz darauf folgten weitere Medien, speziell 1996, als die Autorenplattform, die heute als Flash bekannt ist, eingeführt wurde. Viele der Produktionsprinzipien, die in der Kindheit des Webs vor 15 Jahren entwickelt wurden, sind auch heute noch wichtig. Der Grund ist, dass sich die Unterstützung für die beiden wichtigsten Multimedia-Elemente img und object seit ihrer Einführung kaum verändert hat. Diese Prinzipien kommen zusammen mit neueren Techniken zur Minimierung der Server- und der Browserlast zum Einsatz.

Ersetzte Elemente In den Spezifikationen von CSS 2.1 und HTML 4.01 werden einige Elemente als »ersetzt« bezeichnet. Allerdings sind die Beschreibungen, was ersetzte Elemente sind und wie sie sich verhalten, nicht immer leicht verständlich. Abschnitt 3.1 der CSS 2.1-Spezifikation besagt: [Ein ersetztes Element ist] ein Element, dessen Inhalt sich außerhalb des Geltungsbereichs des CSS-Formatierungsmodells befindet. Hierzu zählen zum Beispiel Bilder, eingebettete Dokumente oder Applets. So wird der Inhalt eines img-Elements normalerweise durch das im Attribut src referenzierte Bild ersetzt. Ersetzte Elemente besitzten oft eine festgelegte Größe (Höhe, Breite, Seitenverhältnis).

Einfacher gesagt, bedeutet das: Die Darstellung eines ersetzten Elements kann, wenn überhaupt, nur durch direktes Eingreifen des Gestalters verändert werden. Typischerweise werden ersetzte Elemente nicht von der Rendering Engine des Browsers, sondern z.B. durch Teile des Betriebssystems oder ein Plugin dargestellt. Der Browser erhält die extern gerenderten Elemente und fügt sie nur in das Seitenlayout ein. Als ersetzte Elemente haben Bilder unter anderem eine eigene Höhe und Breite, d.h., Layout-Eigenschaften können verwendet werden. Ohne explizite Werte wird das Bild |

181

dagegen angezeigt, als sei es Teil des Textes: die Unterkante wird an der Grundlinie des umgebenden Textes ausgerichtet. Erhält ein nicht-ersetztes Inline-Element den Wert display: inline-block, kann hiermit das Verhalten ersetzter Elemente emuliert werden. Dies wird im Internet Explorer 6 allerdings nicht zuverlässig unterstützt. Er wendet die Darstellungsrolle inline-block nur auf die in HTML 4 genannten Inline-Elemente an. In der Praxis beginnt das Layout von Bildern meist mit der Zuweisung von display: block für die verwendeten Bilder oder für Container-Elemente, die sowohl die Bilder, als auch deren Beschriftungen enthalten. Hiermit wird zuerst einmal verhindert, dass die Unterkante der Bilder an der Textgrundlinie ausgerichtet wird. Außerdem erhöht sich die Lesbarkeit des Quellcodes, da zwischen den Bilddefinitionen Leerzeichen eingefügt werden können, ohne dass diese sich auf die Außenkanten der folgenden Bilder auswirken. Stellen Sie sich mehrere auf der gleichen Zeile definierte Bilder vor, wie z.B. . In der Standarddarstellung des Browsers werden die Leerzeichen ebenfalls dargestellt. Erhalten die Bilder dagegen die Definition display: block, können sie entsprechend ihrer Quellcode-Reihenfolge dargestellt werden. Optional kann ein passender Wert für float angegeben werden, wodurch die Bilder bündig nebeneinander stehen – es sei denn, ein Bild wird aufgrund seiner Breite unter seinen Vorgänger verschoben. Wenn die Quellcode-Reihenfolge und eine pixelgenaue Darstellung hohe Priorität haben, kommt man um display: block kaum herum. Manchmal muss eine Site auf ältere technische Anforderungen Rücksicht nehmen, und die Bilder werden als »Slices« definiert. In diesem Fall ist es meist besser, den porentief reinen Quellcode über Bord zu werfen und die Leerzeichen (inklusive der Zeilenumbrüche) zwischen den Bildern zu entfernen. Der Code kann immer noch formatiert werden, indem Sie die Zeilen nicht mit einem img-Tag beginnen, sondern mit dem ersten Attribut/ Wert-Paar.

Bilder vorbereiten Wenn Ihre Arbeit mit einem Photosop-Dokument beginnt, das bergeweise Material und Layoutanweisungen enthält, müssen Sie vor allem entscheiden, welchen Zweck die Teilgrafiken haben sollen: Kann eine Grafik als Designakzent im CSS-Code definiert werden, oder ist sie Teil des Inhalts? Designakzente sollten normalerweise als Hintergrundbilder definiert werden. Die einzige (seltene) Ausnahme sind grafische Überschriften. Weitere Informationen über die Erstellung und Gestaltung solcher Bilder finden Sie in Kapitel 9. Gehört ein Bild dagegen zum Inhalt, z.B. ein Foto oder eine Illustration, die Teile des Dokuments erläutern soll, sollte es mit einem img-Element direkt in die Seite eingebunden werden. Hierbei sollte mindestens der URI des Bildes und ein aussagekräftiger Wert für das alt-Attribut angegeben werden. 182

|

Kapitel 11: Bilder und Multimedia

Das »alt«-Attribut Für Besucher mit Sehschwächen ist das alt-Attribut absolut notwendig. Dies ist nur dann nicht wichtig, wenn die Bilder exakt so geladen und betrachtet werden wie vorgesehen. In allen anderen Fällen wird der Wert des Attributs angezeigt, damit das Bild auch dann seinen Sinn behält, wenn es selbst nicht sichtbar ist. Deshalb sollte das alt-Attribut immer angegeben werden. Am besten behandeln Sie es wie eine Beschriftung oder als eine Möglichkeit, das Thema des Bildes zu beschreiben, sofern bereits eine Beschriftung existiert. Werden eingebettete Bilder als nur Designakzente verwendet und können sie nicht im Stylesheet definiert werden, sollte ein leerer String als Wert für das alt-Attribut angegeben werden (alt=""). In Textbrowsern und Bildschirmleseprogrammen hinterlassen diese Bilder dann keine Spuren, so als hätten sie den display-Wert none.

Bildgrößen und Rahmen In den frühesten Browsern galt die Verwendung der HTML-Attribute width, height und border für die Darstellung von Bildern als gängige Praxis. Das lag daran, dass diese Programme die Seite erst darstellen konnten, wenn das gesamte Layout berechnet war, was ohne explizite Maßangaben für Bilder sehr lange dauern konnte. Ohne diese Angaben musste das Bild erst vollständig heruntergeladen werden, bevor die Seite dargestellt werden konnte, was mit einem 56-kbps-Modem leicht ein paar Minuten dauern konnte. Durch Verbesserungen der Renderingtechnik ist es mittlerweile möglich, die Seite darzustellen, auch wenn noch nicht alle Teile heruntergeladen wurden. Trotzdem lohnt es sich, die Größe von Bildern im Markup oder im CSS-Code anzugeben, damit die Layouts sich beim Laden der Seite nicht unerwartet verschieben, was unabhängig von der Verbindungsgeschwindigkeit leicht zu Verwirrung führen kann. Es stellt sich die Frage, wie der Entwickler diese Werte angeben soll: im Stylesheet oder im Markup? Die Vor- und Nachteile beider Methoden sehen Sie in Tabelle 11-1. Tabelle 11-1: Vor- und Nachteile bei der Angabe von Bildgrößen im Markup bzw. im Stylesheet Methode Markup

Stylesheet

Vorteile

Nachteile

•

Das Layoutverhalten bleibt unabhängig von Netzwerk- oder Serverproblemen intakt.

•

Änderungen am Bild ziehen zwangsläufig Änderungen am Markup nach sich.

•

Attribut/Werte-Paare dienen als ausreichende Metadaten.

•

Werte im Markup haben Vorrang vor möglicherweise anderslautenden Definitionen im Stylesheet.

•

Auf Details bedachtes Design wird mit geringerer Produktionszeit belohnt.

•

•

Layouts für Bilder sind leichter in die Kaskade zu integrieren.

Die Trennung von Bildeigenschaften von den Daten für das dargestellte Bild kann die Usability möglicherweise verringern.

•

Schlechtes Design erfordert die Verwendung vieler id- und class-Attribute.

Bilder vorbereiten

|

183

In Tabelle 11-1 wird die Notwendigkeit eines soliden Designs unterstrichen. Wie kaum eine andere Webtechnologie belohnt CSS diese Konsistenz. Normalerweise werden Bilder zum gleichen Thema oder im gleichen Seitenabschnitt auch ähnlich dargestellt. Anstatt jedes Element einzeln mit width-, height-, class- und id-Attributen zu versehen, können Sie die Präsentation so steuern, wie hier gezeigt: #haupttext img { float: right; clear: right; width: 288px; height: 144px; border: 0; }

oder: body.jahresberichte .diagramm { display: block; width: 478px; height: 200px; margin: 1em auto 1em auto; border: 0; }

Danach können Sie die Bilder (sofern diese die gleiche Größe haben) hochladen, ohne sich um ihre weitere Darstellung kümmern zu müssen. Die Rahmen für Bilder müssen ebenfalls erwähnt werden. Normalerweise können sie den Bildern mit dem Attribut border direkt zugewiesen werden. Da einige Browser als Link definierte Bilder automatisch mit einem Rahmen versehen, wird in vielen Stylesheets eine Regel wie die folgende verwendet, um dies wieder rückgängig zu machen: a img ( border: 0; }

Bilder erstellen Auch Bilder im Inhalt können von den Prinzipien für die Erstellung von Webgrafiken profitieren. Auch wenn die Qualität des Ausgangsmaterials ausreicht, werden die Bilder vor dem Hochladen meist noch nachbearbeitet. Die folgenden Abschnitte richten sich hauptsächlich an Leser mit einem starken technischen Interesse.

Beschneiden Oft enthält Ihr Ordner Bilder mit unterschiedlichen Größen, Seitenverhältnissen oder Bildqualitäten. Um sie in ein gemeinsames Design einbinden zu können, müssen einige Bilder sehr wahrscheinlich beschnitten werden. Die folgenden Anweisungen zeigen detaillierte Arbeitsabläufe in Adobe Photoshop. Um den Rahmen (dieses Buches, versteht sich) nicht zu sprengen, gehen wir auf das Beschneiden-Werkzeug und die Funktionen Bearbeiten → Transformieren und Bild → Bilddrehung nicht weiter ein.

184

|

Kapitel 11: Bilder und Multimedia

Das Rechteckauswahl-Werkzeug (je nach Darstellung das oberste Werkzeug in der linken Spalte bzw. das zweite Werkzeug in der einspaltigen Anzeige) ist am besten geeignet, um einen Bereich mit dem gewünschten festen Seitenverhältnis auszuwählen. Wenn möglich, sollte die Auswahl so platziert werden, dass der gewählte Ausschnitt möglichst gut von der Drittelregel profitiert, wie z.B. auf der Website zu diesem Buch (http://www.htmlcssgoodparts.net) gezeigt wird. Sobald die Auswahl getroffen ist, kann das Bild über den Menübefehl Bild → Freistellen beschnitten werden. Mithilfe der eingeblendeten Auswahlmöglichkeiten für das Rechteckauswahl-Werkzeug wählen Sie aus dem Aufklappmenü die Option »Festes Seitenverhältnis« und geben in die beiden Textfelder links davon die gewünschten Dimensionen ein (siehe Abbildung 11-1).

Abbildung 11-1: Die Optionen für das Rechteckauswahl-Werkzeug von Photoshop mit der Einstellung »Festes Seitenverhältnis«

Das Rechteckauswahl-Werkzeug wird gegenüber dem Freistellungswerkzeug bevorzugt, weil das Freistellungswerkzeug Eingabefehler so gut wie gar nicht verzeiht.

»Matting«: Ein virtuelles Passepartourt Kann ein Bild nicht beschnitten werden, ohne wichtige Details zu entfernen, ist es vielleicht möglich, es mit dem Dialog Bild → Arbeitsfläche auf die gewünschten Dimensionen zu bringen, wie in Abbildung 11-2 gezeigt.

Abbildung 11-2: Details des Dialogs »Arbeitsfläche« für das Matting

Um ein Bild mit einem Passepartout zu versehen, rufen Sie das Dialogfenster Bild → Arbeitsfläche auf und führen die folgenden Schritte aus: 1. Stellen Sie sicher, dass die in der Werkzeugleiste angezeigte Farbe der gewünschten Passepartout-Farbe für Ihr Bild entspricht.

Bilder erstellen

|

185

2. Berechnen Sie anhand des gewünschten Seitenverhältnisses die neue Höhe und Breite des Bildes. 3. Verwenden Sie den Dialog Bild → Arbeitsfläche, um die Größe der Arbeitsfläche anzupassen, und ersetzen Sie die angezeigten (aktuellen) Werte durch die neu berechneten. 4. Verankern Sie den vorhandenen Bildbereich ggf. an der gewünschten Kante oder Ecke. 5. Wiederholen Sie die Schritte 2 bis 4, bis das Bild das gewünschte Passepartout hat. Das Dialogfenster Arbeitsfläche kann auch verwendet werden, um das Bild mit einem Rahmen zu versehen. Stellen Sie hierfür die gewünschte Hintergrundfarbe ein, aktivieren Sie das Ankreuzfeld »Relativ«, und geben Sie für die Breite des Rahmens entsprechende Werte an.

Skalieren: Die absolute Bildgröße ändern Im Menü Bild finden Sie direkt über dem Eintrag Arbeitsfläche die Option Bildgröße. Hiermit können Sie die Auflösung und die Größe des Bildes an Ihre eigenen Bedürfnisse anpassen. Die folgenden Faustregeln können bei der Arbeit mit dieser Option helfen: • Sofern Sie das Bild nicht verzerren wollen, sollte die Option »Proportionen beibehalten« ausgewählt bleiben. • Ändern Sie die Werte für Breite und Höhe, nicht aber den Wert für die Auflösung. • Vermeiden Sie es nach Möglichkeit, die Bilder zu vergrößern. Wenn es nicht anders geht, sollte der Skalierungsfaktor nicht größer als 10 % sein. Ansonsten kann es besonders in Bereichen mit hohem Kontrast zu Unschärfen kommen. • Wenn Sie ein Bild um mehr als 20 % verkleinern, sollten Sie hinterher den Filter Unscharf maskieren verwenden (Filter → Scharfzeichnungsfilter → Unscharf maskieren). Hiermit können Sie Unschärfen in Bereichen mit hohem Kontrast ausgleichen (siehe Abbildung 11-3). Mit etwas Ausprobieren finden Sie schnell die richtige Kombination aus Stärke, Radius und Schwellenwert. • Wenn Sie mit einem Bild arbeiten, das keinerlei Kompressionsartefakte enthält, können Sie für die Skalierung einen bikubischen Algorithmus verwenden. Sind dagegen Artefakte vorhanden, ist der bilineare Algorithmus vermutlich besser geeignet. Die Option Pixelwiederholung ist speziell für ein »gezoomtes« (und dadurch gepixeltes) Aussehen gedacht. In Abbildung 11-2 sehen Sie diese Richtlinien in Aktion. Es ist prinzipiell eine gute Idee, eine Arbeitskopie zu erstellen, bevor Sie die Änderungen vornehmen. Diese sollte bereits die gewünschte Größe und Auflösung besitzen, bevor sie auf der Website eingesetzt wird, anstatt den Browser oder den Server damit zu belasten. Mit den entsprechenden Werkzeugen (z.B. mit dem Photoshop-Menübefehl Datei → Für Web und Geräte speichern) können Sie die gewünschte Ausgabequalität selbst festlegen. Wenn Sie dies dem Browser oder Server überlassen, wird meist die geringste Qualität gewählt, um Ressourcen zu sparen.

186

|

Kapitel 11: Bilder und Multimedia

Abbildung 11-3: Drei Ansichten des gleichen Bildes – links oben: Original; rechts oben: ein Drittel der Originalgröße; rechts unten: ein Drittel der Originalgröße nach Anwendung des Filters »Unscharf maskieren«

Tonwert und Kontrast anpassen Perfekte Fotos direkt von der Kamera sind selten. Wenn der Verschluss sich öffnet, sind einfach zu viele Umgebungsfaktoren am Werk, auf die der Fotograf keinen Einfluss hat. Eines der wichtigsten Werkzeuge, um diese Mängel auszugleichen, ist der Dialog Bild → Korrekturen → Tonwertkorrektur. Hiermit können Sie das Verhältnis von Hell zu Dunkel für die einzelnen Farben einstellen. Mit den oberen drei Reglern können Sie den Weiß-, Schwarz- und Graupunkt für die jeweiligen Kanäle (je nach verwendetem Farbmodus) verschieben und so den Kontrast und die Helligkeit präzise einstellen. Anhand des Histogramms lässt sich schnell erkennen, wo die einzelnen Punkte liegen sollten. Mit den unteren beiden Reglern können Sie den Tonwertumfang einstellen. Bewegen Sie die Regler aufeinander zu, verringert sich der Umfang, bewegen Sie die Regler voneinander weg, wird der Umfang erhöht.

Bilder erstellen

|

187

Abbildung 11-4: Drei Instanzen des »Tonwert«-Dialogs in Photoshop; hier verwendet, um den Kontrast eines Bildes zu erhöhen

Beispiele für den Tonwerte-Dialog sehen Sie in Abbildung 11-4. Das obere Bild zeigt das Histogramm eines unveränderten Fotos, im zweiten Bild wurden der Schwarz- und der Weißpunkt mithilfe des Histogramms verschoben. Das dritte Bild zeigt das Histogramm nach der Anpassung. Das gestreifte Aussehen hat mit der Neuberechnung des Bildes zu tun. Hierbei werden Bereiche mit hohem Kontrast neu berechnet. 188

|

Kapitel 11: Bilder und Multimedia

Um den Kontrast eines Fotos zu optimieren, können Sie sich an folgende Faustregel halten: Hat das Tonwert-Histogramm seinen höchsten Ausschlag irgendwo in der Mitte, besteht die effektivste Kontrastanpassung darin, die dreieckigen Regler näher an den Histogramm-»Berg« heranzuschieben.

Mehrere Anpassungen auf einmal Sollen mehrere der gerade beschriebenen Anpassungen vorgenommen werden, sollten Sie in der folgenden Reihenfolge vorgehen. 1. Beschneiden: Werden die Tonwerte eines Bildes vor dem Beschneiden angepasst, wird hierfür ein anderes Histogramm verwendet als für das beschnittene Bild. 2. Tonwerte: Ohne eine Neuberechnung des Bildes werden die Lücken im Tonwertbereich des Bildes nur verschoben, aber nicht entfernt. 3. Neu berechnen: Die Neuberechnung (Menübefehl Bild → Bildgröße) eines Bildes nach einer Tonwertanpassung ermöglicht dem Bildbearbeitungsprogramm eine Interpolierung der Bereiche mit hohem Kontrast. Dies ist nicht möglich, wenn die Skalierung vor der Tonwertanpassung vorgenommen wird. 4. Virtuelles Passepartout: Die gleiche Interpolation, mit der die Lücken im Histogramm eines neu berechneten Bildes ausgefüllt werden, bewirkt auch, dass die Innenkanten eines Bildes mit Passepartout verwischen. Dies lässt sich verhindern, wenn die Neuberechnung als Erstes durchgeführt wird.

Mit Farbprofilen arbeiten Wie in Kapitel 9 bereits gesagt wurde, sehen Sie bei der Umsetzung eines Website-Designs nicht zwangsläufig das Gleiche wie Ihre Besucher. Hierfür ist hauptsächlich die Qualität der verwendeten Hardware verantwortlich, aber die Annahmen, nach denen die Hardware konfiguriert wird, spielten ebenfalls eine Rolle. In jedem Medium, mit dem normalerweise Webseiten angezeigt werden – z.B. LCDBildschirme, Röhrenmonitore, Projektoren, Papier verschiedenster Art –, werden die Farben anders angezeigt. Diese Medien werden alle nach bestimmten Annahmen über den Tonwertumfang der angezeigten Farben und die Stärke des Umgebungslichts beim Benutzer hergestellt. Alle diese Faktoren (und noch einige mehr) beeinflussen die Darstellung der Farben. Daher enthalten Grafikdateien oft sogenannte Farbprofile. Sie beschreiben die Eigenschaften der Werkzeuge, mit denen die Bilder erstellt wurden. In Abbildung 11-5 sehen Sie die Beziehungen zwischen Farbprofilen für Medien und Geräte.

Mit Farbprofilen arbeiten

|

189

1

2

3

4

5 Bildschirm des Besuchers

Kamera Bildschirm des Designers Scanner

Drucker des Besuchers

Abbildung 11-5: Fünf Stufen der Farbverwaltung: Erstellung, Hochladen, Veränderung, Übertragung und Anzeige

Mitte der Neunzigerjahre befassten sich Microsoft und Hewlett Packard mit dem Problem der verschiedenen Anzeigemedien, indem sie den sRGB-Farbraum erfanden und veröffentlichten. Hierbei handelt es sich um eine physikalische Farbbeschreibung, die im Design und für die Kalibrierung elektronischer Anzeigegeräte verwendet werden kann. Der sRGB-Farbraum wird vom W3C unterstützt und ist Teil der Spezifikation für Scalable Vector Graphics (SVG), einem von zwei Grafikformaten, die im Laufe der Zeit vom W3C erstellt wurden. sRGB ist nicht der einzige Farbraum, allerdings wird er im Web am häufigsten verwendet. Apples Browser Safari verwendet dagegen ICC-Profile (International Color Consortium), während in Firefox 3 die Unterstützung erst ausdrücklich aktiviert werden muss. Die folgenden Richtlinien können Ihnen bei der Arbeit mit Farbprofilen helfen: • Bietet Ihr Monitor neben einer Liste mit Weißpunkten die Unterstützung für sRGB, sollten Sie die sRGB-Option wählen. Ansonsten behalten Sie besser die Werkeinstellung für Weißpunkte bei. • Enthält die ursprüngliche Bilddatei ein eingebettetes Profil, sollten Sie dessen Farbraum beim Öffnen mit einem Bildbearbeitungsprogramm nach sRGB konvertieren. • Der Photoshop-Dialog Für Web und Geräte speichern entfernt das Farbprofil, bevor die Datei auf die Festplatte geschrieben wird. Ist die Bildqualität wichtiger als die Dateigröße, sollten Sie diese Option nicht verwenden. Man kann davon ausgehen, dass Bilder ohne eigenes Profil im sRGB-Farbraum dargestellt werden. Daher sollten sie immer nach sRGB konvertiert werden, bevor sie auf einen Webserver hochgeladen werden.

190

|

Kapitel 11: Bilder und Multimedia

Bildoptimierung Das richtige Dateiformat wählen Allgemein werden im Web drei Dateiformate für Bilder unterstützt: Graphics Interchange Format (GIF) GIF ist das älteste der drei im Web gängigen Dateiformate für Bilder. Es wird typischerweise für Bilder mit großen einfarbigen Bereichen verwendet. Joint Photographic Experts Group File Interchange Format (JPEG) Wie der Name bereits andeutet, ist dieses Format besonders gut für Fotografien geeignet. Es wird von allen Digitalkameras unterstützt. Das JPEG-Format ist außerdem das einzige Dateiformat, das zuverlässig eingebettete Farbprofile unterstützt. Portable Network Graphics (PNG) Die PNG-Spezifikation ist eine direkte Antwort des W3C auf technische und patentrechtliche Einschränkungen des GIF-Formats. Tatsächlich ist PNG dem GIF-Format in fast allen Bereichen überlegen. Leider werden die mit PNG möglichen Alphakanäle vom Internet Explorer 6 nicht unterstützt (siehe Kapitel 14). Ein viertes Format mit dem Namen Scalable Vector Graphics (SVG) ist eigentlich ein XML-Dialekt. Obwohl SVG eine Reihe spannender Möglichkeiten bietet und wie PNG ausdrücklich ein offenes Format ist, wird es von aktuellen Browsern nicht vollständig unterstützt (vom Internet Explorer überhaupt nicht). Enthält das Bild eine Strichzeichnung oder große einfarbige Bereiche, sollte es im GIFoder PNG-Format gespeichert werden. PNG ist die beste Wahl, wenn mehrere Transparenzabstufungen benötigt werden. Fotos sollten prinzipiell als JPEG gespeichert werden. Da die verwendete Kompressionsmethode nicht verlustfrei arbeitet, kann es bei nicht fotorealistischen Bildern leicht zu Artefakten kommen.

Die goldene Mitte zwischen Dateigröße und Bildqualität Vor der Kompression gibt es zwei Methoden, um die Dateigröße eines Bildes zu verringern: Verringern der Bildgröße und Reduzierung des Kontrasts. Beide Methoden haben einen negativen Effekt auf die Bildqualität und sollten daher vorsichtig verwendet werden. Beide Methoden verringern die Dateigröße auf unterschiedliche Weise. Beim Verringern der Bildgröße wird die Anzahl der zu komprimierenden Pixel logarithmisch reduziert. Je kleiner das Bild ist, desto kleiner ist die Datei. Eine moderate Verringerung des Kontrasts kann ebenfalls effektiv sein, weil sie den Helligkeitsumfang des Bildes reduziert. Dies ist sowohl für verlustbehaftete (JPEG) als auch für verlustfreie Kompressionsverfahren (GIF, PNG) geeignet. Ausführliche Details finden Sie auf der Website zu diesem Buch.

Bildoptimierung

|

191

Haben Sie eine lauffähige Kopie von Photoshop und mehrere zu bearbeitende Bilder, stellt sich die Frage nach der Ausgabequalität. Beim JPEG-Format lässt sich die Qualität meist anhand von Prozentwerten nachvollziehbar einstellen. Bei den Formaten GIF und PNG ist die Qualität subjektiver. Hierbei wird die Farbtiefe verringert und die verbleibenden Farben indiziert, wodurch manche Zwischenfarben per Dithering erzeugt werden. Im Allgemeinen erhalten Sie die besten Ergebnisse für GIF-Abbildungen und PNG-Bilder mit niedriger Qualität, wenn Sie indizierte Farben mit einer Tiefe von 2, 16, 64 oder 256 Farben verwenden. Haben Sie sich für eine Farbtiefe entschieden, müssen Sie noch eine geeignete DitheringMethode wählen. Photoshop bietet hierfür vier Optionen an. Hier die Liste in der Reihenfolge der Qualität bei geringer Farbtiefe: 1. Muster 2. Diffusion 3. Rauschen 4. Kein Dither Diese Reihenfolge ist ein wenig subjektiv. Je geringer der Kontrast oder die Anzahl der wichtigen Farben in einem Bild ist, desto weniger wird ein normaler Besucher mögliche Fehleinstellungen von Palette oder Dithering wahrnehmen.

Bilder veröffentlichen Das Veröffentlichen von Bildern scheint eigentlich ganz einfach zu sein. Das ist aber nicht immer so. Zielordner, Dateinamen-Konventionen und das Verhalten von Content-Management-Systemen (CMS) können sich von Projekt zu Projekt unterscheiden.

Bilder richtig ordnen Einigermaßen große Websites enthalten wahrscheinlich Dutzende oder sogar Hunderte von Bildern. Größere Sites – besonders soziale Netzwerke – speichern oftmals Hunderte oder Tausende, vielleicht sogar Millionen von Bilddateien. Was machen Sie also, um über alle diese Dateien den Überblick zu behalten? Oft spiegelt die Ordnung der Bilder die Struktur der Website wider. Kompliziert wird die Bildverwaltung erst, wenn Sie hierfür mehrere Verzeichnisse verwenden müssen. Bei kleinen Sites reicht meistens ein /bilder (bzw. /images)-Verzeichnis. Die Bilder darin werden nach ihrer Funktion benannt, wie hier: /bilder/hintergrund_seitenleiste_kontakt.png Die allgemeine Form lautet in etwa: art_seitenkontext_websitekontext.format

192

|

Kapitel 11: Bilder und Multimedia

Natürlich können Sie auch andere Kritierien zur Benennung der Dateien heranziehen: das Thema der Seite, den Nachnamen des Künstlers, das Erstellungsdatum etc. Alle diese Dinge geben einen lesbaren Hinweis auf den Bildinhalt – zumindest für die Leute, die sich mit der Site auskennen. Die Dateinamen können einem beliebigen Schema folgen, sofern es angemessen ist. Ich verwende gerne zuerst die Funktion der Datei, weil sich Dateilisten meiner Erfahrung nach dadurch leichter lesen lassen. Bei größeren Sites ist es vermutlich sinnvoller, für jeden Bereich der Website ein eigenes /bilder-Verzeichnis anzulegen. Anstelle von /bilder/artikel_foto_berichte_2009_Vj2_ fabrikboden.jpg eignet sich folgende Formulierung vielleicht besser als Wert für das src-Attribut: /berichte/bilder/artikel_foto_2009_2Vj_fabrikboden.jpg. Oftmals bleibt das Verzeichnis /bilder selbst für grafische Akzente reserviert, die in mehreren Bereichen der Website verwendet werden. Eine weitere Herausforderung besteht in der Verwaltung von veränderten Inhalten. Bei großen Websites bietet sich die Verwendung eines Systems zur Versionskontrolle (RCS) wie Subversion oder Git an. Bei kleineren Sites reicht es vermutlich schon aus, ein Verzeichnis anzulegen, das einen zeitlichen Bezug im Namen trägt (z.B. eine Datumsund Uhrzeitangabe oder den Codenamen einer Version). Die »alten« Dateien werden in dieses Verzeichnis verschoben, während die »neuen« Dateien ihren ursprünglichen Platz einnehmen.

Bilder mit einem CMS verwalten und veröffentlichen Auf Websites, die von benutzererzeugten Inhalten leben, werden die Bilder oft an einem Ort gespeichert, auf den nur vom Backend eines Content-Management-Systems (CMS) aus sicher zugegriffen werden kann. Das scheint auf den ersten Blick keine schlechte Lösung zu sein. Sind Erweiterungen zur Bildbearbeitung installiert, kann das CMS die Werte für src-Attribute automatisch einfügen und bei Bedarf auch Vorschaubilder erstellen. Allerdings hat das auch eine Reihe von Nachteilen, die man nicht ignorieren sollte: • Die Schnittstellen für Vorschaugalerien sind nur schwer zu benutzen. • Die Konventionen zur Benennung von Dateien sind entweder zu streng oder zu schwach, was die Usability von Vorschaugalerien noch mehr verringert. • Implementierung und Verhalten sind nicht standardisiert. Sie hängen vom verwendeten CMS und von den installierten Erweiterungen ab. • Die Definition eigener Stile für Bilder ist zwangsläufig stark eingeschränkt, was viele Benutzer nur ungern oder gar nicht akzeptieren.

Bilder veröffentlichen

|

193

Um diese Nachteile auszugleichen, gibt es eine Reihe von Strategien: Verwenden Sie nach Möglichkeit Publishing-Werkzeuge, um die Bilder in einem zugänglichen Dateisystem des Webservers zu speichern. Diese Methode hat ihre eigenen Nachteile. Tatsächlich ist der Speicherort für Bilder unter CMS-Entwicklern heiß umstritten. Auf jeden Fall erleichtert die Speicherung der Bilder direkt im Dateisystem (anstelle einer Datenbank) ihre Wartung und ermöglicht auch kurzfristige Änderungen. Verwenden Sie Publishing-Werkzeuge, die eine Volltextsuche in Bildnamen und -beschreibungen ermöglichen. In der Praxis sind solche Suchwerkzeuge meist langsam und ergeben oft schlecht sortierte oder unzuverlässige Ergebnisse. Wenn die Alternative aber darin besteht, sich manuell durch Hunderte von Vorschaubildern zu graben, nimmt man eben, was man kriegt. Erwerben Sie das nötige Fachwissen für das CMS Ihrer Wahl. Bei diesem Schritt geht es um gute Angewohnheiten. Jedes Werkzeug hat seine Fehler und Macken. Das beste Mittel dagegen ist Erfahrung. Legen Sie strikte Regeln für die verwendeten Stile fest, und sorgen Sie für ihre Einhaltung. Für viele Leser ist diese Methode nicht praktikabel. Andere werden feststellen, dass die Vorteile, Gelegenheitsbenutzer über das Prinzip des »Garbage In, Garbage Out« (das Ergebnis kann nicht besser sein als das Ausgangsmaterial) aufzuklären, den Zeitaufwand mehr als wieder gutmachen. Das Konzept der Stilrichtlinien wird in Kapitel 5 vorgestellt. Eine detaillierte Diskussion finden Sie auf der Website zu diesem Buch. Die Einhaltung guter Produktstandards ist gerade bei benutzererzeugten Inhalten mitunter recht kompliziert. Am besten geht das mit gut erzogenen Benutzern und einem einigermaßen funktionstüchtigen CMS. In weniger gut gepflegten Umgebungen ist es vielleicht nötig, die Dinge einfach laufen zu lassen – was normalerweise bedeutet, dass die Benutzer ihre Fehler so weit wie möglich selbst bereinigen.

Etikette beim Veröffentlichen von Bildern Da auf Bilder genauso zugegriffen wird wie auf Seiten, gibt es keinen Unterschied zwischen der Zuweisung von src-Werten und href-Werten. Die Einfachheit dieser Methode verführt unerfahrene oder skrupellose Leute dazu, Bilder auf ihren Sites zu veröffentlichen, die eigentlich von den Websites anderer Leute stammen. Wenn es um Bilder geht, sollten Sie weder naiv noch skrupellos sein. Die übliche Vorgehensweise beim Veröffentlichen von Bildern setzt folgende Dinge voraus: 1. Die ausdrückliche oder implizite Erlaubnis, ein Bild im Kontext eines URIs unter Ihrer Kontrolle zu veröffentlichen, ist vom Besitzer der Veröffentlichungsrechte erteilt worden.

194

|

Kapitel 11: Bilder und Multimedia

2. Eine angemessene Würdigung des Besitzers oder zumindest des Rechteinhabers. 3. Bilddateien, die im Kontext von URIs unter Ihrer Kontrolle veröffentlicht werden, werden auch von URIs unter Ihrer Kontrolle gehostet. Eine Nichbeachtung der ersten Bedingung verletzt Urheberrechte, eine Nichbeachtung der zweiten Bedingung ist äußerst unhöflich, und eine Missachtung der dritten Voraussetzung bedeutet, dass Sie die Bandbreite anderer Leute missbrauchen (was schlimmstenfalls als Diebstahl gilt). Wird ein Bild über das img-Element angefordert, enthält sein Request-Header den entsprechenden URI in seinem Referer-Feld. Wenn Sie Opfer eines Website-Betreibers sind, der sich über die dritte Bedingung hinwegsetzt, können Sie dies durch Einstellungen an Ihrem Webserver unterbinden. Hierfür überprüft der Webserver die Referer-Felder für Bildanfragen. Kommen die Anfragen von einer Server, der sich nicht unter Ihrer Kontrolle befindet, kann dann eine 3xx- oder 5xx-Serverantwort geschickt werden.

Stile für Bilder und Plugin-Inhalte Das Layoutverhalten von Inline-Block-Elementen, wie z.B. Bildern, erfordert in den meisten Fällen zusätzliche Stilregeln.

Bildlayout innerhalb einer Spalte In der Praxis werden Sie Bilder meist an den Rändern der Spalte ausrichten oder sie innerhalb der Elternspalte zentrieren, zum Beispiel mit den in Abbildung 11-6 gezeigten Stildefinitionen. Die hier gezeigten Eigenschaft/Wert-Paare verwenden explizit die Regel display: block, mit der das Layoutverhalten vereinheitlicht werden soll. Wird diese Regel zusammen mit einem Klassenselektor verwendet, kann der Aufwand für die Gestaltung der dazugehörigen Bildbeschriftungen deutlich reduziert werden.

Bildbeschriftungen Um Bilder, die mit den in Abbildung 11-6 gezeigten Methoden formatiert wurden, mit einer Beschriftung zu versehen, können Sie eine der folgenden zwei Methoden verwenden: • Versehen Sie das Ausgangsbild mit einem Passepartout, wie weiter vorne in diesem Kapitel beschrieben wurde und verwenden Sie eine grafische Bildbeschriftung im entstandenen Leerraum. Vergessen Sie nicht, die entsprechenden Werte für alt und title anzugeben. • Definieren Sie den Text für die Überschrift in einem Absatz (oder einem anderen passenden Element), der direkt auf das Bild folgt. Umgeben Sie dann das Bild und die Beschriftung mit einem div-Element (in seltenen Fällen auch mit einem Absatz). Mögliche Layoutstile sehen Sie in der Abbildung.

Stile für Bilder und Plugin-Inhalte

|

195

display: block; float: left; clear: left; margin: 0 [x] [y] 0;

display: block; width: [original]; clear: both: margin: 0 auto;

display: block; float: right; clear: right; margin: 0 0 [x] [y];

Abbildung 11-6: Typische CSS-Regeln für die Formatierung von eingebetteten Bildern

Bei der ersten Implementierung wird weniger Markup gebraucht. Außerdem wird das Bild immer in einem sichtbaren Kontext angezeigt. Der Hauptnachteil dieser Methode besteht darin, dass sie unnötig viel Bandbreite beansprucht, um den zusätzlichen Inhalt zu transportieren. Der Bandbreitenbedarf erhöht sich durch die Mischung aus Vollfarben und Fotorealismus deutlich, weil die Qualität wesentlich größer sein muss, als nur für das Foto. Soll die Beschriftung verborgen werden, kann das Foto z.B. mit einem div-Element umgeben werden, dessen Werte für height und overflow so eingestellt sind, dass die Beschriftung nicht mehr zu sehen ist. Zum Beispiel: div#ProduktFoto { float: left; width: auto; height: 176px; overflow: hidden; }

Wenn SSie dagegen eine Beschriftung verwenden wollen und diese als reiner Text definiert ist, können Sie die folgende Regel verwenden: div#ProduktFoto_mit_Beschriftung { float: left; width: 176px; margin: 0 9px 9px 0; font-size: small; font-style: italic; }

Wird die Beschriftung nicht als Teil des Bildes, sondern im Quelltext definiert, sollte das Container-div für Bild und Beschriftung einen id- oder class-Wert haben, der seiner Funktion entspricht (z.B. class="Bild_mit_Beschriftung").

196

|

Kapitel 11: Bilder und Multimedia

Vorschaubilder für Galerien und Diaschauen (Slideshows) Das Layout von Vorschaubildern (für Galerien und Diaschauen) sowie für Applikationsschnittstellen hat gewisse Ähnlichkeiten. Die Implementierung ist auf theoretischer wie auf praktischer Ebene nicht ganz einfach, was besonders mit dem Verhalten ersetzter Elemente zu tun hat. Hierfür gibt es viele verschiedene Lösungen: Sie können div-Elemente mit class-Attributen verwenden, aber auch Listen oder sogar Tabellen, ohne dabei (ganz) falsch zu liegen. Meiner Erfahrung nach besteht der beste Kompromiss zwischen Anonymität und Kürze in der Verwendung ungeordneter Listen. Dies gilt besonders, wenn die Anzahl der Vorschaubilder im Seitendesign nicht festgelegt ist. Definitionslisten können für die Realisierung von Bildbeschriftungen praktisch sein, wenn Sie die genauen Ausmaße Ihres Layouts schon kennen. Wenn Sie das umgebende dl-Element relativ positionieren und die enthaltenen dt- und dd-Elemente absolut, können Sie jedes Bild und dessen Beschriftung mit wenig Aufwand genau platzieren. Bevor Sie sich an die Arbeit machen, sollten Sie sich ein paar Fragen stellen: • Haben alle Bilder das gleiche Format? • Falls die Bilder unterschiedliche Größen haben: Können Sie mit einem Passepartout versehen oder beschnitten werden, um sie auf die gleiche Größe zu bringen? • Falls das nicht geht: Müssen die Bilder und ihre Beschriftungen aneinander ausgerichtet werden? Die ersten beiden Fragen geben einen Hinweis darauf, dass die Vorschaubilder möglichst gleich groß sein sollten, was unter anderem die Lesbarkeit des Layouts erhöht. Außerdem können serverseitige Bibliotheken zur Bildbearbeitung wie ImageMagick, GD2 u.Ä. benutzt werden, um die Bilder zu beschneiden oder mit einem Passepartout zu versehen. Die Verwendung von ImageMagick für genau diesen Zweck wird beispielsweise in dem Buch Painting the Web von Shelley Powers (O’Reilly) beschrieben. Im Allgemeinen können Sie sich beim Layout von Vorschaubildern (und anderen floatlastigen Inhalten) an die folgende Faustregel halten: Bei der Arbeit mit aneinander angrenzenden Floats müssen Sie vermutlich zwischen vorhersagbaren Bildgrößen und leeren Elementen mit einem passenden clear-Wert wählen, um das vertikale Layout zu steuern.

Die Verwendung der Eigenschaft clear wird ausführlich im Abschnitt »Das ›float‹-Verhalten mit der Eigenschaft ›clear‹ steuern« auf Seite 90 erklärt. Wenn wir uns eine ungeordnete Liste mit Vorschaubildern vorstellen, deren Größe 240 × 180 Pixel beträgt, erhalten wir in etwa die folgenden Stildefinitionen: ul#vorschaubilder { margin: 0; padding: 0; list-style-type: none; } ... li { display: block; float: left; width: auto; padding: 15px; } ... li img { display: block; width: 240px; height: 180px; }

Stile für Bilder und Plugin-Inhalte

|

197

Wie gesagt, erleichtern gleich große Vorschaubilder die Gestaltung. Ist das nicht möglich, sollten die Container für die Bilder entweder die gleiche Höhe oder die gleiche Breite besitzen. Der Grund ist das Verhalten von Elementen mit der Definition float: left (bzw. float: right), wie in Abbildung 11-7 gezeigt.

1

2

3

4

5 6

7

8

9

10

11

12

Abbildung 11-7: Beispiele für das Verhalten von Floats

In dieser Abbildung wird Element 6 unter Element 5 verschoben, da es ansonsten über das umgebende Element hinausragen würde. Wäre Element 6 breiter als der Zwischenraum zwischen der Box von Element 4 und dem rechten Rand des Container-Elements, würde es stattdessen unter Element 2 verschoben werden. Wäre Element 7 direkt neben Element 6 platziert worden, würde es ebenfalls über sein Container-Element hinausragen. Deshalb wird es unter 6 platziert und so weit wie nötig nach links verschoben – bis zum linken Rand des Container-Elements. Gibt es keine Probleme mit Überschneidungen, muss sich die Oberkante auf gleicher Höhe mit der Oberkante seines Vorgänger-Floats befinden. Dies erklärt die Position der Elemente 2 bis 5 und 8 bis 12. Wenn Sie sicherstellen, dass aufeinanderfolgende Floats die gleiche Größe haben, lässt sich ihr Layoutverhalten recht zuverlässig vorhersagen. Das hilft dabei, Layouts wie das eben gezeigte zu vermeiden.

Lightbox: Vorschaubilder, Galerien und Diaschauen Für Inhaltsspezialisten und Designer mit ausreichend JavaScript-Fähigkeiten, die keine eigenen Werkzeuge für die Verwaltung großer Bildmengen verwenden wollen, könnte die JavaScript-Bibliothek Lightbox (http://www.huddletogether.com/projects/lightbox2/) interessant sein. Lightbox ist ein Projekt des Designers und Entwicklers Lokesh Dhakar. Wahrscheinlich kennen Sie Lightbox (oder einen seiner Nachahmer) bereits von anderen Sites. Wenn Sie jemals ein Vorschaubild angeklickt haben, worauf der Ansichtsbereich

198

|

Kapitel 11: Bilder und Multimedia

abgedunkelt wurde und davor das Bild in voller Größe in einem eigenen »Fenster« aufgezogen wurde, war mit ziemlicher Sicherheit die eine oder andere Lightbox-Variante am Werk. Lightbox läuft direkt im Browser. Es basiert in der aktuellen Version auf verschiedenen öffentlich zugänglichen JavaScript-Bibliotheken und lässt sich recht einfach einsetzen: 1. Übertragen Sie die Bilder in voller Größe in das gewünschte Verzeichnis Ihrer Wahl. 2. Laden Sie die für Lightbox benötigten CSS- und JavaScript-Dateien gemäß der beiliegenden Anleitung auf den Server hoch. 3. Umgeben Sie die img-Elemente, die als Vorschaubilder dienen sollen, mit a-Elementen, die auf die große Version des jeweiligen Bildes verweisen. Damit Lighbox funktioniert, müssen die a-Elemente das Attribut/Wert-Paar rel="lightbox" verwenden. Lightbox ist nicht für alle Projekte die beste Lösung. Wenn Sie mal eben ein paar hübsche Effekte brauchen, nur wenig Kenntnis von JavaScript und einen knappen Abgabetermin haben, ist Lightbox jedoch eine ausgezeichnete Wahl, um Vorschaubilder, Galerien und Diaschauen zu präsentieren.

SlideShowPro Manchmal sind Lightbox oder selbst gebaute Diaschauen für Ihren Zweck nicht geeignet, z.B. wenn Benutzer mit wenigen Fachkenntnissen ihre Bilder selbst verwalten sollen. In diesem Fall können Sie noch einen Schritt weiter gehen und das kommerzielle Werkzeug SlideShowPro einsetzen. Hierbei handelt es sich um eine beliebte Diaschau-Lösung für gewerbliche und andere große Websites. SlideShowPro wurde von Todd Dominey entwickelt und wird von seiner Firma Dominey Design vertrieben. Es basiert zu großen Teilen auf Flash, um verschiedene Arten von Bildwechsel-Effekten zu realisieren, die besonders für Diaschauen geeignet sind. Zwar bieten verschiedene JavaScript-Erweiterungen die gleichen Funktionen, allerdings sind die Kosten hierbei oft höher, weil die JavaScript-Funktionen für jeden Browser einzeln und ausführlich getestet werden müssen. SlideShowPro bietet eine umfassende (englische) Dokumentation und ist normalerweise für Diaschauen und Galerien einfacher zu benutzen. Der Einsatz von JavaScript vermeidet dagegen die Abhängigkeit von Flash. Um SlideShowPro erfolgreich einzusetzen, müssen Sie eine Flash-Datei erstellen oder besorgen, in der die SlideShowPro-spezifischen Materialien gespeichert werden. Danach gibt es verschiedene Methoden, um die Bilder einer Diaschau zu erstellen und in Ihre Site einzubinden: • Laden Sie die Bilder direkt per FTP hoch, und verwenden Sie spezielle XML-Dateien, um darauf zu verweisen. • Verwenden Sie einen RSS-(Really Simple Syndication-)Feed, um Materialien zu verlinken, die bereits online sind.

Stile für Bilder und Plugin-Inhalte

|

199

• Installieren Sie das Schwesterprogramm SlideShowPro Director. Hiermit können Sie Ihre Bilddateien in eine Datenbank übertragen und bei Bedarf die benötigten XMLDateien erzeugen.

Integration von Videos und Präsentationen im Flash-Format mit SWFObject Abgesehen von den traditionellen Webwerkzeugen ist Adobe Flash die beliebteste Methode, um Audio, Video und andere Multimedia-Inhalte in Websites zu integrieren. Wer sich die Veröffentlichung kompilierter Flash-Präsentationen einfach machen will, der kann beispielsweise die frei verfügbare JavaScript-Bibliothek SWFObject von Geoff Stearns einsetzen. SWFObject verwendet die DOM-API und andere Schnittstellen, um die mit Flash-Inhalten verbundenen Probleme zu umgehen. Hierzu gehört besonders das Herausfinden der verwendeten Version. Liegen die gewünschte Flash-Datei und die aktuelle swfobject.js-Datei bereits auf dem Webserver, kann der Entwickler den Inhalt mit den folgenden Schritten in das Dokument integrieren. Zuerst muss die Datei swfobject.js über ein script-Element im head-Teil des Dokuments eingebunden werden. Danach wird das Markup um eine Zeile Code und ein Stück JavaScript erweitert. Hierdurch wird ein applikationsspezifisches SWFObject-Objekt erzeugt, das den vorangehenden Markup-Code modifiziert, um das Element, das die Flash-Präsentation enthält, zu erzeugen und zu füllen. Natürlich können Sie auch Ihr eigenes standardkonformes object-Markup schreiben und SWFObject nur verwenden, um die Versionserkennung und andere Funktionen zu nutzen. Wie Sie am Ende dieses Kapitels sehen werden, bietet HTML 5 neue Lösungen, um Audio- und Videoelemente direkt und ohne die Hilfe von Flash in Ihre Website einzubinden.

Soll eine einfache Videodatei mithilfe von Flash auf Ihren Seiten wiedergegeben werden, reicht die Verwendung von SWFObject nicht für die Darstellung aus. Vorher müssen die folgenden Schritte ausgeführt werden, um Ihre Daten bereitzustellen: 1. Speichern Sie die Videodatei auf der Festplatte. 2. Berechnen Sie die Videodaten neu (sogenanntes »Resampling« zum Verringern der Dateigröße). 3. Kodieren Sie die Videodaten im FLV-Format neu. 4. Erstellen oder lizensieren Sie den gewünschten Flash-Player. 5. Laden Sie die fertige FLV-Datei und den SWF-Player ggf. auf den Webserver hoch.

200

|

Kapitel 11: Bilder und Multimedia

In der Praxis hängen die Details der Schritte 1–3 von Ihrer Postproduktionssoftware ab. Allein über die Aufbereitung von Web-Videos könnte man ein eigenes Buch schreiben (und ich hoffe, es eines Tages in den Buchläden zu sehen). In den meisten professionellen Umgebungen werden Sie wahrscheinlich eine SWF-Datei verwenden, die als Behälter für mehrere FLV-Dateien dient. Wie das im Einzelnen funktioniert, hängt stark von den verwendeten Werkzeugen und Anforderungen ab.

Multimediadaten integrieren Wenn Sie sich im Web umschauen, werden Sie feststellen, dass jede größere Site ihre eigene Methode für das Einbetten von Multimedia-Inhalten besitzt. Bei YouTube sieht das Markup etwa so aus:

Vimeo verwendet das folgende Markup:

Und bei Odeo sieht das Ganze so aus:

Multimediadaten integrieren

|

201

In allen drei Beispielen wird ein embed-Element (das übrigens nicht Teil der HTML 4Spezifikation ist) in ein object-Element (das offiziell unterstützt wird) verschachtelt. Das geschieht, weil das object-Element neben param-Elementen auch Dinge enthalten kann, die geladen werden, wenn der Browser die mit object angegebenen Inhalte nicht darstellen kann. Idealerweise ist dies einfach ein Bild und ein kurzer erklärender Text. Wenn man Postels Gesetz anwendet (»Seien Sie konservativ beim Verschicken und liberal beim Empfangen«), gibt es allerdings keinen Grund, für diesen Zweck auch ein embed-Element zu verwenden.

Die Geschichte dreier Firmen In der Anfangszeit des Webs war der Browserhersteller Netscape besonders stark, während Microsoft und einige kleinere Firmen versuchten, den Anschluss nicht zu verpassen. Die Rolle von CSS in diesem Kampf um Marktanteile haben wir bereits im Abschnitt »Prioritäten der Hersteller« auf Seite 44 angesprochen. Einen ähnlichen Konflikt gab es bezüglich der Einbindung von Multimedia-Inhalten. Das Ergebnis war abzusehen: Auf dem Papier gewann Microsoft das Rennen, während der Vorschlag von Netscape (bzw. dessen Konsequenz, das embed-Element) für die nächsten Jahre als QuasiStandard galt. Erst seit kurzer Zeit gibt es ein vom W3C definiertes Element zum Einbinden multimedialer Inhalte: object. Die Browserunterstützung reichte aber kaum aus, um es tatsächlich browserübergreifend einsetzen zu können. Das Element embed bot für lange Zeit die einzige Möglichkeit, die Netscapes Rendering-Plattform für das Einbinden von Multimediadaten unterstützte. Darüber hinaus gab es zusätzliche Probleme mit der Firma Eolas. Diese Gesellschaft existiert ausschließlich, um geistiges Eigentum zu sammeln und dann gegen Zahlung von Lizenzgebühren weiterzugeben. 1999 wurde Microsoft erfolgreich von Eolas verklagt. Offenbar verletzte Microsofts Implementierung des object-Elements die Rechte von Eolas. Dieser Prozess machte die Sache noch komplizierter und zwang Microsoft, das Verhalten des Internet Explorers beim Laden von Multimediadaten zu ändern. Als Resultat ist Microsofts Unterstützung für die Elemente object und param sehr eng mit Microsofts eigener API verbunden. Entwickler, die den Windows Media Player zum Abspielen verwenden wollen, sollten sich daher bei Microsofts Wiederverkäufer-Programm anmelden, um auf die gesamte Dokumentation zugreifen zu können. Größere Firmen können sich diese Form der Unterstützung leicht leisten. Für freiberufliche Entwickler, die mit mehreren Plattformen arbeiten müssen, sind diese Kosten (die schnell Hunderte von US-Dollar erreichen können) oft zu hoch.

Flash als möglicher Ausweg Geht es um die Webkodierung von Audio- und Video-Inhalten (A/V) für Endbenutzer, treten die meisten Probleme bei der Kompression der Daten auf. Stellen Sie sich das Chaos vor, wenn es für jedes Betriebssystem ein eigenes Kompressionsformat für Bilder gäbe. Genau aus diesem Grund sind Videoinhalte so schwer zu implementieren. Es gibt genau

202

|

Kapitel 11: Bilder und Multimedia

ein A/V-Format, das von allen Systemen von Haus aus unterstützt wird: MPEG1. Zwar ist dieses Format recht beliebt, aber leider auch schon ziemlich alt und nicht besonders effizient. Für alle anderen Kodierungsformate ist eine spezielle Software nötig, zum Beispiel Adobe Flash. Der Vorteil ist, dass Flash außergewöhnlich weit verbreitet ist. Laut Adobe ist Flash auf ca. 99 % aller Desktop-Rechner installiert. Keine andere Software ist so weit verbreitet. Selbst Microsoft Windows (unabhängig von der Systemversion oder dem verwendeten Browser) hatte bei der Veröffentlichung dieses Buches »nur« einen Marktanteil von 90 bis 95 %. YouTube und andere Sites, die ihr Geld damit verdienen, benutzererzeugte A/V-Inhalte im Web bereitzustellen, haben gezeigt, dass Flash nicht nur funktioniert, sondern auch noch einfach zu benutzen ist. Dies begründet die vorherrschende Stellung, die Flash heutzutage bei den Abspielplattformen für Audio- und Video-Inhalte innehat. SWFObject (das ursprünglich von einem YouTube-Entwickler geschrieben wurde) bringt

Flash schmerzfrei in Ihre Webdokumente. Wie steht es aber mit anderen Programmen wie QuickTime oder dem Windows Media Player? Was machen Sie, wenn Sie keinen FlashContainer für Ihre Videoinhalte verwenden können? Wie können Plugin-Inhalte eingebettet werden, ohne hierfür ungültiges Markup schreiben zu müssen?

Multimedia-Inhalte mit reinem Markup einbinden Es ist schwierig, ganz ohne das embed-Element auszukommen, wenn man A/V-Inhalte in seinen Webdokumenten verwenden möchte. Tatsächlich hat aber schon jemand die nötigen Tests und Anpassungen durchgeführt. Dadurch ist es möglich, Plugin-Inhalte einzubinden und gültigen Markup-Code zu schreiben. Unser Wohltäter ist ein Gentleman namens Simon Jessey, der seit 2006 im DreamhostWiki eine Reihe getesteter und gültiger Beispiele für das Markup von object-Elementen pflegt. Zum Zeitpunkt der Veröffentlichung dieses Buches standen Beispiele für die folgenden Player-Plattformen zur Verfügung: • Flash • QuickTime • Windows Media Player Auf den ersten Blick scheint diese Liste recht kurz zu sein. Allerdings erreichen Sie mit diesen drei Abspielumgebungen fast die ganze Webbevölkerung. Die aktuelle Version von Jesseys Arbeit finden Sie unter http://wiki.dreamhost.com/Object_Embedding.

Probleme mit Stilen für Plugin-Inhalte Das Problem bei der Definition von Stilen für Plugin-Inhalte besteht darin, dass die Inhalte als modale Dialogfenster angezeigt werden. Das heißt, die Plugin-Instanz verhält sich weniger wie normaler Webinhalt, sondern eher wie ein »Fenster im Fenster«. Wenn Multimediadaten integrieren

|

203

Sie für die Darstellung von Plugin-Inhalten fortgeschrittene Layouttechniken verwenden wollen, sollten Sie vorher sicherstellen, dass die Inhalte keinesfalls andere Elemente, speziell select-Formularfelder, überdecken. Ansonsten kann es passieren, dass die übrigen Inhalte nicht mehr benutzbar oder sogar unsichtbar sind.

Plugin-Probleme mit dem HTTP-Header »Content-Disposition« umgehen Häufigt umgehen Websitebetreiber das Problem, indem sie die Besucher auffordern, über ein Kontextmenü das Speichern der Datei einzuleiten. In Internet Explorer heißt diese Option Ziel speichern als …, in Firefox ist es Ziel speichern unter… und in Safari heißt sie Verknüpfte Datei laden unter… Allerdings lassen sich Situationen wie diese auch ohne das Zutun der Benutzer handhaben. Wenn Sie Ihre Benutzer nicht belästigen wollen bzw. nicht mit Support-Anfragen überhäuft werden wollen, können Sie den Download-Dialog auch erzwingen, anstatt die Multimedia-Inhalte im Browserfenster darzustellen. Hierfür muss der Webserver so eingerichtet sein, dass die Datei mit einem entsprechenden HTTP-Header an den Browser geschickt wird. Details hierzu finden Sie im Anhang dieses Buches. Für eine Videodatei im AVI-Format könnte das zum Beispiel so aussehen: Content-Disposition: attachment; file=/video/entwickler.avi

Diese Art von Headern erzeugen Sie am besten mithilfe der HTTP-API einer serverseitigen Skriptsprache Ihrer Wahl. Als Ergebnis wird neben der Darstellung der Seite im Browser das Speichern der A/V-Datei (in unserem Beispiel entwickler.avi) eingeleitet. Entweder landet die Datei daraufhin im Download-Ordner (abhängig von den Benutzereinstellungen), oder es erscheint ein Sichern als-Dialog, in dem der Benutzer einen eigenen Speicherort angeben kann. Ein sehr beliebtes Beispiel für dieses Verhalten ist die Website von download.com. Mit sorgfältiger Planung können Sie den Rückgabewert einer XMLHttpRequest-Funktion verwenden, um dieses Verhalten auszulösen, ohne die Seite komplett neu laden zu müssen. Der wichtigste Schritt besteht auch hier darin, das korrekte Content-Disposition-Feld im HTTP-Header der Datei anzugeben.

Eine offene Haltung bewahren Trotz ihres offensichtlichen Werts gab es im Laufe der Geschichte des Webs viel Streit um die Veröffentlichung von multimedialen Inhalten. Das hat zum Großteil mit schlechten Designpraktiken bei deren Präsentation zu tun. Trotzdem scheinen die Auftraggeber und die Leute, die am Ende die Schecks unterschreiben, dieses Brimborium zu mögen. Der Webentwickler muss dafür sorgen, dass bei der Veröffentlichung von Multimedia-Inhalten in Bezug auf Benutzbarkeit, Ressourcenkosten, Produktionswerte und Vorwärtskompatibilität die nötigen Standards eingehalten werden.

204

|

Kapitel 11: Bilder und Multimedia

Die Elemente »video« und »audio« (HTML 5) Durch die HTML 5-Elemente video und audio werden audiovisuelle Inhalte endlich auch zu Webbürgern erster Klasse. Das bedeutet: • Video- und Audioinhalte können damit so einfach in Webdokumente integriert werden wie Text, Hyperlinks und Bilder. • Die Elemente video und audio können mit anderen Kerntechnologien des Webs gemeinsam verwendet werden, zum Beispiel durch die Definition von SVG-Filtern oder CSS-Stilen für Videoinhalte. Die Elemente video und audio helfen beim Erreichen dieser Ziele, indem Video- und Audio-Inhalte direkt in die Webdokumente eingebettet werden, ohne dass hierfür Plugins nötig wären. Die dazugehörige HTMLMediaElement-API erlaubt die Manipulation von Audio- und Video-Inhalten mithilfe von DOM-Skripting, genau wie bei anderen erstklassigen Webinhalten auch.

Videos einbetten Im folgenden Beispiel wird gezeigt, wie Sie ein Video in ein HTML 5-Dokument einbetten können, inklusive der nötigen Steuerungselemente:

In diesem Beispiel funktioniert das src-Attribut analog zum img-Element: Der Wert ist der URI, unter dem die einzubettende Videodatei zu finden ist. Das Attribut controls sorgt dafür, dass der Browser automatisch die zum Abspielen nötigen Steuerungselemente (Abspielen, Pause, Stopp, Lautstärke, Vollbildmodus etc.) einblendet. Dies sind im Prinzip die gleichen Steuerungselemente wie bei einem Plugin. Beim video-Element werden diese Dinge jedoch direkt vom Browser erledigt.

Unterstützung für alternative Videoformate Als besonders aufmerksamer Leser haben Sie gemerkt, dass wir im vorigen Beispiel eine Videodatei namens papagei.foo verwendet haben. Die Dateiendung .foo steht hierbei für ein beliebiges Standard-Videoformat, das von allen aktuellen Browsern unterstützt wird. In der Realität gibt es jedoch kein allgemein gültiges Videoformat, mit dem das videoElement in aktuellen Browsern funktioniert. Firefox bevorzugt Theora-kodierte Ogg Vorbis-Dateien, während sich Safari sehr wahrscheinlich auf H.264-kodierte MP4-Dateien festlegt. Im Moment versuchen die Browserhersteller, sich auf ein Standard-Videoformat zu einigen. Bis ein Konsens erreicht ist, kann allerdings noch einige Zeit vergehen. Wenn Sie Ihre Videos möglichst vielen Benutzern zugänglich machen wollen, kommen Sie also nicht umhin, sie in unterschiedlichen Kodierungsformaten vorzuhalten. Hierbei wird die Quelldatei nicht über das src-Attribut, sondern mit eigenen source-Elementen angegeben, die als Inhalt des video-Elements definiert werden, wie hier gezeigt:

Multimediadaten integrieren

|

205



In diesem Fall durchläuft der Browser die Liste, bis er ein Videoformat findet, das er abspielen kann.

Rückwärtskompatibilität mit Browsern, die das »video«-Element nicht unterstützen Auch wenn Sie sich für die Verwendung des video-Elements entscheiden, sollten Sie ältere Browser nicht vergessen, die dieses Element nicht unterstützen. Eine Möglichkeit besteht darin, ein object-Element zu verwenden, dass den Inhalt bei Bedarf über ein DrittanbieterPlugin bereitstellt, wie im folgenden Beispiel:

Benutzer, die kein Flash-Plugin installiert oder es deaktiviert haben, werden den per object eingebundenen Inhalt aber trotzdem nicht sehen können.

Das »canvas«-Element (HTML 5) Bei einer Einführung in HTML 5 darf das Element canvas auf keinen Fall fehlen. Bei dem Element canvas handelt es sich im Prinzip um eine Art dynamisches img-Element. Der canvas beschreibt einen bestimmten Bereich der Seite, in dem Sie dynamische (soll heißen: über ein Skript oder Programm erzeugte und gesteuerte) Bilder oder Animationen anzeigen können. canvas kann beispielsweise verwendet werden, um dynamische Diagramme zu erzeugen oder direkt im Browser Mal- und Zeichenprogramme (oder sogar Textverarbeitungen) oder Spiele zu realisieren. Im Prinzip können Sie mit canvas also die Dinge tun, die bisher nur mit Browser-Plugins wie Flash möglich waren.

Die »CanvasRenderingContext2D«-API Man kann sich das canvas-Element auch als Teil einer zweidimensionalen Zeichenfläche vorstellen, die ihre eigene Programmierschnittstelle mitbringt. Ohne diese API mit dem langen Namen CanvasRenderingContext2D wäre das canvas-Element ziemlich nutzlos. Vergleichen Sie das mit weniger interaktiven Elementen, die ebenfalls neu in HTML 5 sind, wie z.B. video, aber auch ohne zusätzliche API-Skripte funktionieren. Das canvasElement erwacht aber tatsächlich erst dann zum Leben, wenn Sie es zusammen mit der CanvasRenderingContext2D-API verwenden.

206

|

Kapitel 11: Bilder und Multimedia

Wenn Sie Inhalte für das canvas-Element entwickeln wollen, verwenden Sie die CanvasRenderingContext2D-API zusammen mit JavaScript. Eine eingehende Beschreibung würde den Rahmen dieses Buches leider sprengen. Das canvas-Element ist also kein gewöhnliches Markup-Element, sondern eher ein »Hook«, an dem Sie eigene Programme »aufhängen« können. Das Web ist voll mit Beispielen für die Verwendung von canvas. In Painting the Web ist diesem Thema ein eigenes Kapitel gewidmet.

SVG als Alternative zu »canvas« Wenn Sie nicht schon ein erfahrener JavaScript-Programmierer sind, ist canvas für Sie vermutlich nicht so gut geeignet, um Animationen und interaktive Bilder als Teil Ihrer Webinhalte umzusetzen. Vielleicht sollten Sie stattdessen einen Blick auf SVG (Scalable Vector Graphics) werfen. Wenn Sie hauptsächlich mit der Erstellung oder dem Design von Markup zu tun haben, wird Ihnen die deklarative Programmierung von SVG vermutlich besser liegen. Der Programmieransatz von SVG ist viel näher an CSS als am imperativen Vorgehen bei der Programmierung für canvas.

Multimediadaten integrieren

|

207

KAPITEL 12

Web-Typografie

Manche Bereiche von CSS sind schwer zu lernen, besonders der Umgang mit der Eigenschaft float. Dafür gibt es andere Bereiche, bei denen sich die investierte Lernzeit schnell wieder auszahlt, zum Beispiel die Eigenschaften zur Gestaltung von Texten und Buchstaben. Das folgende Material erhebt keinen Anspruch auf Vollständigkeit. Eine vollständige Übersicht über die CSS-Eigenschaften und -Werte finden Sie auf der Website zu diesem Buch (http://www.htmlcssgoodparts.net). Die folgenden O’Reilly-Bücher (beide geschrieben von Eric Meyer) können ebenfalls hilfreich sein: • CSS: Das umfassende Handbuch (http://www.oreilly.de/catalog/csstdg3 ger/index.html) • CSS kurz & gut (http://www.oreilly.de/catalog/csspr3ger/index.html)

Dieses Kapitel beginnt mit einer Einführung in die westeuropäische Druckkunst. Das soll Ihnen helfen zu verstehen, warum uneingeweihte Akteure oftmals unrealistische Erwartungen an die Darstellungsfähigkeiten des Webs haben.

Eine kurze Geschichte der Schrift In der heutigen Zeit, in der nur die ärmsten und isoliertesten Menschen nicht lesen können, wird oft vorausgesetzt, dass dies auch auf das Schreiben zutrifft. Tatsächlich haben sich die verschiedenen Schriftsysteme seit 5.000 Jahren permanent weiterentwickelt und dabei viele Veränderungen durchgemacht. Die Geschichte des Schreibens und der Druckkunst lehrt Kontrolle. Die Fähigkeit von Künstlern und Designern, das Aussehen einer gedruckten Seite in allen Aspekten steuern zu können, hat eine teilweise Jahrhunderte alte Tradition. Davon ist das Web jedoch noch weit entfernt. Trotz einiger interessanter Ansätze sind die typografischen Möglichkeiten noch sehr eingeschränkt. Die Verwendung von Adobe Flash kann diese Einschränkungen teilweise verringern, schafft aber neue Hindernisse. Bisher gibt es keine Technologie, die die Vielzahl an verschiedenen Benutzerumgebungen ausgleichen könnte.

|

209

Wenn man betrachtet, welchen Einfluss korrekt ausgebildete Grafikdesigner auf das Web haben, ist es hilfreich zu sehen, wie sich ihre Arbeit entwickelt hat – besonders im Bezug auf die Typografie.

Die Herkunft moderner westlicher Buchstabenformen Schon die ältesten Zivilisationen der Welt haben eigene Schriftsysteme entwickelt, um Ereignisse für die Nachwelt zu bewahren, sprich: um das Erinnerungsvermögen zu erhöhen. In dieser Diskussion der Geschichte der Druckkunst werden die asiatischen Beiträge nicht weiter betrachtet. Die Gründe sind das Fehlen englischsprachiger Informationsquellen von ausreichender Qualität, Unkenntnis seitens des Autors und die Tatsache, dass der Druck in industriellem Maßstab in erster Linie eine europäische Erfindung war.

Die heute verwendeten westlichen Alphabete lassen sich auf die Verbreitung ägyptischer Hieroglyphen in der Levante (östlicher Mittelmeerraum) vor ungefähr 3.500 Jahren zurückführen. Diese Verbreitung führte zum phönizischen Alphabet, das wiederum die Grundlage für das griechische Alphabet bildet. Das griechische Alphabet ist seinerseits ein Vorläufer der heutigen lateinischen und kyrillischen Schrift. Die Form des klassischen lateinischen Alphabets, wie es in zahllosen römischen Monumenten zu sehen ist, ist eine Untermenge der modernen Druckmajuskel (Großbuchstaben), während die späteren Minuskeln (Kleinbuchstaben) im Mittelalter aus der römischen Kursivschrift entstanden. Bis Johannes Gutenberg die Druckerpresse erfand, wurde fast ausschließlich von Hand geschrieben, z.B. um Aufzeichnungen vorzunehmen und zu kopieren.

Gutenbergs Druckerpresse und die Kunst der Typografie Gutenbergs Konstruktion der ersten mechanischen Druckerpresse, die bewegliche Buchstaben aus gegossenem Metall verwendete, veränderte die Ökonomie des Publizierens und führte direkt zur Typografie: der Gestaltung von Buchstabenformen für bestimmte Zwecke und Arten der Vervielfältigung. Die Formen variierten meist mit dem Geschmack der Künstler und belesenen Leute. Einer der vielen Vorteile der gegossenen Drucktypen bestand in einer nie gekannten Konsistenz im Aussehen der Druckprodukte – eine Konsistenz, die heute als selbstverständlich gilt. Druckerpressen, Papiere und Buchbinderei wurden seit Gutenbergs Erfindung beständig weiterentwickelt. Die größten Innovationen in der Typografie fanden erst im letzten Viertel des 19. Jahrhunderts statt. Bis dahin gab es nur wenig Unterschiede zum Schriftsatz zu Gutenbergs Zeiten. Mit der Einführung des Bleisatzes begann die Innovation, Fahrt aufzunehmen. Hierbei werden die Lettern maschinell zeilenweise aus geschmolzenen Bleibarren hergestellt und 210

|

Kapitel 12: Web-Typografie

dann auf der Arbeitsfläche der Druckerpresse angeordnet. Der englische Begriff »leading« (deutsch: »Durchschuss«) ist direkt vergleichbar mit der CSS-Eigenschaft line-height. Er wird auch heute noch in der Druckvorstufe verwendet und hat seinen Ursprung in der Praxis, zwischen den frisch gesetzten Druckzeilen Streifen kalten Bleis einzufügen, um Leerraum zu schaffen – eine Praxis, die noch aus früheren Jahrhunderten stammt. In der zweiten Hälfte des 20. Jahrhunderts wurde dann der Fotosatz eingeführt, bei dem lichtempfindliche Filme zur Herstellung von Druckplatten verwendet wurden. Dies war eine große Erneuerung der Lithographie, die Drucker seit Jahrhunderten verwendeten.

Das Aufkommen des Digitalsatzes Nach der Erfindung des Laserdruckers dauerte es nur wenige Jahre, bis ein brauchbarer computergestützter Satz möglich war. Kurz darauf folgten bezahlbare Computer, auf denen die ersten Schriftsatz-Programme liefen. Das letzte Stück des digitalen Typo-Puzzles waren bezahlbare Laserdrucker und benutzerfreundliche Textverarbeitungsprogramme mit grafischen Oberflächen, auf die wenige Jahre später die ersten ausgewachsenen Desktop-Publishing-Produkte folgten. Innerhalb von 20 Jahren hat sich aus dem einspaltigen Kaltsatz der Digitalsatz entwickelt. Anstatt die Buchstaben von Hand aus dem Setzkasten in das Druckbild einzufügen, stehen heute gleich mehrere Programme zur Verfügung, mit denen man ganze Seitenlayouts inklusive Grafiken am Computer erstellen kann. Anfang der Neunzigerjahre waren Computer und Drucker dann so weit, dass sie nicht nur belichtungsfähigen Schriftsatz, sondern auch belichtungsfähige Grafiken erstellen konnten. Im aktuellen Offsetdruck werden diese digital gesetzten Layouts direkt auf einen sogenannten Plattenbelichter übertragen, der aus den exportierten Rasterdaten Druckplatten erstellt. Weniger oft wurden Layouts mit dem Laserdrucker ausgegeben, fotografiert und dann als Fotonegativ manuell in den Plattenbelichter eingegeben. Die Weichen für die heutige digitale Typografie wurden 1991 gestellt, als das TrueTypeFormat für die Benutzung in Microsoft Windows lizenziert wurde. Mittlerweile kommt neben TrueType auch das Format OpenType zum Einsatz, wobei der Unterschied zwischen beiden, bezogen auf das Webdesign, nur minimal ist.

Verschiedene Beschränkungen, aber keine veränderten Erwartungen Jahrhundertelang waren Schriftsatz und Druck begreifbare Verfahren. Während dieser Zeit lagen die Beschränkungen im Design hauptsächlich in den Werkzeugen und weniger im Medium selbst. Mit der Entwicklung der Webbrowser wird dieses Paradigma quasi auf den Kopf gestellt. Das Medium sorgt für fast alle Einschränkungen, während die Grenze für erfahrene Entwickler allein in der eigenen Vorstellungskraft liegt.

Eine kurze Geschichte der Schrift

|

211

Ein kurzes Glossar der Typografie In Abbildung 12-1 sehen Sie eine Reihe von Fachbegriffen, die verschiedene Bestandteile und Formen von Schrift sowie das Erscheinungsbild einzelner Buchstaben beschreiben. x-Höhe

Endstrich

Anstrich

Unterlänge

Grundlinie

Oberlänge

Hauptstrich

Glyphe

Zeichen

Abbildung 12-1: Typoygrafische Begriffe für Buchstabenformen

Gestalter von Websites sollten zudem noch eine Reihe weiterer Fachbegriffe kennen: Buchstabenabstand Der zwischen zwei Glyphen eingefügte Leerraum innerhalb einer Textpassage. Wird gesteuert mit der CSS-Eigenschaft letter-spacing (teilweise auch per word-spacing). Diakritische Zeichen Diakritische Zeichen sind Zusatzzeichen, die im Grunde nicht zum Buchstaben gehören, aber eine andere Aussprache signalisieren können. Häufige Beispiele sind der Akut-Akzent (´, z.B. in générale), Umlaute (¨, z.B. in Klönschnack), die Cedille (z.B. in »Ça va?«), gelegentlich auch der Schrägstrich (z.B. in »Smørgåsbrød«). Dingbats (Zierschrift) Zeichensammlung (üblicherweise als eigener Zeichensatz), die nicht aus normalen orthografischen Zeichen, sondern z.B. aus Ornamenten oder Symbolen besteht (Musiknoten, Schaltungssymbole etc.). Durchschuss Wie bereits beschrieben, bezeichnet der Durchschuss den vertikalen Raum zwischen zwei Textzeilen. Dies ist verwandt (aber nicht identisch) mit der CSS-Eigenschaft line-height. Festbreitenschrift (Mono) Eine Schrift, bei der all Buchstaben die gleiche Breite haben, wie z.B. Courier. Es wird kein Schriftweitenausgleich vorgenommen. Gebrochene Schrift (Blackletter) Ein typografischer Stil, der von den deutschen Handschriften des Spätmittelalters inspiriert wurde. Ein Beispiel für eine gebrochene Schrift ist die Fraktur. Glyphe Die grafische Darstellung eines Buchstabens, eines Silbenzeichens, einer Ligatur (z.B. fl und ff) oder eines Buchstabenteils.

212

|

Kapitel 12: Web-Typografie

Groß-/Kleinbuchstaben (Upper-/Lowercase) Synonym mit Majuskeln/Minuskeln, manchmal auch als Versal/Gemeine bezeichnet. Groteske (Gothic) Üblicherweise synonym mit serifenlos. (Nicht zu verwechseln mit »gotischen«, also schmalfetten, gebrochenen, mittelalterlichen Schreibschriften, wie z.B. Fraktur). Kursiv (Italic) Ein Schriftschnitt, der durch das Hinzufügen kalligraphischer Akzente aus der entsprechenden aufrechten Urschrift entwickelt wurde. Der übliche Neigungswinkel beträgt i.d.R. 5 bis 10 nach rechts (vgl. oblique). Leerraum Beliebiger Raum auf der Seite oder Zeichenfläche, der nicht mit Schrift, Illustrationen oder Trennlinien ausgefüllt ist. Der englische Begriff »whitespace« steht einerseits für diesen Leerraum, aber auch für den Computerbegriff »Whitespace-Zeichen« (z.B. Leerzeichen, Tabulator etc.). Oblique (Geneigte Schrift) Oft fälschlicherweise mit »kursiv« gleichgesetzt. Tatsächlich handelt es sich um die Urschrift (Roman), die künstlich schräggestellt wurde. Orthografie Rechtschreibung. Regeln zur korrekten Schreibweise von Wörtern. Roman Bezeichnet die Urschrift eines Zeichensatzes (Fonts), z.B. Times New Roman. Von dieser können andere Schriftschnitte abgeleitet sein, etwa kursive Varianten. Schreibschrift (Script) Eine Klasse von Schriften, die entwickelt wurde, um Handschriften nachzuempfinden. Schriftgewicht Kennzeichnet im Allgemeinen die Linienstärke (»Fette«) einer Schrift. Wird mit der CSS-Eigenschaft font-weight gesteuert. Übliche Schriftgewichte im Druck reichen von »Ultraleicht« (Haarlinie, geringstes Schriftgewicht) bis zu »Ultrafett«. Normaler Text erhält i.d.R. das Schriftgewicht »Mittel« (Medium, Book), muss aber nicht extra definiert werden. Die Abbildungen 12-2 und 12-3 zeigen verschiedene Schriften in unterschiedlichen Gewichtungen. In Abbildung 12-2 sehen Sie die Microsoft-Standardschriften (»Core Fonts«) für das Web, während Abbildung 12-3 die Standardschriften für Safari 4/Firefox 3.5 am Mac bzw. Firefox 3.5 unter Windows zeigt. Schriftweitenausgleich (Kerning) Automatischer Ausgleich der Schriftweite, entweder durch Unterschneidung (Verringerung des Buchstabenabstands) oder auch durch Spationierung (Erweiterung des Abstands), z.B. bei Buchstabenpaaren wie fl, Fe, We, ff oder Te. Ohne diesen Ausgleich erscheinen diese Buchstaben ungewöhnlich weit voneinander entfernt. Bei manchen Kombinationen aus Betriebssystem, Software und Schrift muss die Schriftweite für Ein kurzes Glossar der Typografie

|

213

Rasterschriften hoher Qualität manuell angepasst werden. In diesem Fall spricht man von »Ausgleichen«. Schmalschrift (Condensed) Stil einer Schrift, die sich von anderen Schriften durch ihre schmale Natur und eng beieinander stehende Buchstaben unterscheidet. Das Gegenteil von Breitschrift. Serifenlose Schrift Eine Klasse von Schriften, die durch offensichtliche geometrische Formen, Strichführung mit gleicher Dicke und das Fehlen von Verzierungen (Serifen) an den Linienenden gekennzeichnet ist. Serifenschrift Das Hauptmerkmal einer Serifenschrift sind eben die sogenannten Serifen, Verzierungen an den Linienenden, wie beispielsweise bei der Times. Spationierte Schrift (Extended) Das Gegenstück zur Schmalschrift. Die Buchstaben sind breiter als bei normalen Schriften, der Buchstabenabstand ist meist etwas weiter. Auch als breitlaufende Schrift bezeichnet. Steg (Gutter) Im Druck der unbedruckte Bereich zwischen dem Satzspiegel und dem Rand. Im Web auch der Leerraum zwischen dem Text und einer möglichen Trennlinie bzw. zwischen zwei Spalten oder zwei Textpassagen. Der Steg wird in vielen Fällen über die CSS-Eigenschaft padding gesteuert. Text Allgemeiner Begriff für das Arbeitsprodukt eines Texters. Textausrichtung Bezieht sich auf die Längsachse, an der sich der Text orientiert. Bei linksbündig ausgerichteten Texten beginnen die Zeilen alle an einer gemeinsamen linken Achse; bei rechtsbündig ausgerichteten Texten entsprechend rechts. Beim Blocksatz haben alle Zeilen bis auf die letzte eine gemeinsame linke und rechte Achse. Dieser Teil des Layouts wird über die CSS-Eigenschaft text-align gesteuert. Trennlinie (Rule) Eine Linie, die auf einer Seite eines Textblocks eingefügt wird. Üblicherweise über die CSS-Eigenschaft border gesteuert. Die Nomenklatur für die Zeichenkodierung sowie die Eigenschaften zur Textgestaltung werden weiter hinten in diesem Kapitel besprochen.

214

|

Kapitel 12: Web-Typografie

Abbildung 12-2: Normalerweise verfügbare Microsoft-Standardschriften für das Web

Mac: Safari 4 and Firefox 3.5

Windows: Firefox 3.5

Times

Times New Roman

Helvetica

Arial

Courier

Courier New

Apple Chancery

ComicSans MS

Papyrus Abbildung 12-3: Standardschriften in verschiedenen Browsern für die »font-family«-Schlüsselwörter »serif«, »sans-serif«, »monospace«, »cursive« und »fantasy«.

Schriftenglättung: Aliasing und Anti-Aliasing Die gute Nachricht zuerst: Jahrhundertelang war die Typografie ein Garant hoher ästhetischer Standards. Die schlechte Nachricht ist, dass während dieser Zeit niemand daran dachte, dass Schriften einmal als Pixel in elektronischen Medien angezeigt werden müssten. Schriftenglättung: Aliasing und Anti-Aliasing

|

215

Dadurch machen die meisten traditionellen Schriften auf dem Bildschirm eine ziemlich schlechte Figur, wie in Abbildung 12-4 zu sehen ist.

Abbildung 12-4: Schriftglättung am Beispiel der Helvetica (12 Punkt/16 Pixel): (1) das Original in einem Pixelgitter, (2) nicht geglättet, (3) Schriftglättung unter Mac OS X und (4) Schriftglättung in Clear Type/Windows Vista

Das Aliasing versucht, sich den Linien von Buchstaben anzunähern. Das führt zu deutlich sichtbaren »Stufen« in der Darstellung. Aus diesem Grund sehen Schriften, in deren Design das Aliasing nicht berücksichtigt wurde, am Bildschirm oft anders aus als ihr gedrucktes Gegenstück – meistens hässlicher. Dieser Effekt wird noch dadurch verstärkt, dass das menschliche Auge besonders auf Helligkeitsunterschiede reagiert. Anti-Aliasing versucht, die Probleme der Schriftdarstellung auf dem Bildschirm durch Kantenglättung zu beheben, wie in Abbildung 12-4 zu sehen ist. Hierfür erzeugen die Anti-Aliasing-Algorithmen Bereiche zwischen den »Stufen«, in denen Vorder- und Hintergrund nach und nach interpoliert werden. Hierdurch wird der tatsächliche Kontrast verringert, und die Schrift erscheint für den Bildschirm optimiert. Im Gegensatz zu modernen Laserdruckern, die mit Auflösungen von 600 Pixeln und mehr arbeiten, ist die Auflösung auch auf modernen Monitoren verschwindend gering. Dies 216

|

Kapitel 12: Web-Typografie

führt gerade bei geringen Schriftgrößen zu Problemen, denen mit der Bildschirmoptimierung (engl. »hinting«) begegnet werden soll. Hierbei enthält die Schriftdatei Hinweise darauf, wie die Pixeltreppen ausgeglichen werden können. Der größte Nachteil des Anti-Aliasings besteht darin, dass gerade kleine Schriften schnell unlesbar werden. So wie ein verkleinertes Bild leicht verschwommen erscheint, erscheinen Bereiche mit kleiner Schrift schnell nur noch als kontrastreiche Bereiche, wie in Abbildung 12-5 gezeigt wird.

Abbildung 12-5: Das Ergebnis einer geringen Schriftgröße, um ihre Aufösung bei der Bildschirmdarstellung herabzusetzen. Wird das Anti-Aliasing auf so kleine Schriften angewendet, sind die Ergebnisse oft nicht mehr lesbar. Oft sehen für den Bildschirm optimierte Schriften bei kleineren Schriftgrößen besser aus als bei hohen. Da die meisten Texte mit einer durchschnittlichen Größe von 12pt/16 Pixel angezeigt werden, erscheinen viele Schriften bei dieser Einstellung auch am lesbarsten. Daher sind bildschirmoptimierte Schriften meist auch nicht so komplex gestaltet wie ihre Verwandten für den Druck. Andererseits erscheinen bildschirmoptimierte Schriften bei hohen Darstellungsgrößen oft deutlich schlichter als ihre traditionellen Gegenparts. Deshalb ziehen Designer oft grafische Überschriften in traditionellen Schriften den vom Webbrowser unterstützten Fonts vor. Die Details der Schriften aus dem Druckbereich werden bei hohen Größen erhalten (oder sogar verstärkt). Dadurch erscheinen sie attraktiver als ihre bildschirmoptimierten Kollegen.

Schriftenglättung: Aliasing und Anti-Aliasing

|

217

Schriftstile, Lesbarkeit und Erkennbarkeit Bei der Layoutentwicklung wird die Wahl der verwendeten Schriften von zwei sich ergänzenden Ideen bestimmt: Lesbarkeit und Erkennbarkeit des Schrift. Die Lesbarkeit bestimmt, wie gut größere Textmengen lesbar sind. Die Erkennbarkeit bezieht sich darauf, wie leicht bestimmte Daten, Wörter und kurze Sätze beim Überfliegen des Textes erkannt werden.

Stildefinitionen zum Erhöhen der Lesbarkeit Wenn wir uns ein typisches Buch vorstellen, haben wir bereits eine ziemlich genaue Idee davon, was Lesbarkeit ausmacht: • Serifenschrift • 12–15 Wörter pro Zeile • Blocksatz • Moderate, konsistente Buchstabenabstände Besonders bei teureren Publikationen findet man des Öfteren höhere Zeilenabstände (20 % der Schrifthöhe oder mehr) und detailliertere Fonts, um Zeilen, Buchstaben und andere Teile der Seite leichter entziffern zu können. Bei billigeren Produkten ist die Gewinnspanne oft so niedrig, dass um jeden Preis Kosten gespart werden müssen. Das heißt: schlechteres und weniger starkes Papier, mehr Zeilen, weniger Leerraum. Dazu werden Fonts mit weniger Details verwendet, die auch bei schlechten Papieren nicht zum »Ausfransen« von Buchstaben führen. Im Web spielen Papierkosten keine Rolle. Wir können also das komplette Arsenal verfügbarer Werkzeuge aufbieten, um die Lesbarkeit zu erhöhen. Für die Bildschirmdarstellung könnte das Resultat etwa so aussehen: #haupttext p { width: 50em; font-family: Georgia,’Times New Roman’, serif; font-size: 14px; line-height: 17px; text-align: justify; }

Allerdings gibt es bei der Bildschirmdarstellung andere Probleme, die bei Büchern nicht auftreten. Zu diesen Problemen gehört beispielsweise das Scrollen von Inhalt. Die im Web übliche linksbündige Darstellung erleichtert das Lesen von Text, der im Browserfenster auf- und abbewegt wird.

Stildefinitionen zum Erhöhen der Erkennbarkeit Während die Lesbarkeit besonders bei langen Textpassagen eine Rolle spielt, hat die Erkennbarkeit bei Überschriften, Daten oder kurzen Textabschnitten Vorrang. Infografi-

218

|

Kapitel 12: Web-Typografie

ken und Tabellen in Zeitungen sind hierfür ein ausgezeichnetes Beispiel. Hierbei kommen nicht selten die folgenden Prinzipien zur Anwendung: • serifenlose Schriften • hohe Schriftgrößen für Überschriften, kleinere für Daten • strikte Orientierung am Layoutraster • häufige Verwendung von Trennlinien zwischen Text und Daten (vertikal und horizontal) • farbige Unterscheidung von Zeilen (seltener auch Spalten) • Nebeneinanderliegende Spalten mit zusammengehörigen Inhalten werden an einer gemeinsamen Achse ausgerichtet (z.B. Spalte 1: Straße, rechtsbündig; Spalte 2: Hausnummer, linksbündig). In den Kapiteln 10 und 13 finden Sie eine Reihe von Empfehlungen, wie Sie die Erkennbarkeit von Tabellen- und Formularinhalten erhöhen können. Bei der Arbeit mit Schreibsystemen, die von links nach rechts gelesen werden (wie die europäischen Sprachen), ist der Text meist am besten erkennbar, wenn er linksbündig ausgerichtet wird. Haben die Zeilen deutlich unterschiedliche Längen, kann es sinnvoll sein, Zeilenumbrüche mithilfe der Eigenschaft white-space manuell vorzunehmen (in Kürze mehr dazu), den Text rechtsbündig auszurichten oder beide Lösungen gemeinsam zu verwenden.

Der »Knick« und kleine Schriften Stellen Sie sich eine in der Mitte gefaltete Zeitung vor, die mit der Titelseite dem Käufer zugewandt an einem Zeitungsstand ausliegt. Für die erforderliche Sichtbarkeit von Überschriften und Inhalten sind sorgfältige Layoutentscheidungen nötig – schließlich kommt den Geschichten »über dem Knick« besondere Bedeutung zu. Im Browserfenster entspricht dies dem Bereich, der ohne zu scrollen sichtbar ist. Dies ist oft nur ein kleiner Teil des tatsächlichen Seiteninhalts (siehe Abbildung 12-6). Viele Leute betrachten den Bereich »über dem Knick« als den wertvollsten Teil einer Webseite. Daher ist die Versuchung groß, ihn mit möglichst viel Inhalt vollzupacken. Je mehr Inhalt sich »über dem Knick« befindet, desto größer ist die Chance, den Besucher auf der Website zu halten – oder? Dies ist aus folgenden Gründen ein Trugschluss: Zu viel Inhalt schreckt Besucher, die nach bestimmten Inhalten suchen, eher ab. Das »Über dem Knick«-Modell geht davon aus, dass der typische Benutzer die Seite lieber verlässt, als sie zu scrollen. Das führt manchmal zu extremen Auswüchsen. So wird versucht, die Darstellung von Scrollbalken komplett zu verhindern. Tatsächlich ist das Scrollen ein Zeichen für die Motivation des Besuchers. Oft ist es leichter, eine Seite zu scrollen, als die sprichwörtliche Nadel in dem »Heuhaufen« einer bis zum Rand vollgepackten Webseite zu finden. Schriftstile, Lesbarkeit und Erkennbarkeit

|

219

Abbildung 12-6: Ein Browserfenster mit einer Größe von 1920 × 1080 Pixeln. Die Rahmen kennzeichnen jeweils den Bereich »über dem Knick« bei verschiedenen Auflösungen.

Zu viel Inhalt erschwert das Unterscheiden von Inhalten. Bei so vielen Dingen lässt sich der Inhalt oft nur noch anhand der verwendeten Farben unterscheiden. Der Anspruch, alles Wichtige »über dem Knick« darzustellen, führt schnell zur Verwendung gleich stark gesättigter Farben. Dadurch wird die Website mit Sicherheit nicht schöner. Die Verwendung geringer Schriftgrößen, um mehr Inhalt »über dem Knick« unterzubringen, macht die Seiten für Benutzer mit Sehproblemen unbenutzbar. Um diese These zu bestätigen, brauchen Sie nicht einmal online zu gehen. Versuchen Sie einfach, die erste Seite Ihres Handy-Vertrags zu lesen. Dann überlegen Sie, ob eine solche Bleiwüste für Ihre Website eine gute Idee ist. Die Vielfalt an Bildschirmauflösungen hat zur Folge, dass »über dem Knick« für andere Benutzer bereits »unter dem Knick« bedeutet. Für Benutzer mit hohen Bildschirmauflösungen hat der Versuch, den Bereich »über dem Knick« zu betonen, oft zur Folge, dass das Browserfenster zu großen Teilen leer bleibt. Daher gilt: Verkleinerte Schrift sollte keinesfalls als Designmittel verwendet werden, außer vielleicht aus ästhetischen Gründen, die für den größten Teil Ihres Publikums nachvollziehbar sind. Winzige Buchstaben sind weder cool noch hilfreich, außer in seltenen Sonderfällen. Natürlich sollte der Inhalt trotzdem in der Reihenfolge seiner Wichtigkeit präsentiert werden. Hierbei können die verschiedenen Zeilen eines Layoutrasters ebenfalls helfen.

220

|

Kapitel 12: Web-Typografie

Schriftgrößen angeben Wenn sich Designer für etwas begeistern können, so ist es die Kontrolle über die Gestaltung von Schriften. Hierfür ist CSS wunderbar geeignet. Ist eine Schrift im Browser des Benutzers darstellbar, kann ihre Präsentation in weiten Teilen vom Gestalter bestimmt werden. Dies gilt besonders für die Schriftgröße, für die ein paar einfache Regeln gelten: • Designer aus dem Printbereich übersehen leicht, dass der Benutzer sehr großen Einfluss auf die Schriftgröße nehmen kann. Aus diesem Grund ist es meistens am besten, die Ausgangsschriftgröße für das body-Elemet in Pixeln anzugeben, wie hier: body { font-size: 14px; ... }

Danach können Sie die Schriftgrößen im Verlauf der Kaskade mit em-Einheiten oder Prozentwerten steuern (die sich in der Funktionsweise kaum unterscheiden). Erwarten Sie überdurchschnittlich viele Benutzer des IE 6, kann es zu Problemen mit der Usability kommen. Im IE 6 hat der Benutzer keine Möglichkeit, in Pixeln angegebene Schriften zu vergrößern oder zu verkleinern. • Browser berechnen die Schriftgröße von Überschriften anhand der angegebenen Grundschriftgröße. Um auf spätere Änderungen am Layout vorbereitet zu sein, sollten Sie beim Zurücksetzen der Überschriften ähnlich vorgehen. Wollen Sie grafische Überschriften einsetzen, kann es nötig werden, die Regeln für die Bildersetzung um die Eigenschaft background-position zu erweitern. • Brauchen Sie absolute Kontrolle über die Größe eines Elements, sollten Sie dessen Inhalt als Bild definieren und den eigentlichen Text im alt-Attribut angeben. Diese Situation sollte jedoch nach Möglichkeit vermieden werden. Manchmal geht es aber nicht anders. • Vermeiden Sie es, die Werte für line-height in Pixeln anzugeben. Ansonsten müssen Sie diese Angabe für jedes Vorkommen von font-size wiederholen. Die Werte für die Größe von Überschriften werden von der Kaskade automatisch gehandhabt, so auch die Werte für line-height. Wenn Sie line-height für Ihren Haupttext in Pixeln definieren, wird die gleiche Zeilenhöhe auch bei höheren Schriftgrößen verwendet, was Ihre Text schnell unlesbar macht.

Die richtigen Längeneinheiten für Schriftgrößen Bei der Gestaltung von Schriften für die Browserdarstellung können Sie eine von vier Längenangaben verwenden: Pixel, em-Einheiten, Prozentwerte oder Schlüsselwörter. (Darüber hinaus gibt es noch verschiedene weitere Längeneinheiten, die in der Praxis aber kaum verwendet werden.) • Pixel (px) sind im Prinzip absolute Längeneinheiten. Wird die Schriftgröße in Pixeln angegeben, wird der Text unabhängig von den Benutzereinstellungen oder seiner Position in der Kaskade in allen Umgebungen gleich groß ausgegeben. Bei der Verwendung von Pixeln können jedoch zwei Probleme auftreten. Die Schriftgröße im Internet Explorer 6 kann in diesem Fall nicht vom Benutzer verändert werden. In Schriftgrößen angeben

|

221

anderen Browsern tritt ein anderes Problem auf: Bei zu hoher Vergrößerung kann die Schrift über die Grenzen von Hintergrundbildern oder Elementboxen hinausragen. • Em-Einheiten (em) und Prozentwerte sind dagegen relative Längeneinheiten. Der angegebene Wert ist im Prinzip ein Multiplikationsfaktor für den entsprechenden Wert des Elternelements. Der Wert für das Elternelement muss hierbei nicht ausdrücklich angegeben werden, sondern kann auch der Standardwert des Browsers sein. Dieses Verfahren wird im folgenden Abschnitt genauer erklärt. • Wird die Schriftgröße als Schlüsselwort angegeben, ist einer von sieben Werten möglich. Diese entsprechen ungefähr den verschiedenen Gewichtungen für Überschriften (siehe unten). Die tatsächlichen Werte für Schlüsselwörter werden übrigens immer relativ zur Standardeinstellung des Browsers berechnet. Die im Browser eingestellte Standardschriftgröße entspricht hierbei dem Wert medium und beträgt in aktuellen Browsern meist 16 Pixel.

Berechnung der Werte für em-Einheiten und Prozentangaben Wird der Wert für font-size in em-Einheiten oder als Prozentwert angegeben, hängt der berechnete Wert davon ab, wo in der Kaskade sich das betreffende Element befindet. Der tatsächliche Wert wird als Vielfaches der geerbten Schriftgröße berechnet. Zum Beispiel: body { font-size: 15px; } .wichtig { font-size: 1.4em; } .anmerkung { font-size: .667em; }

Werden keine weiteren Angaben für font-size gemacht, hat der Text in Abschnitten der Klasse wichtig eine Größe von 21 Pixeln, während er in Abschnitten, die als .anmerkung markiert sind, nur 10 Pixel groß ist. Ergänzen wir dies um die folgende Regel: .wichtig strong { font-size: 1.429em; font-style: normal; }

Hier würde man davon ausgehen, dass der Text nicht fettgedruckt, sondern einfach etwas größer als der umgebende Inhalt dargestellt wird. Tatsächlich werden die Angaben für font-size aber nicht addiert, sondern multipliziert, wodurch der mit strong markierte Teil deutlich größer ausfällt: (15 \x 1,4 \x 1,429) = ca. (15 \x 2)  30 Pixel

Der gleiche Effekt tritt auch bei verkleinernden Werten auf. Aus diesem Grund rate ich CSS-Anfängern in Diskussionsforen eigentlich davon ab, em-Einheiten oder Prozentangaben für font-size-Werte des body-Elements zu benutzen. Wird font-size mehrfach in Stylesheet-Regeln für verschachtelte Elemente verwendet, können relative Werte schnell zu unlesbarem Text führen.

222

|

Kapitel 12: Web-Typografie

Schlüsselwörter für Schriftgrößen Gemäß der CSS 2.1-Spezifikation entsprechen die sieben Schlüsselwörter den verschiedenen Überschriftsgrößen, wie in Tabelle 12-1 dargestellt ist. Tabelle 12-1: Die Beziehung zwischen den Schlüsselwörtern für »font-size« und den Überschriftsgrößen Schlu¨sselwort

xx-small

x-small

small

medium

large

x-large

xx-large

h3

h2

h1

(Standardwert) U¨berschrift

h6

–

h5

h4

Die Schlüsselwörter für font-size entsprechen den Werten des size-Attributs für das nicht mehr unterstützte Element font. Geht man von den Standardschriftgrößen in Firefox 3, Internet Explorer 8 und Safari 3/4 aus, so entsprechen die Schlüsselwörter den Pixelwerten, die in Tabelle 12-2 aufgeführt sind: Tabelle 12-2: Standardschriftgrößen und die entsprechenden Schlüsselwörter für »font-size« Schlu¨sselwort

xx-small

x-small

small

medium

large

x-large

xx-large

Pixelwert

9

10

13

16

18

24

32

Arbeit mit Schriften und Schriftschnitten Die Möglichkeit, Schriften (Fonts) und Schriftschnitte außerhalb des Markups zu definieren, ist eine der größten Stärken von CSS. Dies ist eine deutliche Verbesserung gegenüber den Kindertagen des Webs, als die Seiten ausschließlich in der vom Benutzer eingestellten Standardschrift dargestellt wurden.

Das Problem der geringen Auswahl Unter Windows XP gibt es gerade einmal 16 Schriften, die im Web verwendet werden können. Drei davon sind aus verschiedenen Gründen jedoch komplett nutzlos. Unter Mac OS X ist die Auswahl deutlich größer. Aufgrund des geringen Marktanteils von Mac OS X sollten Designer aber prinzipiell eine der XP-Schriften als Ersatz angeben, die in Tabelle 12-3 gezeigt sind. Die Allgegenwärtigkeit von Microsoft Office (und der beiliegenden Schriften) ist ein Lichtblick in der ansonsten eher düsteren Landschaft der Web-Typografie. Allerdings sind die meisten Schriften eher im Printbereich als im Web zu Hause.

Arbeit mit Schriften und Schriftschnitten

|

223

Tabelle 12-3: Verfügbare lateinische Schriften, geordnet nach Betriebssystem. Großflächig unterstützte Schriften sind hervorgehoben. Mögliche Ersatzschriften für die verschiedenen Betriebssysteme bzw. die entsprechenden allgemeinen Schlüsselwörter sind angegeben.1, 2 Schrift

Betriebssystem Windows XP

Windows Vista & 7

Mac OS X 10.3

Mac OS X 10.5

American Typewriter

Courier New

Courier New

✓

✓

Andale Mono 3

✓

✓

Monaco

✓

Apple Gothic

Microsoft Sans Serif

Microsoft Sans Serif

✓

✓

Arial

✓

✓

✓

✓

Arial Black 4

✓

✓

✓

✓

Arial Narrow

✓

✓

✓

✓

Arial Rounded

Arial

Arial

✓

✓

Arial Unicode

Arial Unicode MS

Arial Unicode MS

Arial

×

Arial Unicode MS

✓

✓

Arial Unicode

✓

Baskerville

Palatino Linotype

Palatino Linotype

✓

✓

Big Caslon

Bookman Old Style

×

✓

✓

Book Antiqua

✓

✓

✓

✓

Bookman Old Style

✓

✓

✓

✓

Brush Script

cursive

cursive

✓

✓

Calibri

Trebuchet MS

✓

Trebuchet MS

Trebuchet MS

Century Gothic

✓

✓

✓

✓

Cambria

serif

✓

serif

Plantagenet Cherokee

Cambria Math

×

✓

×

×

Candara

Tahoma

✓

Tahoma

Tahoma

Chalkboard

Comic Sans MS

Comic Sans MS

✓

✓

Cochin

serif

serif

✓

✓

Comic Sans MS

✓

✓

✓

✓

Consolas

Lucida Console

✓

Monaco

×

Constantia

Book Antiqua

✓

Book Antiqua

×

1 Auf sämtlichen genannten Betriebssystemen gibt es außerdem eine Reihe von kyrillischen und asiatischen Schriften, die teilweise eine beschränkte Unterstützung für lateinische Buchstaben enthalten. Zudem enthalten nicht alle Fonts den kompletten lateinischen Zeichensatz. 2 Die hier vorgeschlagenen Ersatzangaben sind vollkommen subjektiv. Die Ersatzschriften funktionieren größtenteils auf allen Betriebssystemen. 3 Folgende Schriften sind Teil der Microsoft-Standardschriften für das Web: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Tahoma, Times, New Roman, Trebuchet MS und Verdana. 4 Einige der in dieser Tabelle genannten Schriften sind nicht Teil von Windows selbst, sondern von Microsoft Office, das zumindest als Demoversion den meisten Betriebssystemen (inklusive Mac OS X) beiliegt. Die Schriften können auch dann weiterbenutzt werden, wenn die Demoversion bereits abgelaufen ist. Unter Mac OS X muss eines der Office-Programme zumindest einmal gestartet werden, damit die Schriften installiert werden. Viele dieser Schriften wurden für gedruckte Medien entwickelt. Ihre Verwendung im Web ist daher mit Vorsicht zu genießen.

224

|

Kapitel 12: Web-Typografie

Tabelle 12-3: Verfügbare lateinische Schriften, geordnet nach Betriebssystem. Großflächig unterstützte Schriften sind hervorgehoben. Mögliche Ersatzschriften für die verschiedenen Betriebssysteme bzw. die entsprechenden allgemeinen Schlüsselwörter sind angegeben. (Fortsetzung) Schrift

Betriebssystem Windows XP

Windows Vista & 7

Mac OS X 10.3

Mac OS X 10.5

Corbel

Tahoma

✓

Tahoma

×

Courier New

✓

✓

✓

✓

Didot

serif

serif

✓

✓

Franklin Gothic

sans-serif

✓

Gill Sans

Gill Sans

Futura

Century Gothic

Century Gothic

✓

✓

Garamond

✓

✓

✓

✓

Georgia

✓

✓

✓

✓

sans-serif

Franklin Gothic

✓

✓

Helvetica

Arial

Arial

✓

✓

Helvetica Neue

Arial

Arial

✓

✓

Herculanum

fantasy

fantasy

✓

✓

Hoefler Text

Georgia

Georgia

✓

✓

Impact

✓

×

✓

×

Lucida Console

✓

✓

Monaco

Monaco

Lucida Grande

Lucida Sans Unicode

Lucida Sans Unicode

✓

✓

Lucida Handwriting

✓

✓

✓

✓

Lucida Sans Unicode

✓

✓

Lucida Grande

Lucida Grande

Marker Felt

cursive

cursive

✓

✓

Gill Sans

5

Microsoft Sans Serif

✓

✓

Apple Gothic

✓

Mistral

cursive

✓

Brush Script

Brush Script

Monaco

Lucida Console

Lucida Console

✓

✓

Monotype Corsiva

✓

✓

✓

✓

Nyala

fantasy

✓

Papyrus

Papyrus

Optima

sans-serif

sans-serif

✓

✓

Palatino Linotype

✓

✓

Baskerville

Baskerville

Papyrus

✓

✓

✓

✓

Plantagenet Cherokee6

serif

✓

serif

✓

Segoe Print

Lucida Handwriting

✓

Lucida Handwriting

Lucida Handwriting

Segoe Script

cursive

✓

cursive

cursive

Segoe UI

sans-serif

✓

Gill Sans

Gill Sans

Skia

sans-serif

sans-serif

✓

✓

5 Gill Sans wird von Mac OS X als Standardschrift für Benutzerschnittstellen und Textbeschriftungen verwendet. 6 Enthält lateinische Buchstaben, Symbole (z.B. für Währungen) und Zeichen für Cherokee-Silben.

Arbeit mit Schriften und Schriftschnitten

|

225

Tabelle 12-3: Verfügbare lateinische Schriften, geordnet nach Betriebssystem. Großflächig unterstützte Schriften sind hervorgehoben. Mögliche Ersatzschriften für die verschiedenen Betriebssysteme bzw. die entsprechenden allgemeinen Schlüsselwörter sind angegeben. (Fortsetzung) Schrift

Betriebssystem Windows XP

Windows Vista & 7

Mac OS X 10.3

Mac OS X 10.5

Sylfaen

✓

✓

Baskerville

Baskerville

Tahoma

✓

✓

✓

✓

Times

Times New Roman

Times New Roman

✓

✓

Times New Roman

✓

✓

✓

✓

Trebuchet MS

✓

✓

✓

✓

Verdana

✓

✓

✓

✓

Zapfino

cursive

cursive

×

✓

×

×

✓

✓

Dingbats Apple Symbols

✓

✓

×

×

Symbol

✓

✓

✓

✓

Webdings

✓

✓

✓

✓

Wingdings

✓

✓

×

×

Zapf Dingbats

×

×

✓

✓

Marlett

7

Beispiele für die in Tabelle 12-3 aufgelisteten Schriften finden Sie in verschiedenen Quellen, so auch auf der Website zu diesem Buch.

Eigene Schriften definieren: Die Eigenschaft »font-family« Wenn Sie sich CSS-Stylesheets ansehen, scheint die Eigenschaft font-family eigentlich ganz einfach zu sein: Eigenschaft, Doppelpunkt, Schriftname, Komma, Schriftname, Komma, allgemeines Schlüsselwort, fertig. Das kann doch nicht so schwer sein, oder? Tatsächlich gibt es bei font-family aber einiges zu beachten: 1. Alle Schriften sollten exakt mit dem Namen angegeben werden, der auch in den Schriftsammlungen des vom Benutzer eingesetzten Betriebssytems verwendet wird. Hierzu gehörten auch die Groß- und Kleinschreibung und eventuelle Zusatzbezeichnungen. So ist Arial etwas vollkommen anderes als ’Arial Unicode MS’. Daher ist es eventuell nötig, mehrere Varianten der gleichen Schrift anzugeben. 2. Enthält der Name einer Schrift Leerzeichen, muss der Name in einfache oder doppelte Anführungszeichen gesetzt werden. 3. Die Reihenfolge der Namen in der Liste ist wichtig. Angenommen, Ihr Stylesheet enthält die folgende Regel: font-family: Futura,’Century Gothic’,sans-serif. In diesem Fall versucht der Browser zuerst, die ganz links stehende Schrift (Futura) für 7 Enthält viele Zeichen, die für die Beschriftung von Windows-Kontrollelementen verwendet werden.

226

|

Kapitel 12: Web-Typografie

die Darstellung zu verwenden. Ist dies nicht möglich (z.B. weil sie nicht installiert ist), wird die nächste Schrift (Century Gothic) probiert usw. Schlägt auch das fehl, wählt der Browser gemäß dem angegebenen allgemeinen Schlüsselwort (sans-serif) selbst eine Schrift aus, wie im nächsten Punkt erklärt wird. Die Liste für font-family kann beliebig viele Schriftnamen enthalten. 4. Die Liste sollte immer mit einem allgemeinen Schlüsselwort abgeschlossen werden. Mögliche Werte sind (siehe auch Abbildung 12-3): serif Serifenschrift, z.B. »Latin«, »Old Style«, »Antiqua« und »Copperplate« sans-serif Serifenlose Schriften, z.B. »Geometric« und »Grotesk« monospace Nichtproportionale Schriften wie »Courier New«, »Mono« oder »Typewriter« cursive Hierbei handelt es sich, einfach gesagt, um »schräg gestellte« Varianten der Ausgangsschrift, die oft mit zusätzlichen kalligrafischen Verzierungen versehen sind. fantasy Dekorativschrift. Kaum für lange Text geeignet. 5. Erhalten neuere Browser gültige HTTP-Header vom Typ Content-Type, ContentLanguage und charset, kann man davon ausgehen, dass korrekt implementierte Schriften auch wie gewünscht dargestellt werden. Bei älteren Browserversionen ist das aber nicht immer der Fall. Hier sollten Entwickler Fonts verwenden, die von sich aus mit dem angegebenen charset kompatibel sind (siehe im Abschnitt »Was ist Zeichenkodierung?« auf Seite 230). Für Seiten, die lateinische Schriften verwenden, besteht der sicherste Weg darin, Inhalte explizit mit dem passenden ISO 8859-x-Code zu kennzeichnen und auszuliefern. Auch wenn sich der Internet Explorer erfreulich von seinen Vorgängern abhebt, produziert er bei allgemeinen Schlüsselwörtern für font-family oft unvorhersagbare Ergebnisse. Daher sollte man darauf achten, dass vor dem Schlüsselwort ein unter Windows mit Sicherheit funktionierender Schriftname angegeben wird. Weitere Details zu diesem Thema finden Sie auf der Website zu diesem Buch.

Die richtigen Schriftnamen finden In Regel 1 wurde gesagt, dass die Werte für font-family exakt den Schriftnamen auf dem Benutzerrechner entsprechen müssen. Unter Windows finden Sie die installierten Schriften wie folgt:

Arbeit mit Schriften und Schriftschnitten

|

227

1. Öffnen Sie die Systemsteuerung, die Sie im Start-Menü unter Einstellungen oder Systemsteuerung finden. Alternativ dazu können Sie unter Windows Explorer auch den Pfad C:\WINDOWS eingeben. 2. In der Systemsteuerung finden Sie einen Ordner namens Schriftarten; bei der Verwendung von Windows Explorer heißt er C:\WINDOWS\Fonts (beide Dinge verweisen auf den gleichen Ort im Dateisystem). Öffnen Sie ihn, und navigieren Sie zu der Schriftdatei, die Sie in Ihrem Dokument verwenden wollen. 3. Öffnen Sie die gewünschte Schrift. In der Zeile Schriftart finden Sie den Namen, der für font-family angegeben werden muss (hier: Verdana). Am Mac geht das sogar noch einfacher. Öffnen Sie das Programm Schriftsammlung im Programme-Ordner, und wählen Sie in der linken Spalte den Eintrag Alle Schriften. Danach navigieren Sie in der mittleren Spalte zur gewünschten Schrift. Der hier angezeigte Name ist der für font-family benötigte Wert. In Abbildung 12-7 sehen Sie die Darstellungsprogramme für Schriften unter Windows und Mac OS X am Beispiel der Schrift »Verdana«.

Abbildung 12-7: Die Darstellungsprogramme für Schriften unter Windows (oben) und Mac OS X (unten)

228

|

Kapitel 12: Web-Typografie

Mit der Eigenschaft »font« auf Systemschriften zugreifen Normalerweise rate ich von der Verwendung der Kurzschrift-Eigenschaft font ab. Sie zwingt den Gestalter, ansonsten unnötige, typografische Werte zu definieren, die anderswo wieder überschrieben werden müssen, was das Stylesheet nur komplexer macht. Die wichtigste Ausnahme gibt es, wenn Sie auf die Systemschriften zugreifen müssen, was nur mit font möglich ist. Die Kurzschrift-Eigenschaft font fasst die Werte der einzelnen font-*-Einzeleigenschaften in einer Regel zusammen. Die Struktur sieht wie folgt aus: font-style font-variant font-weight font-size/line-height [font-family|Angabe zur Systemschrift]

Die einzelnen Werte sollten in der oben gezeigten Reihenfolge angegeben werden. Ist ein expliziter Wert für line-height nicht nötig, kann der Schrägstrich zur Trennung vom Wert für font-size weggelassen werden. Der Wert für font-family wird entsprechend der Einzeleigenschaft angegeben, wie im vorigen Abschnitt beschrieben. Alternativ kann bei font auch ein Schlüsselwort angegeben werden. Dieses bezeichnet die Systemschrift für bestimmte Elemente der Benutzerschnittstelle, wie Formulare und Fensterelemente (siehe Tabelle 12-4). Tabelle 12-4: Schlüsselwörter für Systemschriften für Elemente der Benutzerschnittstelle des BenutzerBetriebssystems Schlüsselwort

Entsprechende Betriebssystem-Elemente

caption

Entspricht den Einstellungen z.B. für Beschriftungen von Buttons und Aufklappmenüs

icon

Beschriftung von Icons des Betriebssystems (Festplatten, Ordner, Dateinamen etc.)

menu

Die in Aufklappmenüs und Menülisten verwendete Schrift

message-box

Texteinstellungen für Dialogboxen, wie sie z.B. per window.alert() erzeugt werden

small-caption

Text für kleine Steuerelemente mit Beschriftung

status-bar

Schrift für die Statusleiste von Fenstern

In CSS3 ist geplant, die neue Kurzschrift-Eigenschaft appearance für diesen Zweck zu verwenden. Mehr dazu finden Sie auf der Website des W3C (http://www.w3.org/TR/ css3-ui/#system0).

Überblick über die Zeichenkodierung Besonders die letzte Regel zur Verwendung von font-family kann verwirrend wirken, da Gestalter nicht immer Zugriff auf die HTTP-Antwort-Header haben. Jeder korrekt konfigurierte Webserver, der das Hypertext Transfer Protocol (HTTP) richtig implementiert (das sind fast alle), liefert zusammen mit dem angeforderten Dokument auch die richtigen Header für dessen Sprache und Zeichenkodierung an den Browser zurück. Zusätzliche Schnittstellen, wie das meta-Element oder die PHP-Funktion

Überblick über die Zeichenkodierung

|

229

Header() geben Entwicklern die Möglichkeit, diese Zuweisungen bei Bedarf mit eigenen Werten zu überschreiben. Weitere Details hierzu finden Sie im Anhang zu diesem Buch.

Was ist Zeichenkodierung? Hoffentlich kennen Sie sich mit dem Prinzip von Bits und Bytes aus. Ein Bit beschreibt den Zustand eines einzelnen Schaltkreises im Arbeitsspeicher des Systems. Ein Byte entspricht acht dieser Zustände in einer logischen Reihe. Hierdurch lassen sich 256 verschiedene Zustände ausdrücken. In den meisten westlichen Sprachen haben wir uns daran gewöhnt, die verschiedenen Buchstaben und Zeichen eines Alphabets mit einem Byte auszudrücken. Stellen Sie sich hierzu einmal das Morse-Alphabet vor: Hier wird ein Buchstabe als unterschiedlich lange Folge von Punkten (entsprechend einem nicht gesetzten Bit) und Strichen (entsprechend gesetzten Bits) ausgedrückt. Diese Zeichenfolgen konnten zu Wörtern kombiniert werden und wurden typischerweise zum Übermitteln von Telegrammen benutzt. Im Innern eines Computers sind dagegen systematischere Zuweisungen möglich. Bei der Definition des Worts »systematisch« stellen sich die folgenden Fragen: • Sollen Großbuchstaben vor oder nach Kleinbuchstaben stehen? • Stehen Kontrollzeichen (Zeilenumbruch, Wagenrücklauf etc.) am Anfang oder am Ende des Zeichensatzes? • Enthält das Kodierungsschema Anweisungen darüber, ob das erste Bit eines Zeichens sich auf die Codepositionen Null und Eins bezieht oder auf die gesamte obere oder untere Hälfte des Bereichs von 0 bis 255? • Welche Beschränkungen des Betriebssystems könnten Auswirkungen auf das endgültige Kodierungsschema haben? • Welche Codepositionen sollten nicht zugewiesen werden, um auf zukünftige Entwicklungen, wie z.B. die Einführung neuer Währungssymbole, vorbereitet zu sein? • Welche Zuweisungslogik soll für logografische Schreibsysteme wie Hanzi und Kanji oder komplexe Silbensprachen wie Hangul verwendet werden? • Ist eine bestimmte Kodierung für alle Nutzer einer gemeinsamen Orthographie sinnvoll? Die schiere Menge der heutzutage verwendeten Zeichenkodierungen lässt sich durch die Vielzahl an Antworten erklären, die Ingenieure auf diese Fragen haben. Im Web müssen die meisten dieser Zeichensätze natürlich unterstützt werden.

ASCII, ISO 8859-1, Unicode und UTF-8 Mitte der 1960er-Jahre arbeiteten verschiedene Gruppen zusammen an einem neuen, 128 Zeichen umfassenden (7-Bit-)Kodierungsschema für die lateinischen Buchstaben, die im amerikanischen Englisch verwendet wurden. Dieses Schema wurde unter dem Namen 230

|

Kapitel 12: Web-Typografie

ASCII (American Standard Code for Information Interchange) bekannt. Es basierte auf früheren Kodierungen für Telexgeräte. Einige Jahre später wurde verfügt, dass sämtliche Computer, Speicher- und Übertragungsgeräte, die von der US-Regierung angeschafft wurden, diesen Standard unterstützen mussten. Kurz darauf war ASCII aus der englischsprachigen Welt nicht mehr wegzudenken. In den 80er-Jahren veröffentliche die International Organization for Standardization (ISO) einen statischen 8-Bit-Standard für die Kodierung mehrerer europäischer und nahöstlicher Alphabete. Viele von ihnen waren Varianten des einfachen lateinischen Alphabets. Alle diese Kodierungsschemata bestehen zur Hälfte aus dem ASCII-Code und sind auch heute noch im Einsatz, wie etwa das ISO 8859-Schema. Zeitgleich wurde versucht, Standardkodierungen auch für andere Schreibsysteme zu entwickeln, besonders in Japan. In den frühen 1990er-Jahren wurde diese Arbeit im Unicode-Standard zusammengefasst, der seitdem immer weiter ausgedehnt wird. Das erklärte Ziel ist es, alle bekannten Schreibsysteme, inklusive antiker Schriften und solcher, die in historischen Aufzeichnungen verwendet wurden, zusammenzufassen. Im Unterschied zu früheren Kodierungen kann die Bitlänge in Unicode variieren. Aktuell umfasst der Unicode-Standard mehr als 100.000 Zeichen. Im Web werden die normalerweise benötigten Zeichen meist nach dem UTF-8-Schema (8-Bit Unicode Transformation Format) kodiert. Hierbei werden alle ASCII-Zeichen in einem von vier möglichen Bytes kodiert, wodurch die Rückwärtskompatibilität auch älteren ASCII-basierten Systemen sichergestellt werden soll.

Das richtige Kodierungsschema wählen Standardmäßig liefern Webserver die angeforderten Dokumente typischerweise als UTF-8 kodiert aus. Wenn Ihre Inhalte in Englisch geschrieben sind und Sie HTML-Entities verwenden, um Zeichen außerhalb des ASCII-Zeichensatzes darzustellen (wie später in diesem Kapitel besprochen wird), besteht keine Notwendigkeit, die Serverkonfiguration anzupassen. Auch spezielle HTTP-Header sind nicht notwendig, wenn es nur darum geht, den richtigen Zeichensatz anzugeben. Das hat zwei Gründe: • Der erste Grund hat mit der Effizienz des Kodierungsschemas zu tun: ASCII-basierte Inhalte verwenden 7 Bit pro Zeichen. Der zusätzliche Aufwand, Zeichen-Entities zu definieren, kann außer Acht gelassen werden, wenn man ihn mit den Schwierigkeiten vergleicht, Zeichen mit hohen Bitwerten (über 128) mit unsicherer Kodierung direkt zu verwenden. • Der zweite Grund, aus dem UTF-8 hauptsächlich für Inhalte in europäischen Sprachen geeignet ist, hat damit zu tun, wie moderne Browser mit Schriften umgehen. Die Standardeinstellung für Zeichenkodierungen erfolgt in den meisten Browsern automatisch, was im Falle von ASCII nur wenig Bedeutung hat. Diese Einstellung ermöglicht es den Bowsern, Zeichen-Entities unabhängig von der Kodierung der verwendeten Schrift korrekt darzustellen. Schließlich sind die Beziehungen zwischen den Unicode-Codepositionen und denen in anderen Kodierungsschemata

Überblick über die Zeichenkodierung

|

231

gut dokumentiert. Der Browser kann diese Codepositionen bei Bedarf transparent übersetzen und so das gewünschte Zeichen darstellen. UTF-8 und die automatische Wahl der Kodierung sind aber nicht das Ein und Alles bei der Darstellung von Schriften. Eine Reihe von Umständen kann trotzdem zu falsch dargestellten Zeichen in Ihrem Dokument führen. Am häufigsten sind Formulareingaben von Browsern mit abweichenden Kodierungseinstellungen und das Kopieren und Einfügen von Text aus Textverarbeitungsprogrammen. Dieser wird bei der Verwendung eines lateinischen Alphabets meist als 8-Bit-Zeichen statischer Länge kodiert. Wenn diese »verdrehten« Zeichen es bis in Ihre Texte schaffen, stellt der Browser des Benutzers sie möglicherweise nicht korrekt dar. Treten diese Probleme häufiger auf, ist es unter Umständen sinnvoll, die Zeichenkodierung Ihrer Dokumente in ISO 8859-x oder Windows-1252 zu ändern (die fast identisch sind). Entwickler, die mit asiatischen Inhalten arbeiten, sollten ggf. ähnlich verfahren.

Zeichen-Entities zur Definition von Nicht-ASCII-Zeichen Europäische Sprachen verwenden eine Reihe von diakritischen Zeichen (Ä, ø, ß etc.). Ist eine durchgehende Verwendung von UTF-8 oder einer anderen 8-Bit Zeichenkodierung nicht möglich, können Sie auf die in HTML 4 definierten Zeichen-Entities zurückgreifen. In Tabelle 12-5 sehen Sie eine Übersicht diakritischer Zeichen, die häufig in europäischen Sprachen verwendet werden und die entsprechenden Zeichen-Entities: Tabelle 12-5: Häufige europäische diakritische Zeichen und die entsprechenden HTML 4-ZeichenEntities Name

diakritische Zeichen

Zeichen-Entity

Beispiel

Akut-Akzent

¤

&?acute;

é, í

Cedille

|,

&?cedil;

ç

Zircumflex-Akzent

|^

&?circ;

ô

Grave-Akzent

`

&?grave;

~

&?tilde;

à ~n, â

&?uml;

ö

Tilde Umlaut

«

Die diakritischen Zeichen können nicht beliebig mit allen Buchstaben kombiniert werden. Ist eine Kombination möglich, gilt sie für Groß- und für Kleinbuchstaben. Eine vollständige Tabelle der HTML-Zeichen-Entities finden Sie auf der Website zu diesem Buch. Diese von Adrian Roselli (http://adrianroselli.com/) zusammengestellte Liste enthält außerdem die Dezimalcodes für hochbittige IS0 8859-x-Zeichen, die in XHTML nicht korrekt dargestellt werden. Neben den diakritischen Zeichen gibt es eine Reihe von Sonderzeichen, die hilfreich sein können, wenn Gestalter einen hohen typografischen Standard einhalten müssen. Viele dieser Zeichen finden Sie in Tabelle 12-6.

232

|

Kapitel 12: Web-Typografie

Tabelle 12-6: Nützliche Zeichen-Entities Zeichen

Symbol

Absatzzeichen

Bevorzugt gegenüber

¶

Numerische/UnicodeWert(e)8 ¶ (U+00B6)

Entity

Aufzählungszeichen (Bullet)

•

•

• (U+2022)

*

Bruch: Ein-Halb9

1/2

½

¼

1/2

Cent-Symbol

¢

¢

¢

Copyright-Zeichen



©

©

(c)

Divisionszeichen

÷

÷

÷

/ in nicht mathemati-

Dolch, Doppeldolch

†‡

† ‡

† ‡

* und ** für manche

Doppeltes Anführungszeichen links

„

„

„

Annotationen " oder ,, in manchen Sprachen

Doppelte Anführungszeichen rechts/links (USA: links/rechts)

""

“ ”

“ ”

", ’’, oder ‘‘

Doppeltes Anführungszeichen [allgemein]10

"

"

" (U+0022)

Einfaches Anführungszeichen links

‘

‚

‚

Einfaches Anführungszeichen rechts/links (USA: links/rechts)

‘

Eingetragenes Warenzeichen

®

®

®

(R)

Ellipse

...

…

… (U+2026)

...

Eszett

ß

ß

ß

"ss"-Ersetzung

Euro-Zeichen

E

€

€ (U+20AC)

 

 

schem Kontext

(U+201C, U+201D)

’ oder Komma in

manchen Sprachen ‘ ’

‘ ’

’ oder '

(U+2018, U+2019)

Festes (nicht umbrechendes) Leerzeichen Gedankenstrich kurz

–

–

–

- für Wertebereiche

Gedankenstrich lang

–

—

—

- mit Leerzeichen umgeben, oder --

Grad



°

° (U+00B0)

8 Einige Symbole werden möglicherweise als Werte für die Eigenschaft content verwendet. Diese sind in Dezimal- als auch in hexadezimaler Unicode-Schreibweise aufgeführt. Weitere Informationen finden Sie in der Diskussion zur Eigenschaft content in den »Schlechten Seiten«. 9 Ein-Viertel- und Drei-Viertel-Brüche können ebenfalls nach dem hier gezeigten Muster angegeben werden. 10 Die einzigen von XML unterstützten Entity-Namen sind &, < und > (&, < bzw. >). Bei der Verwendung von XML sollten sämtliche Entities in dieser Tabelle mit ihren numerischen Werten angegeben werden.

Überblick über die Zeichenkodierung

|

233

Tabelle 12-6: Nützliche Zeichen-Entities (Fortsetzung) Zeichen

Symbol

Entity

Numerische/UnicodeWert(e)11

Bevorzugt gegenüber

Kleiner oder gleich/ größer oder gleich



≤ ≥

≤ ≥

<=, >= in nicht mathematischem Kontext

′ ″

′ ″

’, ’’, ', ",vergangene Stunde:Minute x, X; * in nicht mathematischem Kontext

Minuten- oder Fuß-Zei- ′ ″ chen, Sekunden- oder Zoll-Zeichen Multiplikationszeichen

×

×

×

Paragraf-Zeichen

§

§

§ (U+00A7)

Pfund (Währung)

£

£

£ (U+00A3)

Plus/Minus

±

±

±

12

+/-

‰

‰

‰

Punkt in der Zeilenmitte




·

·

Rund, etwa



≈

≈

Spanisches Ausrufungs-  ¿ zeichen, Fragezeichen

¡ ¿

¡ ¿

Spitze Anführungszeichen

«»

« »

« »

" in manchen

(U+00AB, U+00BB)

Sprachen

Trademark-Zeichen

2

™

™

(tm) etc.

Ungleich

6¼

≠

≠

!=

Yen-Symbol, YuanSymbol

¥

¥

¥ (U+00A5)

RMB für chinesische Währungsangaben

Promille-Zeichen

~

Beachten Sie, dass die Unicode-Angaben in der vierten Spalte von Tabelle 12-6 nicht verlässlich sind, wenn eine andere Zeichenkodierung als UTF-8 für das Dokument gewählt wurde.

Ausgewogene Schriftgestaltung Wenn Sie schon einmal Dokumente erstellt haben, dann wissen Sie, dass man den »Erpresserbrief-Effekt« vermeiden sollte – das Nebeneinander zu vieler verschiedener Schriften in einem Dokument. Im Web entsteht dieser Effekt aber nicht nur durch zu viele Schriften. Er hat auch mit den Farben, Größen und Schriftschnitten zu tun, die Sie verwenden. 11 Einige Symbole werden möglicherweise als Werte für die Eigenschaft content verwendet. Diese sind in Dezimal- als auch in hexadezimaler Unicode-Schreibweise aufgeführt. Weitere Informationen finden Sie in der Diskussion zur Eigenschaft content in den »Schlechten Seiten«. 12 Das Promyriade-Zeichen (‰) befindet sich auf der folgenden Codeposition (8241), ist aber nicht Teil der HTML 4-Spezifikation.

234

|

Kapitel 12: Web-Typografie

Vorhersagbarkeit und Panik Eine Website ist normalerweise in verschiedene Bereiche unterteilt, die aus einer oder mehreren Seiten bestehen. Die Möglichkeit, Webdokumente hierarchisch zu organsieren, hat Vorteile. So ist es nicht nur möglich, sondern einfach, die Präsentation einer Site äußerst konsistent zu gestalten. Das zahlt sich auf auch auf lange Sicht aus. Die Arbeitsbelastung von Designern und Gestaltern wird verringert, und Seitenbestandteile, die als Wegweiser dienen, sind leicht zu erkennen und zu kennzeichnen. Leider hat die Konsistenz auch ihre Grenzen. Besonders bei benutzergenerierten Inhalten (z.B. Blog-Kommentaren) ist es fast unmöglich, vorherzusagen, wie viel Inhalt eine Seite am Ende enthält. Dies hat einen gewissen Kontrollverlust zur Folge. Dieser kann wiederum zu panikartigen Versuchen führen, das Verhalten und die inhaltliche Aufbereitung eines Seitenlayouts zu verändern. Dies können kleine, aber Site-weite Anpassungen von Zwischenräumen, Trennlinien und Schriftgröße sein. Tatsächlich ist das fallweise Lösen der Layoutprobleme nur oberflächlich eine Erleichterung.

Die Grenzen von Inhalten ermitteln Der erste Schritt, um mehr Kontrolle über die Schriftgestaltung zu erlangen, besteht darin, mithilfe der Kaskade festzustellen, wo die Grenzen Ihrer Inhalte liegen. Eine typische Website kann einige oder alle der folgenden Elemente enthalten: •

Identität der Website

•

Haupttext

•

Titel/Überschriften

•

Leitartikel

•

Inhalt der Seitenleiste

•

Randbemerkungen

•

Navigation: – primär – sekundär – ausgehende/untergeordnete Links – »Brotkrumen«-Navigation

•

»Anreißertexte« und/oder Werbung (multimediale Inhalte, die Besucher anregen sollen, einem Link auf eine andere Seite zu folgen)

•

Formulare

•

Applikationsfunktionalität

•

… und natürlich Hyperlinks

Ausgewogene Schriftgestaltung

|

235

Derart viele Elemente mit unterschiedlichen Funktionen verleiten Designer leicht zu zwei großen Fehlern. Der erste wurde schon genannt: das Verlangen, Anpassungen fallweise vorzunehmen, was den eigentlichen Sinn von CSS für Gestalter komplett verdreht. In kürzester Zeit ist das Template derartig voll mit überflüssigen id-, class- und anderen Elementen, dass der resultierende Markup-Code kaum noch wiederzuerkennen ist. Der zweite Fehler besteht in der Annahme, für jedes wichtige Designelement würde ein eigenes Schriftdesign gebraucht. Das ist nicht der Fall. Tatsächlich gibt es gerade einmal sechs verschiedene Arten von Elementen, für die möglicherweise ein eigenes Schriftdesign nötig ist: • Identität der Website • Titel (Hauptüberschriften) • ergänzende Überschriften • Haupttext • Navigation • Hyperlinks Bei vielen Designs wird außerdem erwartet, dass sekundäre Inhalte wie Zitate und Seitenleisten eine eigene Schriftgestaltung erhalten. Anstatt die Liste in Gedanken zu ergänzen, sollten Sie sich fragen: Warum muss dieser Teil eigentlich anders aussehen?

In der Liste steht jeder Eintrag für einen wichtigen Teil einer Site. Er dient als wichtige Wegmarke innerhalb der Seite oder der Site, oder er dient als primärer Inhalt und muss daher hervorgehoben werden.

Schrift unterscheiden: Schriftschnitt, Größe, Gewicht, Stil und Farbe Die Informationen in diesem Abschnitt mögen offensichtlich erscheinen. Ihre Erwähnung soll hier als Rahmen für Designentscheidungen dienen.

Wenn Sie wissen, welche Schriftgestaltung für welche Inhalte verwendet werden soll, müssen Sie entscheiden, wie Sie Ihre Designkonzepte umsetzen. Es gibt verschiedene Parameter, mit denen Sie Textteile voneinander unterschiedlich gestalten können: Schriftart, Schriftgröße, Schriftgewicht, Schriftstil und Schriftfarbe. Die Möglichkeit, Inhaltsbereiche mit eigenen Hintergrundfarben zu versehen, kann bei Ihrer Entscheidung helfen, entscheidet aber nicht für Sie. Aufgrund von Traditionen und Gewohnheiten haben diese Einstellungen eine unterschiedliche Wirkung beim Benutzer.

236

|

Kapitel 12: Web-Typografie

Schriftart Verschiedene Schriften geben Hinweise auf die Art des Inhalts. So werden die Überschriften mancher Zeitungen in einer serifenlosen Schrift gedruckt, während der eigentliche Text eine Serifenschrift verwendet. Dieser Ansatz ist allerdings nicht so beliebt, wie es scheint – weder für Überschriften noch für zusätzliche Inhalte. Die Gründe können traditioneller, aber auch praktischer Art sein (z.B. verschiedene Schriftabmessungen). Schriftgröße Die Schriftgröße kann einen Hinweis auf die relative Wichtigkeit einer Passage geben. Gleichzeitig ist dies auch der Grund für viele Problemfälle bei der Arbeit mit Stylesheets. Jedes Mal, wenn unterschiedliche Schriftgrößen gebraucht werden, muss auch die übrige Darstellung angepasst werden. Diese Situationen haben schon so manchen Gestalter um seinen wohlverdienten Schlaf gebracht. Schriftgewicht Fettgedruckter Text verstärkt den Inhalt, allerdings nur, wenn die Linienstärke der Buchstaben sich nicht zu stark von den Nachbarelementen unterscheidet. Eine Änderung des Schriftgewichts signalisiert eine Änderung der Wichtigkeit in Halbschritten, während eine offensichtliche Größenänderung für einen ganzen Schritt steht. Schriftstil Die Verwendung von schräggestelltem Text (kursiv oder oblique) signalisiert Änderungen im »Tonfall« des Schreibers, normalerweise als Form der Hervorhebung. Diese Schriftstile werden außerdem verwendet, um Eigennamen (wie Titel von Zeitschriften, künstlerischen Werken, Namen von Schiffen und Flugzeugen und seltener auch von berühmten Einrichtungen) zu kennzeichnen. Kapitälchen und ein weiter Buchstabenabstand werden ebenfalls zur Betonung von Textteilen benutzt, jedoch deutlich seltener. Schriftfarbe Die Verwendung von verschiedenen Schriftfarben ist im Web deutlich einfacher als in anderen Medien. Allerdings kann sie für Benutzer mit verminderter Farbwahrnehmung ein Problem sein. Aus diesem Grund sollten die Änderungen sowohl in der Helligkeit als auch im Farbton vorgenommen werden. Dabei ist es egal, ob dies für Links oder für anderen Text, der betont werden soll, geschieht. Idealerweise werden farbliche Änderungen daher mit anderen Anpassungen der Schriftdarstellung kombiniert. In Kapitel 9 werden diese Änderungen detailliert besprochen. Im Allgemeinen gilt auch hier: Je weniger Parameter Sie in der Darstellung ändern, desto besser. Zu viele Änderungen an den Einstellungen der Textdarstellung »überfahren« den Besucher möglicherweise. Sobald Sie wissen, welche Anpassungen Sie vornehmen wollen, müssen Sie sich um die Details der Darstellung kümmern. Am schwierigsten ist die Entscheidung, wie auf ungewöhnliche Situationen reagiert wird:

Ausgewogene Schriftgestaltung

|

237

• Was passiert, wenn der Inhalt mehr Platz beansprucht als erwartet? Dies ist besonders wichtig, wenn ein Layoutraster verwendet wird. • Wie unterscheiden Sie Textpassagen mit ähnlicher Wichtigkeit, aber unterschiedlicher Funktion, z.B. Überschriften für den Haupttext und für die Seitenleiste? • Hat der Designer sich für einen print-orientierten Ansatz entschieden, gibt es vermutlich kleine Unterschiede zwischen den Designelementen. Wie schafft es der Gestalter, die wild gewordene Meute von CSS-Regeln zu bändigen?

Das »Überlaufen« von Text verhindern Die letzten beiden Fragen lassen sich mit einem gut geschriebenen Stylesheet beantworten. Die einfachste Möglichkeit, das »Überlaufen« von Text in andere Elemente zu vermeiden, besteht in der Verwendung möglichst weniger Regeln für Text- und Box-Eigenschaften. Danach benutzen Sie die Regel overflow: hidden für die Box-Eigenschaften und geben die Verantwortung an die Texter ab. In Umgebungen, in denen das Fehlen angemessener Beschränkungen normal, aber vermeidbar ist, befürworte ich diesen Ansatz. (Die Beschränkung des Platzes für Inhalte fördert Einfachheit und Klarheit. Jeder Twitter-Benutzer weiß, was damit gemeint ist.) Ist die einfache Lösung nicht machbar, was leider recht oft der Fall ist, muss der Gestalter eine andere Lösung finden. Was machen Sie beispielsweise, wenn eine Überschrift, für die im Design eigentlich nur eine Zeile vorgesehen ist, so lang ist, dass zwei Zeilen für die Darstellung gebraucht werden? Eine Verringerung der Schriftgröße ist vermutlich keine Lösung. Vielleicht reicht aber schon ein kleinerer Wert für line-height aus, um die lange Überschrift auf einer Zeile unterzubringen. Ein anderer Fall sind mit Bindestrich zusammengesetzte Wörter, die nicht auf eine Spalte passen. Der Internet Explorer umbricht die Zeile am Bindestrich, andere Browser tun das aber nicht. Das Einfügen eines »Nichtverbinders der Breite null« (‌, normalerweise verwendet, um einen logischen, aber unsichtbaren Leerraum zwischen zwei Zeichen zu schaffen) sorgt hier ebenfalls nicht für einen Zeilenumbruch. In jedem Fall sollte die Schriftgestaltung zum Verhindern des Überlaufens von Text: • dem Layoutraster folgen • logisch zu den übrigen Schriftgrößen der bereits vorhandenen Stile und Schriftgestaltung passen • mit dem verfügbaren Platz auskommen, ohne die allgemeine Vorgehensweise groß zu ändern

238

|

Kapitel 12: Web-Typografie

Stile für Textpassagen mit gleicher Priorität Die Arbeit des Gestalters ist am einfachsten, wenn der Designer mit einem Grundstil beginnt und andere Stile davon ableitet. CSS ist für diesen Ansatz gut geeignet. In einem simplen zweispaltigen Layout könnte das etwa so aussehen: Haupttext 12px Georgia; schwarz Überschriften werden in 4-Pixel-Schritten, beginnend bei h4 (hat normalerweise die Standardschriftgröße), gesteigert. Seitenleiste Sämtlicher Text wird auf 75 % Schwarz aufgehellt. Navigation Eine Vergrößerung um 4 Pixel für die Hauptnavigation; normale Textgröße für die sekundäre Navigation; Farben werden über die Pseudoelemente für Links gesteuert. Ein Stylesheet, das diesem Ansatz folgt, würde die folgenden Regeln enthalten: body { color: rgb(0,0,0); font-size: 12px; font-family: Georgia, serif; } h1 { font-size: 2em; } h2 { font-size: 1.667em; } h3 { font-size: 1.333em; } #seitenleiste { color: rgb(64,64,64); } #hauptnavigation a:link { color: rgb(0,0,192); } #hauptnavigation a:link { color: rgb(0,192,0); } #hauptnavigation a:active, #unternavigation a:active { color: rgb(192,0,0); }

Normalerweise sind zusätzliche Selektoren nötig, um die verschiedenen Abschnitte einer Site zu unterscheiden. Das Grundprinzip sollte aber klar sein. Die Probleme vergrößern sich immens, wenn ein Designer aus dem Printbereich beginnt, Dinge anzupassen. Kann beispielsweise die Überschrift einer Spalte nicht verkürzt werden, könnte der Designer versuchen, die Schriftgröße zu verringern, um die Konsistenz zu wahren. Lassen Sie ihn das drei- oder viermal auf der gleichen Website machen, und in kürzester Zeit müssen Sie Selektoren wie diesen schreiben: body.ueber_uns#kontakt #seitenleiste h3.telefonnummern

Wenn Sie Selektoren wie diesen verwenden, kann es schnell passieren, dass Sie das gleiche Spiel auch für die Elemente zwischen body und body.ueber_uns#kontakt #seitenleiste h3.telefonnummern schreiben müssen.

Ausgewogene Schriftgestaltung

|

239

Schriftübersichten Das gerade beschriebene Szenario hätte sich vermeiden lassen, wenn man sich vorher darauf geeinigt hätte, dass die Überschriften der Seitenleiste ggf. auch zwei Zeilen lang sein dürfen. Genau dafür gibt es Stilrichtlinien. Ein Teil dieser Richtlinien ist außerdem eine Übersicht über alle im Projekt verwendeten Schriften. Wenn ich eine Schriftübersicht erstelle, sieht das ungefähr so aus wie in Abbildung 12-8 – eine dreispaltige Darstellung mit folgender Aufteilung: 1. die Funktion und möglicherweise die Selektoren für die einzelnen Elemente (Website-Identität, Hauptüberschrift, Einleitung, Haupttext) 2. ein Beispiel für die Benutzung der Schrift 3. die verschiedenen Parameter für die Schrift, auf Deutsch oder in Form der verwendeten CSS-Regeln

Abbildung 12-8: Ein Beispiel für eine dreispaltige Schriftübersicht (erstellt vom Autor)

Hat der Designer einer Site sämtliche Ausnahmen und Sonderfälle berücksichtigt, kann die Schriftübersicht schnell mehrere Seiten lang werden. Dies ist ein deutliches Zeichen dafür, dass bestimmte Aspekte des Designprozesses außer Kontrolle geraten sind. Noch wichtiger ist aber, dass eine effektive Schriftübersicht die vielen Designentscheidungen in einer Form dokumentiert, die von Menschen besser gelesen werden kann als Stylesheets. Dies kann im Falle von wechselnden Mitarbeitern oder mangelnder Pflege der Site eine Menge Zeit sparen.

Verschiedene typografische Aspekte von CSS Es gibt eine Reihe von weniger bekannten CSS-Eigenschaften, die zeigen, wo die Grenzen dessen liegen, was Designer mit CSS steuern können. Andererseits demonstrieren sie aber auch die vielen Abstufen zwischen »schlicht« und »elegant«.

240

|

Kapitel 12: Web-Typografie

Die Eigenschaft »line-height« Wie bereits gesagt wurde, steuert die Eigenschaft line-height, wie viel Leerraum zwischen den einzelnen Zeilen eingefügt wird. Dies entspricht ungefähr dem »Durchschuss« im Printbereich. Wie Abbildung 12-9 zeigt, wird der Leerraum gleichmäßig ober- und unterhalb der jeweiligen Zeile eingefügt. Zumindest in aktuellen Browsern ist dieses Verhalten konsistent. Wie Sie sehen, fügen ältere Browser den Leerraum teilweise nur unterhalb oder nur oberhalb (wie z.B. IE 6) der Zeile ein.

Internet Explorer 6 Firefox und Safari (ältere Versionen) Safari 3+, Firefox 2.5+, Internet Explorer 7+

Abbildung 12-9: Das Verhalten der Eigenschaft »line-height« in verschiedenen Browsern (hier am Beispiel der Times New Roman, Schriftgröße 16 Pixel, »line-height«: 32 Pixel)

Ein weiteres bemerkenswertes Detail von line-height ist die Möglichkeit, Werte auch ohne Längeneinheit anzugeben, wie hier: line-height: 1.5;

Dies funktioniert so ähnlich, als hätten Sie stattdessen den Wert 150% oder 1.5em angegeben. Aus Gründen der Konsistenz und Disziplin bevorzuge ich es normalerweise, für lineheight die gleichen Längeneinheiten zu verwenden wie für die anderen Schrift- und Texteigenschaften auch. Die Standardzeilenhöhe geben Sie mit line-height: normal an. Diese kann jedoch je nach Betriebssystem und Browser unterschiedlich ausfallen. Meist werden kleinere Werte im Bereich zwischen 120 % und 125 % als Standard verwendet.

Die Eigenschaften »font-variant« und »text-transform« Die Eigenschaften font-variant und text-transform haben meist die Funktion, seltene Formen von Hervorhebungen zu realisieren. Das kann beispielsweise ein großgeschriebenes Warenzeichen oder eine zitierte Passage sein, die besonders betont werden soll. Die Eigenschaft text-transform wird nur selten benutzt, und ihre Werte (von denen uppercase am häufigsten verwendet wird) sind kaum der Rede wert. Die Eigenschaft font-variant und ihr einziger nicht standardmäßiger Wert, small-caps, ist da schon eine andere Sache. Wird die Großschreibung eines Wortes nur über verschiedene Schriftgrößen realisiert, haben die Buchstaben das gleiche Aussehen. Wird dagegen die Eigenschaft font-variant

Verschiedene typografische Aspekte von CSS

|

241

verwendet, werden die Kleinbuchstaben durch einen eigenen Schriftschnitt ersetzt, in dem die tatsächlichen Großbuchstaben etwas »fülliger« daherkommen. Das gleiche Ergebnis tritt bei der Verwendung von Schriften auf, die ausschließlich für den Printbereich erstellt wurden. Besonders auffällig ist das, wenn die Regel font-variant: smallcaps verwendet wird.

Die Eigenschaften »letter-spacing« und »word-spacing« Änderungen der Buchstaben- und Wortabstände werden normalerweise vermieden. Manchmal müssen die Abstände aber angepasst werden, damit ein Gestaltungselement exakt das gewünschte Aussehen bekommt. Ebenfalls selten ist die Verwendung dieser Eigenschaften, um Textteile zu betonen, so als würde der Sprecher jede Silbe eines Wortes a-a-a-u-u-u-s-s-s-d-e-e-e-h-n-e-e-e-n. Größere Buchstabenabstände können helfen, diese Betonung auch außerhalb von Dialogen darzustellen. Die Werte für letter-spacing und word-spacing werden üblicherweise als kleine em-Werte definiert (z.B. letter-spacing: 0.02em). Dabei gibt es allerdings ein kleines Problem. Auf dem Mac wird dieser Wert zunächst auf ganze Pixel gerundet, bevor er auf die Darstellung angewendet wird. Windows ist da, zumindest wenn ClearType aktiviert ist, etwas flexibler.

Die Eigenschaft »white-space« Das Element pre ist etwas ungewöhnlich, weil es Inhalte, bei denen die Textanordnung eine Rolle spielt (z.B. in Gedichten), so wie im Quellcode definiert darstellen kann. Andererseits wird seine Fähigkeit, Zeilenumbrüche ohne das Einfügen von br- oder zusätzlichen div-Elementen zu realisieren, häufig missbraucht. Definieren Sie für ein Element die Regel white-space: pre, so verhält es sich, als wäre es mit pre-Tags umgeben. Die Verwendung dieser Regel bedeutet außerdem zusätzliche Flexibilität für Entwickler. Auf diese Weise können echte vorformatierte Inhalte von solchen unterschieden werden, deren Darstellung einfach nur sehr genau gesteuert werden muss. Abgesehen vom Standardwert normal, kennt die Eigenschaft drei weitere Werte, die sich von pre in ihrer Handhabung von »weichen« und »harten« Zeilenumbrüchen untescheiden.

Gute Webtypografie in der Praxis Sobald Besucher die Farbpalette einer Website wahrgenommen haben (siehe im Abschnitt »Eigene Farbpaletten erstellen« auf Seite 154), besteht der nächste große Eindruck im Aussehen des Textes. Angesichts der hohen Erwartungen heutiger Besucher bietet das Web endlich die Werkzeuge, mit denen eine große Vielfalt an typografischen Details umgesetzt werden kann. Tatsächlich entspricht die Webtypografie inzwischen wesentlich stärker den Erwartungen an ästhetische Qualität als früher. Leider ist für die Umsetzung ein ziemlich hohes Maß an Theoriewissen nötig. Hat man die Theorie jedoch verstanden, wird die Praxis umso leichter.

242

|

Kapitel 12: Web-Typografie

KAPITEL 13

Saubere und zugängliche Formulare

Für die Webentwicklung ist mehr nötig als CSS-Layout und Typografie. Natürlich gibt es Websites, die den Besuchern nur Informationen anbieten. Webapplikationen müssen dagegen in der Lage sein, auch Informationen von den Besuchern entgegenzunehmen. Das heißt, für Webapplikationen ist das Design und die Implementierung von Formularen lebensnotwendig. Benutzergenerierte Inhalte kommen ohne Formulare nicht aus. Und wo Formulare sind, ist die Gefahr, die Benutzerfreundlichkeit zu verderben, nicht weit. Dieses Kapitel stellt Techniken für das Design und die Implementierung von Formularen vor, die das Risiko schwerwiegender Fehler verringern.

Effektive Formulare erstellen Für die Erstellung nützlicher Formulare reicht die Kenntnis des nötigen Markups nicht aus. Es ist mindestens ebenso wichtig, dass Sie verstanden haben, wie Formulare funktionieren.

Webapplikationen, Benutzerperspektive und Design-Entscheidungen Stellen Sie sich vor, Sie hätten eine SQL-Datenbank mit einer Sammlung von Gedichten. Die Datenbank bietet zahllose Möglichkeiten, den Inhalt zu sortieren und anzuordnen. Das Herz dieser imaginären Website beschreibt, wie die Tabelle (hier am Beispiel von MySQL) aufgebaut ist. Der Code ist mehr oder weniger für Menschen lesbar: CREATE TABLE gedichte ( id autor_id hinzugefuegt_datum veroeffentlicht_datum besprechung herausgeber_id buch_id sprache_id originalsprache_id

SERIAL, MEDIUMINT, DATETIME DATETIME, TEXT, SMALLINT, MEDIUMINT, SMALLINT, SMALLINT,

|

243

randbemerkungen titel uebersetzer_id text

TEXT, VARCHAR(1024), MEDIUMINT, MEDIUMTEXT

);

Um die Lesbarkeit zu erleichtern, haben wir hier keine zusätzlichen Definitionen für die Tabelle aufgeführt. Ein Blick auf die Tabellenstruktur reicht einem erfahrenen Applikationsentwickler, um zu erkennen, nach welchen Kriterien das Design des Datenbank-Backends der Website aufgebaut ist. So ist zu erkennen, dass die Informationen zu Autor, Übersetzer und Website-Betreiber (Herausgeber) in separaten Tabellen der gleichen Datenbank gespeichert sind. Wenn man die Struktur aus der Sicht des Benutzers betrachtet, stellt man fest, dass bestimmte Ansichten der Site auch ohne hohe Ressourcenanforderungen möglich sind. Diese Ansichten beeinflussen alle anderen Aspekte der Site, besonders ihre Informationsarchitektur und den Entwicklungsprozess. Folgende Informationen lassen sich mit einfachen SELECT-Abfragen darstellen: • Autor • Erstveröffentlichung • Ursprünglich erschienen in (Buch/Sammlung) • Anzeigesprache • Quellsprache • Titel • Übersetzer Neben diesen Ansichten ermöglicht das Feld veroeffentlicht_datum den einfachen Export neuer Inhalte als RSS-Feed, während andere Felder, insbesondere text einen eigenen Zusammenhang für die Volltextsuche schaffen. Für alle diese Ansichten gibt es mehrere Möglichkeiten, die Formulare und Inhaltstabellen anzulegen, mit denen der Inhalt gefunden werden kann. Ist der fragliche Inhalt benutzergeneriert, sind die Designentscheidungen für das Formular zum Veröffentlichen mindestens genauso vielfältig. Der einfachste Ansatz besteht in der Verwendung des CRUD-Konzepts.

Benutzerschnittstellen nach Funktion ordnen Wenn wir uns den Inhalt als Datensätze vorstellen, gibt es vier Aktionen, die damit möglich sind. Diese werden im Englischen mit CRUD abgekürzt. CRUD steht für create (erstellen), read (lesen), update (aktualisieren) und delete (löschen). In den nachgestellten Klammern stehen die entsprechenden SQL-Anweisungen:

244

|

Kapitel 13: Saubere und zugängliche Formulare

Erstellen (INSERT, CREATE) Erstellen von neuen Datensätzen oder Tabellen. Formulare, die diese Funktion nutzen, haben oft leere Felder oder solche, die mit Standardwerten gefüllt sind. Lesen (SELECT) Lesen und Anzeigen vorhandener Datensätze, ohne die Möglichkeit, diese zu überschreiben. Die einfachsten Formulare, die diese Funktion nutzen, implementieren beispielsweise eine Volltextsuche. Auf Websites, auf denen nur navigiert werden kann, die aber nicht durchsucht werden können, findet der Zugriff auf diese Funktion allein über Hyperlinks statt. Aktualisieren (UPDATE) Das teilweise oder komplette Ändern eines Datensatzes. Gut erstellte Applikationen verwenden hierfür Formulare, die denen für das Anlegen neuer Datensätze entsprechen. Hierbei werden die Formularfelder zuerst mit den Werten des bestehenden Datensatzes gefüllt. Löschen (DELETE, DROP) Vollständiges Entfernen eines oder mehrerer Datensätze. Normalerweise haben Benutzer nicht die Möglichkeit, Datensätze tatsächlich zu löschen. Stattdessen werden »gelöschte« Daten aus rechtlichen und praktischen Gründen nur von der Darstellung ausgenommen. Die wirkliche Löschung der Daten bleibt dem Website-Betreiber überlassen. Bei der Erstellung von Applikationen und Formularen um diese Funktionen herum ist gesunder Menschenverstand gefragt. Viele der folgenden Richtlinien beziehen sich direkt auf das Design von Schnittstellen und Implementierung. Stylesheet-Regeln für Formulare sollten zumindest einige der aufgeführten Punkte berücksichtigen.

Zehn Regeln für effektive Webformulare und -applikationen Drei Grundsätze sind für effektive Webapplikationen wichtiger als alles andere: Sicherheit, Einfachheit und Transparenz. Die folgenden zehn Regeln sind für die Umsetzung dieser Grundsätze unentbehrlich. 1. Fordern Sie nur Informationen an, die Sie wirklich brauchen. Die knappste Ressource des Besuchers ist vermutlich seine Zeit. Nehmen Sie Rücksicht darauf (und verbessern Sie dabei auch gleich die Sicherheit), indem Sie Ihre Formulare so knapp und klar wie möglich gestalten. Weitere Formulare können später aufgerufen und Nutzerdaten bei Bedarf aktualisiert werden. 2. Unterscheiden Sie benötigte Formularfelder von optionalen. Verwenden Sie einen visuellen und einen textbasierten Hinweis, um anzuzeigen, dass ein bestimmtes Formularfeld ausgefüllt werden muss, damit das Formular erfolgreich abgeschickt werden kann. Müssen alle Felder ausgefüllt werden, weisen Sie in den Anweisungen deutlich darauf hin.

Effektive Formulare erstellen

|

245

3. Verwenden Sie klare Anweisungen und Fehlermeldungen. Kommt es in Ihrer Webapplikation zu einem Fehler, weil ein Benutzer sich nicht an die Anweisungen gehalten hat, sollten Sie die Probleme so klar und deutlich wie möglich beschreiben. Das gilt selbst für das einfachste E-Mail-Formular. 4. Erklären Sie im Voraus, welche Folgen das erfolgreiche Abschicken eines Formulars hat. In vielen Fällen, besonders bei Suchfeldern, ist klar, was nach dem erfolgreichen Abschicken eines Formulars passiert. Abgesehen von diesen Fällen, wird der Benutzer vorher wissen wollen, was er davon hat, Ihnen seine Informationen zu überlassen, besonders wenn es sich um wertvolle Informationen handelt. Beantworten Sie seine Fragen so deutlich wie möglich. Aus dem gleichen Grund sollten Sie eine Warnmeldung ausgeben, sofern die Ergebnisse nicht den Erwartungen entsprechen. 5. Seien Sie RESTful: Machen Sie Ihre Applikation nicht von unzuverlässigen Annahmen über den Browser oder bestimmte Sitzungsdaten abhängig. Wie im Anhang beschrieben wird, ist HTTP ein zustandsloses Protokoll. REST (REpresentational State Transfer) beschreibt eine Praxis, diese Zustandslosigkeit in der Architektur HTTPbasierter Dienste zu berücksichtigen. Gehen Sie nicht davon aus, dass der Besucher während der aktuellen Sitzung bereits andere Teile Ihrer Applikation besucht hat, es sei denn, Sie verwenden einen Mechanismus, mit dem die Annahmen im Voraus überprüft werden können (z.B. eine Session-ID). 6. Verwenden Sie Feldtypen, die die feinmotorische Kontrolle Ihrer Besucher nicht überfordern. Verwenden Sie Formularelemente wie select, checkbox und radio für eindeutige Angaben, wie boolesche Werte und Regionenlisten. Wird der Typ checkbox für boolesche Werte benutzt, sollten Sie nur ein Feld dieses Typs verwenden. Gestalten Sie das Formular so, dass alle nicht beliebigen Auswahlmöglichkeiten sichtbar sind. Die einzige Ausnahme davon ist der Fall, in dem die Liste der Wahlmöglichkeiten lang (und vorhersagbar) genug ist, um das Scrollrad oder die »Nach unten«-Taste zu verwenden, um zu einem bestimmten option-Feld zu gelangen. Listen vom Typ select multiple sollten Sie möglichst überhaupt nicht benutzen. 7. Versehen Sie die Formularelemente prinzipiell mit den entsprechenden label-Elementen. Das Element label ist deutlich mehr als nur semantischer Blödsinn. Es ist ein aktiver Teil der Schnittstelle, die mit einem bestimmten Formularelement verbunden ist. Hierfür gibt es das Attribut for. Interagiert ein Benutzer mit einem labelElement, z.B. indem er es anklickt, erhält das Formularelement mit dem in for angegebenen id-Wert den Fokus. 8. Machen Sie Benutzereingaben so lesbar wie möglich. Das heißt: Konzipieren Sie kurze Formulare. Gestalten Sie Texteingaben so, dass die größtmögliche Menge an Eingaben sichtbar ist, und stellen Sie die Textgröße so ein, dass sie mindestens genauso groß wie der Haupttext Ihrer Seite ist, vielleicht sogar größer. Gleichzeitig sollten Sie das Formular möglichst nicht auf mehrere Seiten verteilen. Hierdurch entstehen unnötige Abhängigkeiten innerhalb Ihrer Applikation, die schnell zu verwaisten Sessions führen können.

246

|

Kapitel 13: Saubere und zugängliche Formulare

9. Halten Sie sich streng an feste Werte für die Größe der Formularfelder, Textausrichtung und Spaltenbreiten. Haben Formularelemente die gleiche Größe und Ausrichtung, kann der Benutzer das Formular leichter visuell erfassen und muss nicht so oft die Maus benutzen. Kleine Textfelder sollten bevorzugt werden, weil hierdurch die Lesbarkeit der Eingaben erleichtert wird. 10. Konzentrieren Sie die Benutzeraktivität auf eine der grundsätzlichen »CRUD«-Aktionen: Erstellen, Lesen, Aktualisieren, Löschen. Das Risiko von Benutzerfehlern kann stark verringert werden, wenn Sie jede Applikationsschnittstelle auf bestimmte Kombinationen aus Aktion und Anwendungsbereich beschränken. Das Gleiche gilt für den Bedarf an Bestätigungsdialogen. Neben diesen zehn Regeln gibt es noch einige mehr, deren Befolgung sich lohnt. Die hier genannten treffen aber auf fast alle Anwendungsszenarien zu. Wollen Sie die Benutzbarkeit Ihrer Formulare weiter verbessern, empfehle ich Ihnen die folgenden Bücher: • Web Form Design: Filling in the Blanks, von Luke Wrobleski (Rosenfeld Media) • Don’t Make Me Think: Web Usability – Das intuitive Web, 2. Auflage, von Steve Krug (Mitp)

Einschätzung und Struktur Gute Formular-Implementierungen sind ein Beispiel für Priorität und Einfachheit. Um dieses Ziel zu erreichen, müssen Sie zuerst genau wissen, welche Informationen das Formular vom Benutzer abfragen soll. In manchen Fällen sind die Anforderungen und das dafür nötige Design hinreichend bekannt. In anderen Situationen sind zu viele Einschränkungen im Spiel, wie Firmenkultur, rechtliche Anforderungen, Erwartungen seitens der Besucher oder die Verwendung bzw. die Ablehnung von Ajax. In diesem Fall ist eine sofortige Implementierung nicht möglich. Ich weise auf diese Dinge hin, damit das Design bedachtsam und vorsichtig umgesetzt wird. Formulare sind zu wichtig, als dass unsinnige, blind getroffene Designentscheidungen toleriert werden könnten. Das Absichern von Applikationen ist zwar ein wichtiges Thema, kann aber aus Platzgründen in diesem Buch nicht behandelt werden. Bitte treffen Sie die üblichen Sicherheitsmaßnahmen. Hierzu gehört besonders die Absicherung von Formulareingaben gegen SQL-Injection-Angriffe.

Einschätzung und Struktur

|

247

Anforderungen ermitteln Vor dem Versuch, das visuelle Material wie Layoutraster und Designbestandteile zu erstellen, müssen Sie zuerst Form und Funktion (wenn Sie so wollen) der Formularschnittstelle ermitteln. Diese Aufgaben lassen sich wie folgt unterteilen und ordnen: Einschätzung (Assessment) Finden Sie heraus, welche Vorteile und Anforderungen das Formular sowohl für den Besucher als auch den Betreiber mit sich bringt. Auch wenn es offensichtlich erscheint, gibt es viel zu viele Entwickler, die Formulare nur aus ihrem eigenen Blickwinkel betrachten. Werden die Anforderungen der Besucher einbezogen, kann dies zu vollkommen anderen Designentscheidungen führen. Geltungsbereich (Scope) Webapplikationen und andere Bestandteile, bei denen große Informationsmengen vom Besucher abgefragt werden, machen es nötig, die Aufgaben in kleinere handhabbare Schritte zu unterteilen. Wenn jedes Formular für einen klar definierten Aufgabenbereich zuständig ist, sind Sie dem Ziel eines idealen Formulars schon ziemlich nahe: nicht zu lang, nicht zu kurz – gerade richtig. Auswahl Stellen Sie sich die Frage: Wer hat Vorteile, wenn er die angeforderten Informationen auf eine bestimmte Weise erhält?

Hierfür gibt es drei mögliche Antworten: der Besucher, der Website-Betreiber oder beide. Felder, die nur Vorteile für den Website-Betreiber bringen, sollten entfernt werden, mit einem Anreiz zum Ausfüllen kombiniert werden oder optional sein. Prioritäten In den meisten Fällen kann das Besucherinteresse als einfacher Imperativ mit einem einzelnen Objekt beschrieben werden. »Nachricht schicken«, »Benutzerkonto anlegen« oder »Gutscheincode erhalten« sind alle Beispiele für häufige Ziele der Besucher. Manchmal enthält das Formular Felder, die sich nicht eindeutig auf das Ziel beziehen. Dann sollten Sie dem Besucher erklären, was er davon hat, das Feld auszufüllen, und es eher am Ende des Formulars platzieren. Datentypen Geben Sie an, welche Art von Daten in die einzelnen Formularfelder eingegeben werden müssen, und verwenden Sie das entsprechende HTML-Element. Tabelle 13-1 soll Ihnen bei der Entscheidung helfen.

248

|

Kapitel 13: Saubere und zugängliche Formulare

Tabelle 13-1: Formularelemente nach Datentyp Datentyp

Element

Weitere Erwägungen

Beliebiger Text oder Zahlen (kurz)

input type="text"

Am besten geeignet für Wörter, kurze Sätze und Zeichenketten (z.B. URIs)

Beliebiger Text (lang)

textarea

Am besten geeignet für Sätze, Absätze und beliebig lange Listen, mit durch Zeilenumbrüche getrennten Daten wie URIs und Auftragsnummern. Ampersand-Zeichen (&) müssen als & kodiert werden, bevor der Inhalt von textareaFeldern zum Aktualisieren von Inhalten verwendet werden kann.

Passwörter

input type="password"

Zusätzliche Optionen (z.B. »Newsletter abonnieren«)

input type="checkbox"

Dargestellt wie input type="text". Daten werden als Klartext an den Server übertragen und müssen ggf. über einen anderen Mechanismus verschlüsselt werden. checked="checked" für aktive Inhalte nötig, wenn XHTML verwendet wird; Opt-Out-Wahlmöglichkeiten sollten prinzipiell durch ein nicht aktiviertes Element dargestellt werden.

Zwei oder drei Auswahlmöglichkeiten

input type="radio"

Enthalten in einem einzelnen fieldset; checked="checked" ist für aktive Inhalte nötig, wenn XHTML verwendet wird; Optionen, die sich gegenseitig ausschließen, müssen den gleichen Wert für name haben. selected="selected" für aktive Inhalte nötig, wenn XHTML verwendet wird; dem Benutzer unbekannte Werte sollten sofort und ohne Scrollen lesbar sein.

Auswahl einzelner Optionen aus einer Liste (nicht vom Benutzer veränderbar)

select

Auswahl mehrerer Optionen aus einer Liste (nicht vom Benutzer veränderbar)

select multipleinput type="checkbox"

Am besten in einem einzelnen fieldset enthalten, das von sorgfältig gewählten Werten für width und overflow profitiert; siehe auch »Zusätzliche Optionen« und »Auswahl einzelner Optionen aus einer Liste«.

Dateien hochladen

input type="file"

Siehe im Abschnitt »Die POST-Methode und das Hochladen von Dateien« auf Seite 256.

ASCII-kodierte Sitzungs- oder benut- input type="hidden" zerspezifische Daten

Alternative zur Verwendung von Cookies zur Sitzungsverwaltung. Die Daten verfallen nicht komplett, bis das Browserfenster geschlossen wird und der Seitencache geleert wurde.

Einschätzung und Struktur

|

249

Tabelle 13-1: Formularelemente nach Datentyp (Fortsetzung) Datentyp

Element

Weitere Erwägungen

Buttons zur Interaktion mit der Benutzerschnittstelle

input type="button", button

Am besten über ein clientseitiges Script eingefügt. Da diese Buttons nur Events auslösen können, profitieren sie von der Zuweisung eines speziell für Buttons reservierten class-Wertes; anhand der CSS-background-*-Eigenschaften kann anstelle des Buttons auch ein Bild verwendet werden; die Verwendung des Elements button bietet feinere Kontrolle über die Darstellung als z.B. input="button", wird aber nicht überall verlässlich unterstützt.

»Abschicken«-Button als Text

input type="submit"

Profitiert von der Zuweisung eines class-Werts, der allein für die Darstellung von Buttons reserviert ist.

»Abschicken«-Button als Bild

input type="image"

Wie bei normalen Bildern sollte auch für dieses Element ein alt-Wert angegeben werden; wird dieses Element in einem grafischen Browser aktiviert, werden die beim onlick-Event empfangenen x- und y-Koordinaten des Cursors kodiert. Skripte, die diese Werte verwenden, sollten ein Standardverhalten besitzen, um Benutzern von Hilfstechnologien oder reinen Textbrowsern die Benutzung zu ermöglichen. Alternativ dazu können Sie den deutlich zugänglicheren Ansatz wählen und dieses Feature komplett vermeiden.

Die in Tabelle 13-1 gezeigten Richtlinien sind nicht immer bindend. So könnte der Mechanismus für eine Bewertung auf einer bestimmten Skala (z.B. von 1 bis 10) entweder mit input-tpye="radio"-Elementen oder auch über eine select-Liste realisiert werden.

Markup und Struktur Sobald die Funktion und Reihenfolge Ihrer Formularfelder feststeht, können Sie sich mit dem Markup beschäftigen. Neben den in Tabelle 13-1 beschriebenen Elementen für Formularfelder kommen hierbei die folgenden vier Elemente zum Einsatz: fieldset

Das Element fieldset ist nur in Formularen gültig. Der Zweck lässt sich am Namen ablesen: Es schafft einen Kontext für ähnliche, aufeinander folgende Elemente. Weitere Details können über den Inhalt des Elements legend hinzugefügt werden. Typische Kandidaten für fieldset sind beispielsweise Gruppen von Radiobuttons, Ankreuzfeldern, Feldern für Datums- und Uhrzeitangaben oder Textfelder, in die der Benutzer bestimmte Angaben zu einem Thema machen soll.

250

|

Kapitel 13: Saubere und zugängliche Formulare

legend

Das Element legend validiert nur, wenn es innerhalb eines fieldset-Elements steht. Auf die gleiche Weise, wie label sich auf ein bestimmtes Formularelement bezieht, muss legend einen klaren Bezug zu den entsprechenden Paaren aus label und Formularelement besitzen. Innerhalb eines fieldsets ist jeweils nur ein legend-Element erlaubt. ul und li

Das meiste Formular-Markup tritt paarweise auf. label bezieht sich auf ein bestimmtes Formularelement, während legend für eine Gruppe aus Paaren von label und einem Element zuständig ist. Im ersten Fall muss man das Paar oft mit einem gemeinsamen Elternelement umgeben. Da Formulare beliebige Blockelemente enthalten können, besteht die beste Wahl in einem Listeneintrag (li), der seinerseits in einem ul-Element enthalten sein muss. Der zweite Fall ist etwas widersprüchlich. Einige Implementierer bevorzugen es, die Formularelemente mit einem Element zu umgeben, das sie von den übrigen Teilen des Inhalts unterscheidet. Andere setzen eher darauf, diesen Unterschied implizit zu vermitteln. Hierbei sollte man bedenken, dass Bildschirmlesegeräte und andere Hilfstechnologien Listen mit zusätzlichen Funktionen versehen, wodurch die Benutzer möglicherweise mehr Zeit brauchen, um das Formular zu erfassen. Als direktes Ergebnis dieser Überlegungen könnte der Markup-Code für ein einfaches Anmeldeformular ungefähr so aussehen:
<span>Anmelden
• Benutzername:
• Passwort:


In einem komplizierteren Formular, das beispielsweise eine Reihe von Radiobuttons (input type="radio") enthält, werden diese Formularelemente und das dazugehörige label-Element mit einem eigenen fieldset-Element umgeben. Dieses wird dann im Quellcode an der Stelle eingefügt, an der normalerweise ein schlichtes input type="text"oder select-Element stehen würde, wie in Abbildung 13-1 gezeigt. Außerdem erhält das fieldset sein eigenes label-Element, wie gleich erklärt wird. Online-Beispiele für die zweite Methode finden Sie außerdem auf der Website zu diesem Buch (http://www.htmlcssgoodparts.net) und im Opera Web Standards Curriculum zum Thema fortgeschrittene Formulargestaltung unter http://dev.opera.com/articles/view/34-styling-forms/. Einschätzung und Struktur

|

251

Abbildung 13-1: Die Darstellung typischer Paare aus Beschriftung (»label«) und Formularfeld; Vergleich zu Anwendungsbeispielen für das Element »fieldset«

Im vorigen Beispiel gibt es ein paar Details, die beim einfachen Lesen nicht gleich ins Auge springen: Die Attribute length und maxlength wurden nicht benutzt. Auf den meisten Plattformen kann das Attribut length durch die CSS-Eigenschaft width ersetzt werden. Das Attribut maxlength hat als Sicherheitsmechanismus auch nur beschränkten Nutzen. Andererseits schränkt die Verwendung dieser Attribute die Usability nicht ein, sondern kann sie in manchen Fällen sogar verbessern. Im legend-Element des Formulars befindet sich ein anonymes span-Element. Das legend-Element ist äußerst gestaltungsresistent, span dagegen nicht. Der Quellcode für das Formular ist sorgfältig formatiert, was auf den ersten Blick mit dem Verhalten vieler Inline- und Inline-Block-Elemente nicht vereinbar zu sein scheint. Andererseits ist die Lesbarkeit des Quellcodes gerade bei Formularen wichtig. Zudem wird die Darstellungsrolle der verschiedenen Elemente im Stylesheet sowieso als display: block definiert. Der Submit-Button ist nicht in der Liste für das Formular-Grundgerüst enthalten. Außerdem besitzt er zwei class-Werte, die direkt auf seine Funktion verweisen. Die Funktion dieses Elements und die ausdrückliche Definition seines value-Attributs machen die Verwendung von li und label in diesem Fall überflüssig. Trotzdem werden spezielle Stildefinitionen gebraucht, um Elemente wie dieses an den gemeinsamen Layout-Achsen auszurichten. Außerdem zwingt uns die mangelnde Unterstützung von Attributselektoren in Internet Explorer zu einem ziemlich groben Vorgehen, um ein ideales Bildschirmlayout zu erzeugen. Dem Formular selbst wurde ein id-Wert zugewiesen. Das für das Formular definierte id-Attribut ist wahrscheinlich nicht nötig. Wenn Sie allerdings Ajax einsetzen oder mehr als ein Formular auf der gleichen Seite verwen-

252

|

Kapitel 13: Saubere und zugängliche Formulare

den, kann die Verwendung von id die Entwicklungszeit verkürzen und überflüssigen Code vermeiden helfen. In vielen Arbeitsumgebungen kann es außerdem sinnvoll sein, auch die Listeneinträge (li) und den Abschicken-Button mit eigenen id-Werten zu versehen. Dies gilt besonders dann, wenn für die clientseitige Fehlerbehandlung des Formulars komplexe Stilregeln nötig sind. Wird im Formular zwischen notwendigen und optionalen Feldern unterschieden, sollten die einzelnen Listeneinträge, die als Container dienen, ebenfalls mit den entsprechenden class-Attributen und Werten versehen werden. Wenn Sie die Struktur und das Markup für ein Formular festlegen, sollten Sie die folgenden drei Ziele nicht aus dem Auge verlieren: • Stellen Sie sicher, dass jedes Paar aus label und Formularfeld genügend Referenzpunkte zur Kaskade, der DOM-API und den Erfordernissen besitzt, die für die Kompatibilität mit Hilfstechnologien nötig sind. • »Überladen« Sie das Formular, um Darstellungsfehlern im Internet Explorer, speziell in Version 6, vorzubeugen. • Machen Sie es den Applikationsentwicklern so einfach wie möglich, einheitliche, modulare Ausgaben zu erzeugen. Das letzte Ziel ist besonders schwer zu erreichen. Der Aufwand kann sich trotzdem lohnen, wenn es um die Erstellung einer kompletten Webapplikation geht. Vereinheitlichter und modularer Markup-Code ist deutlich leichter mit objektorientierten Skriptprogrammen zu verarbeiten als konzeptloser Elementesalat. Bevor wir uns mit den Darstellungsaspekten von Formularen beschäftigen, gibt es noch ein paar Details – einige sind nicht so offensichtlich, andere wichtig –, die direkt mit dem Markup und Verhalten von Formularen zu tun haben.

Grundsätzliche Struktur, Darstellung und Verhalten von Formularen Wenn Sie eher von einem designerischen oder redaktionellen Hintergrund kommen, brennt Ihnen vermutlich eine Frage unter den Nägeln: Was passiert eigentlich nach dem Abschicken mit den Formulardaten, und wie erhält der Benutzer die nötigen Rückmeldungen? (Dies war übrigens meine erste Frage, als ich 1999 an meiner ersten großen Webapplikation arbeitete.) Zudem gibt es beim Markup und Verhalten von Formularen ein paar Eigenheiten, die vielleicht erfahrenen Entwicklern, aber nicht allen Lesern bekannt sind.

Grundsätzliche Struktur, Darstellung und Verhalten von Formularen

|

253

Vom Formular ausgelöste GET-Requests Wenn Sie ein wenig Zeit mit dem Markup von Formularen verbracht haben, ist Ihnen vermutlich aufgefallen, dass jedes form-Element ein action-Attribut und jedes enthaltene Formularelement (Textfeld, Radiobutton usw.) ein name-Attribut besitzt. Das name-Attribut wird mit dem Wert des Formularfelds bzw. dem Inhalt des value-Attributs gekoppelt und vom Browser wie folgt kodiert: inhalt=Hallo+Welt%21

Dies ist die literale Zeichenkette, wie sie an den Webserver übertragen wird. In normaler Sprache steht hier: »Hallo Welt!« Für das Versenden dieser Daten an den Webserver stehen zwei verlässliche Methoden zur Verfügung: GET und POST. Bei der GET-Methode werden die Formulardaten an den URL angehängt, der im action-Attribut des Formulars angegeben ist, zum Beispiel: http://example.com/zeigmeinzeug.php?inhalt=Hallo+Welt%21

Beachten Sie das literale Fragezeichen (?), das den Namen der angeforderten Ressource (hier ein Skript namens zeigmeinzeug.php im Wurzelverzeichnis des Webservers und die Formulardaten voneinander trennt. Weitere Paare aus Name und Wert werden durch literale Ampersand-Zeichen (&) voneinander getrennt: http://example.com/zeigmeinzeug.php?inhalt=Hallo+Welt%21&farbe=rot&groesse=xx-large

Obwohl sich die resultierenden URIs im Prinzip nicht von URIs ohne Formulardaten unterscheiden, hat das Abschicken der Daten per Formular einen Vorteil: Die Kodierung der Daten für die Übertragung muss nicht von Hand vorgenommen werden, sondern wird vom Browser automatisch durchgeführt. Der Benutzer muss sich also nicht die halbe ASCII-Tabelle merken, um daraus die entsprechenden Werte für die Kodierung selbst zu finden. Da Ampersand-Zeichen eine besondere Rolle spielen, müssen sie vor ihrer Verwendung in Werten für href- und src-Attributen selbst kodiert werden, wie hier gezeigt: href="http://example.com/zeigmeinzeug.php?inhalt=Hallo+Welt%21&farbe=rot& groesse=xx-large"

Diese seltsame Notwendigkeit hat in der englischsprachigen Welt zu dem Begriff »damnpersand« (»Verdammtpersand«) geführt. Das Wort hat seinen Ursprung in der Verwendung nicht geschützter Ampersand-Zeichen in Benutzereingaben und den vergleichsweise miserablen Ausgaben von Dritthersteller-Plugins. Dabei stehen die Ampersand-Zeichen oft als Einziges zwischen sorgfältig geschriebenem Markup und der erfolgreichen Validierung eines Dokuments. Wurde das Skript, das die kodierten Daten entgegennimmt, als standardmäßig zurückgegebene Ressource eingerichtet (in Apache mit der Direktive DirectoryIndex) und ist der entsprechende Skriptinterpreter auf dem Webserver richtig konfiguriert, kann der Name des Skripts auch komplett weggelassen werden:

254

|

Kapitel 13: Saubere und zugängliche Formulare

href="http://example.com/?inhalt=Hallo+Welt%21&farbe=rot&groesse=xx-large"

Beachten Sie, dass der Internet Explorer die Länge von URIs auf 2.083 Zeichen beschränkt, von denen höchstens 2.048 auf die Kombination aus Pfadangabe und kodierten Formulardaten entfallen dürfen. Überschreitet ein URI dieses Limit, erhält der Benutzer von IE eine Fehlermeldung.

URL-Kodierung im Detail: ASCII-Entities In den vorigen Beispielen ist Ihnen vermutlich aufgefallen, dass anstelle des Ausrufungszeichens (!), das in RFC 3986 als »reserviertes Zeichen« vermerkt ist, der Code %21 verwendet wurde. Eine vollständige Liste dieser Zeichen sehen Sie in Tabelle 13-2. Tabelle 13-2: Reservierte Zeichen in URIs und die entsprechenden ASCII-Kodierungen Zeichen

Langer Name

Kodierung

Dezimalwert

Leerzeichen

%20

32

Ausrufungszeichen

%21

33

#

Doppelkreuz

%23

35

%

Prozentzeichen

%25

37

&

Ampersand-Zeichen

%26

38

$

Dollar-Zeichen

%24

36

’

Apostroph

%27

39

(

runde Klammer links

%28

40

)

!

runde Klammer rechts

%29

41

*

Asterisk

%2A

42

+

Pluszeichen

%2B

43

,

Komma

%2C

44

/

Schrägstrich

%2F

47

:

Doppelpunkt

%3A

58

;

Semikolon

%3B

59

=

Gleichheitszeichen

%3D

61

?

Fragezeichen

%3F

63

@

At-Zeichen

%40

64

[

eckige Klammer links

%5B

91

]

eckige Klammer rechts

%5D

93

Literale Leerzeichen werden in URI-Pfaden immer als %20 kodiert; in URL-kodierten Pfaden wie den oben gezeigten wird stattdessen das Pluszeichen verwendet. Das führt zu einigen unglücklichen, aber nötigen Verwirrungen. Will jemand beispielsweise die Zeichenkette 2 + 2 = 4 in ein Formular eingeben, würden die Daten vor dem Abschicken als 2+%2B+2+%3D+4 kodiert.

Grundsätzliche Struktur, Darstellung und Verhalten von Formularen

|

255

Einige der in Tabelle 13-2 beschriebenen Zeichen werden in URI-Pfaden literal verwendet, aber kodiert, wenn sie als Teil von Formulardaten verschickt werden. Für die URL-Kodierung der Benutzereingaben ist kein Zutun der Entwickler notwendig. Allerdings enthalten die meisten im Web verwendeten Skriptsprachen die nötigen Funktionen, um Benutzereingaben in das URL-kodierte Format und wieder zurück zu verwandeln.

Die POST-Methode und das Hochladen von Dateien Wird die Request-Methode für ein Formular als POST angegeben, werden die kodierten Formulardaten nicht als Teil des URI, sondern im Request-Body übertragen. Neben der Möglichkeit, die Grenze von 2.083 Zeichen in URIs zu umgehen, lassen sich POST-Requests auch schwerer vom Benutzer manipulieren. Aus diesen Gründen ist für das Hochladen von Dateien per Formular die POST-Methode nötig. Der Standardwert des Attributs enctype für das form-Element lautet application/x-wwwform-urlencoded. Formulare für das Hochladen von Dateien müssen stattdessen den Wert multipart/form-data verwenden. Gestalter haben leider das Problem, dass das Element input type="file" nicht konsistent mit CSS zusammenarbeitet. Der wichtigste Punkt ist hierbei, dass mit diesem Element zwei Objekte im Browserfenster dargestellt werden: ein Textfeld und ein Button. Aus diesem Grund sind die einzigen CSS-Eigenschaften, mit denen sich einigermaßen vorhersagbare Ergebnisse erzielen lassen, color, background-color und die Eigenschaften, die das Layoutverhalten beeinflussen (wie margin-* und position). Bei der visuellen Gestaltung der Formularelemente für das Hochladen von Dateien sollten Sie daher möglichst konservativ vorgehen, indem Sie davon ausgehen, dass sich die Standarddarstellung nicht ändern lässt.

Die Größe und das Aussehen einzelner Formularelemente anpassen Formularelemente verhalten sich etwas anders als die übrigen HTML-Elemente. • Die Werte von Schrift- und Texteigenschaften werden in Formularelementen nicht über die Kaskade vererbt. Stattdessen müssen die Definitionen über Selektoren direkt für die Formularelemente vorgenommen werden. • Im Gegensatz zu anderen Elementen werden die Formularelemente gemäß dem »Quirks-Modus« dargestellt. Das heißt, alle Box-Eigenschaften (außer margin-*) liegen innerhalb der angegebenen Werte für height und width (falls vorhanden). • Formularelemente (außer textarea) tendieren dazu, Werte für line-height zu ignorieren.

256

|

Kapitel 13: Saubere und zugängliche Formulare

• Abgesehen von input type="file" und dem Inhalt von select-Elementen können allen Formularelementen transparente Hintergründe und eigene Hintergrundbilder zugewiesen werden. • Wurde für ein Eingabefeld vom Typ input type="text" ein Wert für das Attribut length definiert, kann dieser sich auf die berechnete Breite des Textfeldes auswirken. Am besten lässt sich die Darstellung steuern, wenn Sie das Attribut length vermeiden und stattdessen im Stylesheet einen Wert für die Eigenschaft width festlegen, wie in den vorigen Quellcodebeispielen gezeigt wurde. • Die scheinbare Größe von Radiobuttons und Ankreuzfeldern wird nicht per width oder height gesteuert, sondern mit font-size. In aktuellen Browsern lässt sich das Boxmodell-Problem recht einfach lösen. Sie alle unterstützen bereits die CSS3-Eigenschaft box-sizing (in Firefox und Safari momentan allerdings nur als browserspezifische Eigenschaften -webkit-box-sizing bzw. -moz-boxsizing). Folgende Werte sind möglich: content-box

Sorgt dafür, dass ein Element nach dem Strict-Boxmodell dargestellt wird: Die Werte von width und height beziehen sich allein auf den Inhaltsbereich. Innenabstände und Rahmen werden nicht dazugerechnet. Sollen Ihre Formularelemente nach dem standardkonformen Boxmodell dargestellt werden, sollten Sie den Wert content-box verwenden. border-box

Elemente mit diesem Wert werden nach dem Boxmodell im »Quirks«-Modus dargestellt. Innenabstände und Rahmen sind Teil der berechneten Breite bzw. Höhe. Außerdem gibt es beim Element select noch ein paar Dinge zu beachten: • Hat width für ein select-Element den Wert auto, so wird unter normalen Umständen seine Breite an das breiteste enthaltene option-Element angepasst. • Ist die definierte Breite eines select-Elements schmaler als das breiteste enthaltene option-Element, wird die Breite des »Aufklappfensters« in den meisten Browsern beim Aktivieren trotzdem an das breiteste option-Element angepasst. • In Safari ist eine Zuweisung der Eigenschaften font-size für select-Elemente möglich. Alle anderen Darstellungsaspekte werden vom Betriebssystem bestimmt und können nicht verändert werden. • option-Elemente können anhand von optgroup-Elementen zusammengefasst werden, wie in Abbildung 13-2 gezeigt. Besonders lange option-Listen sollten optgroup verwenden, um verschiedene Bereiche voneinander zu trennen, anstatt leere option-Elemente für diesen Zweck zu missbrauchen. • Wurde für eine Option kein Wert für das Attribut value angegeben, so wird stattdessen der dem Benutzer angezeigte Inhalt (z.B. Inhalt) kodiert und an den Server geschickt.

Grundsätzliche Struktur, Darstellung und Verhalten von Formularen

|

257

Abbildung 13-2: Darstellung eines »select«-Elements mit »optgroup«-Elementen am Beispiel von IE, Firefox und Safari

Auf der Website zu diesem Buch finden Sie unter anderem eine Testsuite, die das Verhalten detaillierter beleuchtet.

Prototyping und Layout Sind die Funktionen eines Formulars einmal festgelegt und implementiert, besteht der nächste Schritt darin, das Layout festzulegen, damit das Formular als Prototyp getestet werden kann.

Das Einmaleins des Prototyping Der Prototyp einer Webapplikation hat den gleichen Zweck wie ähnliche nicht-virtuelle Produkte aus dem Labor eines Ingenieurs. Es geht darum, sicherzustellen, dass das Produkt so funktioniert, wie die Designer sich das gedacht haben. Der größte Aufwand beim Prototyping einer Applikation wird getrieben, um dafür zu sorgen, dass der ausführbare Code keine Programmierfehler enthält oder andere Probleme macht. Darüber hinaus ist das Prototyping eine gute Gelegenheit, um die Verwendbarkeit der Benutzerschnittstelle zu testen. Beim Testen von Prototypen betreffen einige Fragen den Benutzer direkt: • Sind die Formulare der Applikation für die Zielgruppe einfach genug zu benutzen? • Führt das geplante Design der Formulare zu irgendwelchen typischen Benutzerfehlern? • Werden bestimmte Felder ständig übergangen, oder wird außergewöhnlich viel Zeit für das Ausfüllen verwendet? • Gibt es Teile in der visuellen Gestaltung und im Design der Applikation, bei denen der Arbeitsaufwand im Vergleich zu den dadurch erlangten Vorteilen unverhältnismäßig hoch ist?

258

|

Kapitel 13: Saubere und zugängliche Formulare

Sämtliche Informationen, die beim Prototyping gewonnen werden, können Einfluss auf die Usability haben. Wir konzentrieren uns hier jedoch auf Markup und CSS. Folgende Dinge sollten möglichst vermieden werden: • Die Beziehung zwischen den Formularfeldern und den entsprechenden label-Elementen ist unklar oder unangemessen. • Die Reihenfolge der Felder entspricht nicht den Prioritäten der Benutzer. • Anweisungen und Warnungen sind schlecht angeordnet, schwer verständlich oder enthalten nicht die nötigen Details. • Bestimmte Designanforderungen sorgen für schwerwiegende Darstellungsfehler. Damit ein Formular als effektiver Prototyp dienen kann, muss er die folgenden Darstellungsanforderungen erfüllen: • Das Layout des Formulars sollte den Konventionen des Layougrids und der einzelnen Bausteine folgen. • Visuelle Akzente sind nicht nötig, trotzdem sollten die Schrift- und die Hintergrundfarbe einen ausreichenden Kontrast aufweisen. • Anweisungen und Hinweise auf erforderliche Daten sollten so dargestellt werden wie später auf der fertigen Website. • Soll in der fertigen Webapplikation Ajax verwendet werden, sollte es auch in den Prototypen schon implementiert sein, zumindest an den wichtigsten Stellen. Es ist die Aufgabe des Gestalters, sicherzustellen, dass die Ausgaben von Ajax die hier genannten Anforderungen erfüllen. Im folgenden Abschnitt finden Sie einige Design-Templates für das Layout von Formularen.

Design-Templates, Grundstile und Formular-Layout Standardmäßig werden Formularelemente als Inline-Block-Elemente dargestellt, die Beschriftungen (label) dagegen als Inline-Elemente. Da diese Elemente oftmals als Float (float: left/float: right) definiert werden und das Vorhandensein von WhitespaceZeichen Auswirkungen auf die Darstellung von Inline-Block-Elementen haben kann, ist es in der Regel einfacher, die Darstellungsrolle per display: block anzupassen. Sobald andere Elemente ins Spiel kommen, könnten die folgenden konservativen Grundstile zum Zurücksetzen der Darstellung verwendet werden: form, form ul, form li, fieldset, textarea { label, input, select, textarea, form li span { form ul, form li { form li { fieldset {

margin: 0; padding: 0; } display: block; } list-style-type: none; } clear: both; height: 1%; overflow: auto; } border: 0; }

Prototyping und Layout

|

259

Die empfohlenen Layout-Templates für Formulare sehen Sie unten, in der Reihenfolge ihrer Attraktivität geordnet. Die Stil-Beispiele beziehen sich jeweils auf den im Abschnitt »Einschätzung und Struktur« auf Seite 247 gezeigten Markup-Code. Die Angaben für width in den folgenden Beispielen dienen nur der Demonstration. Beachten Sie, dass die margin-Werte für die Formularfelder zu den width-Werten der entsprechenden label-Elemente passen sollten.

Beschriftungen links neben den Formularfeldern label, form li span { float: left; width: 9em; padding-right: 1em; } input, select, textarea { float: left; margin-left: 10em; } fieldset label, fieldset input { float: left; } fieldset label { clear: left; width: 4.25em; padding-right: .75em; } fieldset input { margin-left: 5em; margin-right: 1.5em; }

Wie das vorige Beispiel, allerdings werden Beschriftungen und Formularfelder zusätzlich an einer gemeinsamen rechten Achse ausgerichtet label, form li span { text-align: right; }

Formularfelder unterhalb der Beschriftungen form li { clear: both; height: auto !important; overflow: visible !important; } fieldset label, fieldset input { float: left; } fieldset label { clear: left; width: 4.25em; padding-right: .75em; } fieldset input { margin-left: 5em; margin-right: 1.5em; }

Beschriftungen rechts neben den Formularfeldern Sie können die gleichen Stile wie für die Darstellung der Beschriftungen links der Formularfelder verwenden. Allerdings müssen die Werte für float und margin hierfür umgekehrt werden. Mehrspaltige Anordnung von Paaren aus label- und Formularelementen Trennen Sie die label/Element-Gruppen in die benötigte Anzahl von Listen auf, und verwenden Sie die bereits gezeigten Layout-Templates, um die Darstellung für die einzelnen Spalten zu steuern. Die besten Ergebnisse erzielen Sie, wenn Sie die Grundstile um die folgenden Regeln ergänzen: form { height: 1%; overflow: auto; } form ul { float: left; width: 45%; margin-right: 5%; }

Wenn Sie versuchen, diese Beispiele auf einen funktionierenden Prototyp anzuwenden, werden Sie merken, dass die Ergebnisse nicht exakt auf das Layoutraster passen. Dies gilt besonders für Radiobuttons und Ankreuzfelder. Die Darstellung dieser Elemente wird meist vom verwendeten Betriebssystem übernommen. Die damit verbundenen Probleme werden in Kapitel 14 besprochen. Beim ersten Stylesheet-Entwurf scheinen die Dinge nie hundertprozentig nach Plan zu laufen. Das hat oft mit der Position der Formulare in der Kaskade zu tun. Um Probleme zu vermeiden, sollten Formulare möglichst weit oben in der Hierarchie der Elemente definiert

260

|

Kapitel 13: Saubere und zugängliche Formulare

werden. Um die Darstellung der Formularelemente anzupassen, werden Sie ihre Werte für width und height individuell anpassen müssen. Wollen Sie em-basierte Mikrogrids (siehe im Abschnitt »Layouttypen und Hilfslinien-Raster« auf Seite 108) verwenden, müssen Sie außerdem für jedes Formular einen eigenen Wert für font-size festlegen. In der Praxis werden Sie auf dem Weg zum fertigen Formular-Layout immer wieder testen und die entsprechenden Anpassungen vornehmen müssen. Sie werden eine Vielzahl von class-Werten definieren, eine Menge von Box-Eigenschaften verwenden und viele Feinabstimmungen für einzelne Formularelemente vornehmen müssen. Besonders komplexe Formular-Layouts erfordern möglicherweise feinste Änderungen an einzelnen Feldern, zum Beispiel: form#supportTicket li#schwere input { padding-top: .333em; }

In diesem Fall lässt sich die Funktion des dazugehörigen Formularfelds an seinem Selektor ablesen. Es handelt sich um ein Formular zum Anfordern eines Support-Tickets. Es enthält mehrere Kontrollelemente, mit denen der Besucher auswählen kann, wie schwerwiegend (schwere) sein Problem ist. Dies wird sehr wahrscheinlich über eine Reihe von Radiobuttons (ggf. auch mit select-Elementen) realisiert. Der Versuch, jedes mögliche Layout-Szenario zu beschreiben, würde zu einem sehr dicken Buch führen. Zusätzliche Testsuiten, Regel-Bibliotheken und Tipps finden Sie auf der Website zu diesem Buch.

Einheitliche Gestaltung von gleichen Formularelementen Einige Layout-Probleme bei Formularen tauchen sehr häufig auf: • input type="text", textarea und select-Elemente müssen unterschiedlich lange Eingaben entgegennehmen können, z.B. Straßen- und Ortsnamen. • input type="submit" am Ende von Formularen • Regeln wie input { border: 1px solid rgb(0,0,0); ... }, die später für Ankreuzfelder (input type="checkbox") und Radiobuttons (input type="radio") wieder zurückgesetzt werden müssen • Nicht oder missverständlich beschriftete Kontrollelemente, wie Datumsangaben, Bewertungsskalen und Telefonnummern werden in ihre Einzelteile aufgeteilt (z.B: Vorwahl, Telefonnummer oder Tag, Monat, Jahr). • Zurücksetzen der Außenabstände für Radiobuttons und Ankreuzfelder Die mangelnde Unterstützung von Attribut-, Nachfahren- und Kindselektoren im Internet Explorer ist einer der »Schlechten Seiten«. Die Folgen sind im Bezug auf die Erstellung von Stylesheet-Regeln für Formulare besonders ungünstig.

Prototyping und Layout

|

261

Den gerade erwähnten Problemen begegnet man am besten durch die Verwendung von Klassennamen, die sich an der Länge der erwarteten Eingabedaten für bestimmte Felder orientiert. Für die Breite von Text- und select-Feldern bieten sich folgende Klassennamen an: – .kurz – .mittel – .lang – .klein – .gross Die Ausmaße von select-/option-Elementen sollten gut überlegt sein. Zu schmale Felder verbergen möglicherweise den Inhalt von Auswahllisten, was die Benutzung in manchen Fällen unmöglich machen kann. Für Submit-Buttons und grafische Buttons können die folgenden Klassennamen helfen: – .zuruecksetzenButton – .abschickenButton Um zwischen Elementen zur Texteingabe und input-Elementen zu unterscheiden, die z.B. mit dem Mauszeiger aktiviert werden, können die folgenden class-Werte benutzt werden: – .textfeld – .button – .bool_wert – .auswahlliste Nicht sichtbare Formularelemente Das Verstecken oder Weglassen von label-Elementen ist eine schlechte Idee. Sollen die Beschriftungen für die Benutzer von bildschirmbasierten Medien nicht sichtbar sein, können Sie sie mit einer Kombination aus position: absolute und einem negativen Wert für left aus dem sichtbaren Bereich bewegen. Gelegentlich wird der Benutzer über ein legend-Element gebeten, mehrere Wahlmöglichkeiten selbst in eine Reihe von Textfeldern einzugeben (z.B. die drei Lieblingsbücher, -filme etc.). In diesem Fall ist es empfehlenswert, im Inhalt der label-Elemente eine entsprechende Nummerierung anzugeben (1., 2. 3., …), unabhängig davon, ob die Beschriftung tatsächlich dargestellt wird oder nicht. In vielen der beschriebenen Fälle taucht das Element fieldset auf. Verwenden Sie es im Markup so wie in Ihren Stylesheets mit Bedacht.

Erforderliche Formularfelder und Eingabeformate In manchen Fällen ist das Ausfüllen bestimmter Formularfelder auf jeden Fall erforderlich. Such- und Anmeldeformulare sind hier offensichtliche Beispiele. 262

|

Kapitel 13: Saubere und zugängliche Formulare

In den meisten Fällen ist es nur dem Entwickler klar, dass bestimmte Felder vor dem Abschicken des Formulars ausgefüllt werden müssen. Das gilt selbst für so offensichtliche Fälle wie die Eingabe von E-Mail-Adressen. In diesen Fällen müssen die entsprechenden Formularfelder als »erforderlich« gekennzeichnet werden. Natürlich darf auch die Überprüfung der notwendigen Eingaben nicht fehlen. In anderen Fällen müssen die vom Benutzer eingegebenen Daten ein bestimmtes Format haben, z.B. Telefonnummern und ganz besonders E-Mail-Adressen. Hierfür werden die eingegebenen Zeichen oftmals mit speziellen Funktionen für Zeichenketten, aber auch mit regulären Ausdrücken überprüft. Gestalter haben hierbei eigene Aufgaben: Die erforderlichen Felder und Eingabeformate müssen entsprechend gekennzeichnet und erklärt werden. Das Gleiche gilt für Fehlermeldungen, die prinzipiell eine kurze Begründung enthalten sollen (z.B. »Postleitzahlen bitte immer als fünfstellige Zahlenfolge angeben«).

Erforderliche Felder hervorheben Nehmen wir zum Beispiel eines der in Abbildung 13-1 beschriebenen Paare aus label und Formularelement. Hier bestimmen fieldset-, label- und die eigentlichen Formularelemente die Größe des umgebenden li-Elements. Angenommen, Sie verwenden für die Darstellung des Formulars die in diesem Abschnitt gezeigten Stildefinitionen, dann könnten Sie das Stylesheet zum Hervorheben der erforderlichen Felder um die folgenden Regeln erweitern: .erforderlich { position: relative; padding-right: 3.3em; } .erforderlich label span.warnung { position: absolute; right: 0; width: auto; color: rgb(192,0,0); }

Die oben gezeigten Regeln passen beispielsweise auf das folgende Markup: ...
• Postleitzahl<span class="warnung"> [erforderlich]:
...

Als Resultat wird rechts neben dem Paar aus label und Formularelement die Zeichenkette »[erforderlich]« angezeigt. Die Farbe entspricht einem HSB-Wert von 0 /100%/63% (Rotbraun). Die Stilregeln für den Hinweistext sind so definiert, dass sie für alle erforderlichen Felder verwendet werden können. Gleichzeitig wird das »Überlaufen« zumindest teilweise verhindert. Voraussetzung hierfür ist, dass die Breite von li und fieldset als width: auto berechnet wird. Der Nachteil dieser Technik besteht darin, dass sie mit bestimmten Werkzeugen zur Bildvergrößerung nicht immer funktioniert. Dies gilt besonders für alle Windows-Versionen. Um dieses Problem zu berücksichtigen, sollten die »[erforderlich]«-Markierungen stattdessen unter- oder oberhalb des benötigten Feldes und bündig mit dessen linkem

Erforderliche Formularfelder und Eingabeformate

|

263

Rand angezeigt werden. Das Ergebnis ist ein Layoutraster mit deutlich weniger vertikalem Leerraum, als es auf den ersten Blick scheint. Oftmals können erforderliche Felder mit einem deutlich »natürlicheren« Fluss der Elemente markiert werden. Ist das einmal nicht möglich, wissen Sie zumindest, dass der Positionierungskontext (siehe im Abschnitt »CSS-Eigenschaften für die Positionierung« auf Seite 99) für Sie da ist, wenn Sie ihn brauchen.

Eingabefehler aufspüren und identifizieren Der nächste Schritt besteht darin, die Benutzereingaben auf mögliche Fehler zu überprüfen. Hierfür ist eine Kombination aus client- und serverseitiger Logik am besten geeignet. Die Arbeitsschritte könnten wie folgt aussehen: 1. Auf der Clientseite werden die Eingaben mit den passenden Kombinationen aus .length, indexOf(), parseInt() und RegExp -Objekten überprüft. 2. Ist JavaScript aktiviert, werden fehlerhafte Benutzereingaben durch das Validierungsskript markiert. Die entsprechenden li- oder fieldset-Elemente werden um einen passenden class-Wert (z.B. fehler) erweitert. Zusätzlicher Inhalt wird eingefügt, der den Fehler beschreibt. Entsprechen die Eingaben den Anforderungen, können zusätzliche Transaktionen zwischen Client und Server vermieden werden. 3. Die Formulareingaben werden an den Server übergeben. Hier werden die Daten »gesäubert«, um das Einfügen von Schadcode (SQL-Injection, XSS-Angriffe etc.) zu verhindern. 4. Die »gesäuberten« Eingaben werden auf der Serverseite, ähnlich dem Test im Client, erneut auf mögliche Fehler überprüft. Wurden Eingabefehler gefunden, wird das gleiche veränderte Markup verwendet wie bereits bei der Überprüfung durch den Browser in Punkt 2. 5. Die Schritte 1, 3 und 4 werden wiederholt, bis die Benutzereingaben fehlerfrei sind. Die Fehlerbeschreibung sollte entweder zu Beginn des Formulars oder am Anfang des li-Elements eingefügt werden, das den Fehler enthält. Am besten verwenden Sie beide Positionen oder nur die zweite. Werden die Fehlerbeschreibungen nur am Anfang des Formulars angezeigt, muss der Benutzer möglicherweise zwischen der Beschreibung und dem fehlerhaften Formularfeld hin- und herscrollen, sofern er die Fehler überhaupt als solche erkennt. Für die Fehlerbeschreibung könnten Sie beispielsweise die folgenden Regeln verwenden, um die bereits gezeigten Stile für .erforderlich span.warnung zu erweitern: .fehler .warnung { display: block; background-color: rgb(160,0,0); color: rgb(255,255,255); font-weight: bold; } .fehler input { border: 1px solid rgb(160,0,0); background-color: rgb(255,160,160); }

Zusätzlich zu diesen Stilen (die hier nur der Illustration dienen sollen) können Werte für clear, width und margin definiert werden, um sicherzustellen, dass die Fehlermeldungen horizontal an dem dazugehörigen Formularelement oder fieldset ausgerichtet werden. 264

|

Kapitel 13: Saubere und zugängliche Formulare

Die Attribute »disabled« und »readonly« Wenn Sie jemals ein Betriebssystem installiert haben, speziell eines, bei dem ein Lizenzschlüssel eingegeben werden muss, sollten Sie mit deaktivierten Kontrollelementen bereits vertraut sein. Die Installation von Software geschieht oft in mehreren Schritten. Jeder Schritt muss erst vollständig durchgeführt werden, damit der nächste ausgeführt werden kann. Bis dahin erscheint der »Weiter«-Button oft »ausgegraut«. Ähnliche Beschränkungen können Sie auch in Webformularen verwenden, indem Sie das Attribut disabled (oder seltener auch readonly) verwenden. Welche Formularelemente diese Attribute unterstützen, sehen Sie in Tabelle 13-3. Tabelle 13-3: Unterstützung für die Attribute »disabled« und »readonly« Attribut

button

input

option

select

textarea

disabled

✓

✓

✓

✓

✓

readonly

✓

✓

Dadurch. dass der Benutzer bestimmte Formularelemente erst verwenden kann, wenn bestimmte Voraussetzungen erfüllt sind, lässt sich eine elegantere Benutzerführung erreichen. Dies funktioniert allerdings nur durch den Einsatz von JavaScript. Daher sollten Sie bei Verwendung dieser Attribute immer auch eine Alternative bereithalten, mit der die erforderlichen Felder überprüft werden, wenn clientseitige Skripte nicht funktionieren. Wenn Sie sich entscheiden, auszufüllende Felder zu verstecken, um Abhängigkeiten zwischen mehreren Formularen gerecht zu werden, sollten Sie den Platz für diese Felder freihalten, indem Sie sie per Ajax laden oder mit einer anderen CSS-Eigenschaft als display verändern. Wenn Sie sich nur auf display verlassen, können die Ergebnisse verwirren und die Benutzbarkeit beim Einsatz von Hilfstechnologien stark verringern.

Zugängliche Formulare erstellen Viele kommerzielle Websites würden ohne Formulare überhaupt nicht funktionieren. Deshalb muss bedacht werden, dass ein nicht unerheblicher Teil Ihrer Besucher aufgrund körperlicher oder mentaler Einschränkungen Schwierigkeiten bei der Benutzung Ihrer Website haben könnte. Die Behinderungen, die sich auf das Design von Websites auswirken können, lassen sich in mehrere Kategorien unterteilen und werden hier mit einigen Beispielen erläutert: Motorische Einschränkungen Benutzer mit eingeschränkter Bewegungsfähigkeit haben möglicherweise Probleme bei der Benutzung von Tastatur und/oder Maus. Beispiele wären: – gebrochene Arme oder Finger – chronische Sehnenscheidenentzündung oder RSI-Syndrom

Zugängliche Formulare erstellen

|

265

– periphere Neuropathie – Querschnittslähmung und Lähmung aller vier Gliedmaßen Eingeschränkte Sehfähigkeit Um die Benutzerschnittstellen von PCs und Mobilgeräten erfolgreich benutzen zu können, sind meist ein funktionierender Seh-, Hör- und Tastsinn des Benutzers notwendig. Hierbei ist der Sehsinn für die Benutzung von Websites besonders wichtig. Dies gilt speziell für Sites, die Formulare einsetzen. Können Benutzer die Formulare oder die einzugebenden Daten nicht sehen, ist ihre Fähigkeit, diese Websites zu benutzen, deutlich eingeschränkt. – Kurzsichtigkeit – Astigmatismus (»Schielen«) – altersbedingte Degeneration der Sehfähigkeit – Makulardegeneration – Glaukom (»grüner Star«) – Farbenblindheit – Blindheit Eingeschränkte Wahrnehmung Die Wahrnehmung von Medieninhalten, inklusive des Webs, ist eine reine Funktion des Gehirns und Verstandes. Ein Benutzer, der sich nicht auf eine Site konzentrieren kann oder ihren Wert nicht schnell genug erkennt, wird vermutlich nicht lange bleiben. Daher ist Kürze hier besonders wichtig. – Aufmerksamkeitsdefizit – Legasthenie – Störungen der auditiven Wahrnehmung – symptomatische Hirnverletzungen – akuter Vitamin B-Mangel Neben den hier genannten gibt es noch viele andere Einschränkungen, die die Fähigkeit, eine Website zu benutzen, beeinflussen können. Zeitmangel gehört zwar nicht zu den oben genannten Einschränkungen, tritt aber trotzdem recht häufig auf. Sehr wahrscheinlich kennen Sie oder Ihre Bekannten wenigstens ein paar der hier genannten Probleme. Mit dreien dieser Einschränkungen habe ich persönliche Erfahrungen, mit zweien davon habe ich täglich zu tun. Trotzdem benutze ich das Web. Was sagen Sie nun?

Zugängliche Formulare implementieren Wenn Sie die folgenden Dinge beachten, können Sie Ihre Website für praktisch alle Besucher benutzbar machen:

266

|

Kapitel 13: Saubere und zugängliche Formulare

Halten Sie sich beim Design und Testen jedes Projekts an die Zugänglichkeitsrichtlinien (WCAG) für Webinhalte des W3C. Diese Empfehlung hat mehr mit guten Angewohnheiten als mit konkreten Arbeitsschritten zu tun. Wenn Sie sich bei der Umsetzung einer Website prinzipiell an die Anforderungen der WCAG (eine deutsche Übersetzung finden Sie auf der Website des W3C (http://www.w3c.de/Trans/WAI/webinhalt.html)) halten, wird der Aufwand für die Implementierung schnell geringer. Verlassen Sie sich nie auf eine einzige Möglichkeit, um den Kontext anzuzeigen, oder Benutzereingaben entgegenzunehmen. Bei der Verwendung von Text sollte auch ein rein visueller Hinweis vorhanden sein (und umgekehrt). Stellen Sie sicher, dass Ihre Website auch benutzbar ist, wenn nur eine Maus (Trackpad usw.) oder eine Tastatur verwendet wird, ohne sich auf eines der beiden Geräte zu beschränken. Strukturieren Sie die Reihenfolge der Elemente im Quellcode so, dass die Inhalte auch ohne die Verwendung von CSS noch gut lesbar sind. Hierfür ist es vor allem wichtig, die wichtigen Dinge prinzipiell an den Anfang des Dokuments zu stellen. Sobald Sie von Ihren Benutzern mehr erwarten als »Gehen Sie, wohin Sie wollen« und »Geben Sie einfach irgendwelche Daten ein«, sollten Sie Ihre Anforderungen klar und verständlich formulieren. Geben Sie knappe Anweisungen. Sie wollen die Intelligenz der Benutzer respektieren, aber nicht auf die Probe stellen. Reden Sie mit Ihren Besuchern nicht »von oben herab«. Gleichzeitig kann die Usability schnell leiden, wenn Sie davon ausgehen, dass Ihre Besucher auf dem gleichen Wissens- und Erfahrungsstand sind wie Sie. Vermeiden Sie die Regeln display: none und visibility: hidden, es sei denn, Sie wollen die dazugehörigen Inhalte vor Benutzern mit Sehschwierigkeiten verbergen. Da viele Hilfstechnologien auf der Annahme basieren, dass Stildefinitionen nur für bildschirmbasierte Medien gelten, signalisieren diese Anweisungen, dass der Inhalt der entsprechenden Elemente ignoriert werden soll. Tun Sie alles, was möglich ist, damit die Benutzer ihre eigenen Eingaben lesen können. Das Ignorieren dieser Anforderung führt beim Benutzer zu unnötigem Schielen, Scrollen und zur Benutzung des Cursors. Diese Dinge sind gerade für Menschen mit motorischen Einschränkungen schwer durchzuführen. Konsistenz macht Ihre Site vorhersagbarer; handeln Sie beim Design und bei der Implementierung Ihres Layouts entsprechend. Richten Sie die Formularelemente an gemeinsamen Achsen aus, und sorgen Sie dafür, dass ihre Größe möglichst wenig variiert. Platzieren Sie Paare aus label- und Formularelementen in Spalten, so dass die Formularelemente genauso aufeinander folgen wie die Zeilen im Haupttext von oben nach unten angeordnet sind.

Zugängliche Formulare erstellen

|

267

Wenn Sie Techniken wie Ajax oder das Aktivieren und Deaktivieren von display-Werten verwenden, sollten Sie ein JavaScript-Framework verwenden, um die Richtlinien der WAIARIA (W3C Web Accessibility Initiative Accessible Rich Internet Applications) umzusetzen. Weitere Informationen zur WAI-ARIA finden Sie auf der Website zu diesem Buch. Deutschsprachige Informationen und weiterführende Links finden Sie außerdem im entsprechenden Artikel der Wikipedia: (http://de.wikipedia.org/wiki/Accessible_Rich_ Internet_Applications). Folgen Sie den HTML- und CSS-Spezifikationen beim Schreiben Ihres Markup-Codes eher sinngemäß als buchstabengetreu. Hierzu gehört, dass Sie table-Elemente nicht für das Layout der Seiteninhalte verwenden und dass Sie Ihre Bilder prinzipiell mit alt-Attributen versehen. Gibt es spezielle Elemente für Ihre Aufgabe und werden sie ausreichend unterstützt, sollten Sie sie auch benutzen. Gibt es keine Elemente für Ihren Zweck, verwenden Sie die Attribute class und id, um den Kontext klarzustellen, anstatt damit nur die Präsentation zu steuern.

Formulare über die Tastatur steuern Speziell Formularelementen und Links kann mit der Tabulartortaste der »Fokus« zugewiesen werden. Über die Enter-Taste können Links aktiviert (»angeklickt«) und Formulare abgeschickt werden. Auf der Strukturebene wird diese Funktionalität über das Attribut tabindex implementiert. Hiermit können Sie die Reihenfolge festlegen, nach der die einzelnen Elemente mit der Tabulatortaste »fokussiert« werden. Normalerweise verwenden Sie die Tabulatortaste, um den Fokus von einem Element zum nächsten zu bewegen. Hat ein Element einen passenden Wert für das tabindex-Attribut, ändert sich diese Reihenfolge. Das Element mit dem niedrigsten tabindex-Wert wird zuerst angesprungen, das mit dem höchsten Wert zuletzt. Wurde zwei Elementen der gleiche Wert für tabindex zugewiesen, erhalten sie den Fokus gemäß ihrer Reihenfolge im Quelltext. Allerdings hat tabindex auch zwei Nachteile. Wurde das Attribut auf langen Seiten schlecht implementiert, wird möglicherweise über große Entfernungen gescrollt, was zu Desorientierung führen kann. Außerdem werden die Werte für tabindex bei einer Revision der Website nur selten mit aktualisiert. Andererseits kann eine Seite mit einer vernünftigen Quellcode-Reihenfolge auch davon profitieren, wenn wichtige Elemente um die Formulierung tabindex="0" erweitert werden. Hierdurch erhalten diese Elemente den Fokus im Verlauf des Besuchs relativ früh. (In manchen Fällen ist tabindex die einzige Möglichkeit, einem Element den Fokus zu geben.) Verwenden Sie für tabindex einen negativen Wert, so wird es von der Tabulator-Reihenfolge des Dokuments ausgenommen. Das Attribut accesskey ermöglicht es dem Benutzer, mit einem festgelegten Tastaturkürzel direkt auf ein Element zuzugreifen und so die Tabulator-Reihenfolge komplett zu umgehen. Als Werte für accesskey kann ein beliebiges druckbares Zeichen verwendet 268

|

Kapitel 13: Saubere und zugängliche Formulare

werden, das ohne Hilfstasten (Shift etc.) auf der Tastatur erreicht werden kann. Das entsprechende Element erhält den Fokus, wenn der Benutzer die Taste in Kombination mit einer der in Tabelle 13-4 genannten Sondertasten drückt. Tabelle 13-4: Verwendung von »accesskey« in den wichtigsten Browsern Browser

Tastenkombination

Firefox/Windows

Alt+Shift+accesskey

Internet Explorer

Alt+accesskey

Safari und Firefox/Mac

Ctrl+accesskey

Zwei der hier genannten Plattformen haben bezüglich der Benutzererwartungen spezielle Implikationen. Die erste der beiden ist Mac OS X. Hier wird anstelle der Befehlstaste (Cmd), die Taste Ctrl für das accesskey-Tastaturkürzel verwendet. Da die Befehlstaste für die Ausführung von Programmbefehlen reserviert ist und Ctrl außerhalb der Kommandozeile nur wenige Funktionen hat, ist diese Zuweisung sinnvoll und wenig riskant. Im Gegensatz zu dieser glücklichen Situation steht die Implementierung im Internet Explorer. Viele Windows-Programme werden mithilfe der Alt-Taste gesteuert, der gleichen Taste, die auch für accesskey zuständig ist. So öffnet Alt-D das Menü Datei, Alt-A das Menü Ansicht und so weiter. Kommt es zu Überschneidungen zwischen den Werten für accesskey und reservierten Zeichen, erhält der Wert für accesskey normalerweise den Vorrang. Die entsprechende Tastenkombination für die Menüsteuerung steht dann nicht mehr zur Verfügung. Angesichts des hohen Marktanteils des Internet Explorers, sollte die Verwendung der »reservierten« Buchstaben als Wert für accesskey nach Möglichkeit vermieden werden. Manche Werkzeugleisten und Browser-Erweiterungen können den Ausschluss weiterer Tasten in verschiedenen Windows-Browsern bedeuten.

Neue Merkmale in HTML 5 Das Hauptaugenmerk von HTML 5 lag anfangs darauf, HTML-Formulare mit neuen Funktionen zu versehen. Dies ist der Bereich, in dem die größten Unterschiede zu Vorgängerversionen zu erwarten sind. Allerdings befindet sich HTML 5 noch in der Entwicklungsphase. Dieser Abschnitt bietet einen Überblick über die neuen Formularfunktionen sowie Details zu einigen Merkmalen, die – auch wenn sie noch nicht sehr bekannt sind – große Auswirkungen auf die Benutzer haben können.

Neue Eingabeelemente HTML 5 verbessert die HTML 4-Formulare durch 13 neue input-Elemente: •

datetime (globale Angabe von Datum und Uhrzeit inkl. Zeitzone)

•

datetime-local (lokale Angabe von Datum und Uhrzeit)

Neue Merkmale in HTML 5

|

269

•

date (Datum)

•

month (Jahr und Monat)

•

time (Uhrzeit)

•

week (Jahr und Woche)

•

number (numerische Eingaben)

•

range (Zahlenbereich)

•

email (E-Mail-Adressen)

•

url (URLs)

•

search (Suchfeld)

•

tel (Telefonnummern)

•

color (Anzeige einer Farbpalette)

Diese neuen Eingabeelemente stellen für Autoren eine deutliche Verbesserung dar. Ist für die Eingabeelemente eine spezielle Benutzerschnittstelle nötig, wird diese nativ vom Browser bereitgestellt, ohne dass hierfür JavaScript-Code oder -Bibliotheken nötig wären. Für den Typ color erzeugt der Browser beispielsweise eine Farbpalette, aus der Besucher durch Zeigen und Klicken eine Farbe auswählen können; für den Typ date wird ein Minikalender angezeigt, aus dem der Benutzer das gewünschte Datum auswählen kann, und so weiter. Da diese Elemente über ein eingebautes (statt über eine selbstgezimmertes) GUI-Element zugänglich gemacht werden, ist außerdem sichergestellt, dass nur gültige Werte eingegeben werden können. Ein weiterer großer Vorteil dieser automatischen Überprüfung auf der Clientseite besteht für Endbenutzer darin, dass keine ungültigen Werte eingegeben werden oder die Benutzer schnell von einer fehlerhaften Eingabe informiert werden können. (In HTML 5 ist die automatische Überprüfung von Formulareingaben standardmäßig aktiviert. Sie kann nur durch eine Änderung der Benutzereinstellungen oder explizit durch den Autor, und dann nur für die entsprechende Seite, vorgenommen werden. Hierfür muss der Autor das Formular oder ein bestimmtes Element mit dem Attribut formnovalidate versehen.)

Das Attribut »required« Das Attribut required ist ein weiteres neues Merkmal in HTML 5-Formularen. Der Zweck ist recht einfach, dafür aber umso mächtiger. Wird für ein input- oder textarea-Element das Attribut required angegeben, wird festgelegt, dass der Benutzer in diese Felder auf jeden Fall eine Eingabe vornehmen muss, damit das Formular abgeschickt werden kann. In manchen Formularen müssen bestimmte Werte unbedingt eingegeben werden, damit sie korrekt verarbeitet werden können. Bei einem Anmeldeformular wäre dies beispielsweise die Angabe eines Benutzernamens. Danach muss der Formularinhalt überprüft werden und der Benutzer ggf. informiert werden, wenn versucht wird, das Formular mit leeren oder falsch ausgefüllten Feldern abzuschicken. Diese Überprüfung findet normalerweise auf eine von zwei Arten statt. Die erste Möglichkeit besteht in einer Überprüfung

270

|

Kapitel 13: Saubere und zugängliche Formulare

auf der Serverseite, nachdem das Formular abgeschickt wurde. Dies ist allerdings nicht optimal, weil hierfür zusätzliche Daten über das Netzwerk geschickt werden müssen, was die Wartezeit verlängert. Die zweite und bessere Methode besteht darin, die Formulareingaben auf der Clientseite zu überprüfen. Das geht im Moment allerdings nur mit eigenem JavaScript-Code oder bestimmten JavaScript-Bibliotheken. Und hier kommt das Attribut required ins Spiel. Es sorgt dafür, dass Sie als Autor keinen JavaScript-Code mehr für die clientseitige Überprüfung der erforderlichen Formularfelder benötigen. Die Validierung wird stattdessen vom Browser übernommen. Das Attribut hat aber auch Vorteile für den Endbenutzer, weil es Zeit spart und Schwierigkeiten vermeidet. Die Benutzererfahrung ist in allen Webapplikationen konsistent, da der Benutzer bei fehlenden oder fehlerhaften Werten für die erforderlichen Felder informiert wird. Diese Meldungen erscheinen außerdem in der bevorzugten Sprache des Benutzers und sich nicht mehr auf die verfügbaren Sprachen der Webapplikation beschränkt.

Neue Merkmale in HTML 5

|

271

KAPITEL 14

Die schlechten Seiten

Das Web ist ein Wunder der modernen Zivilisation. Wie noch in keiner anderen Zeit zuvor können Menschen ihre Werke veröffentlichen, ohne hierfür eine Zustimmung von außen zu brauchen. Dabei spielt das Web eine entscheidende Rolle. Leider hat das Web, wie jedes System, seine Macken, Makel und Malaisen. Dies sind die Dinge, die wir in diesem Buch als die schlechten Seiten bezeichnen. Einige davon werden wir in diesem Kapitel besprechen – natürlich inklusive der Gründe. Außerdem zeigen wir Ihnen, wie Sie mit den schlechten Seiten umgehen müssen, wenn es mal nicht anders geht. Das Kapitel endet mit im Abschnitt »Die furchtbaren Seiten« auf Seite 296, die quasi ohne Ausnahme vermieden werden sollten.

Die schlechten Manieren des Internet Explorers (speziell IE 6) Das Problem mit dem Internet Explorer ist weniger ein Problem von HTML und CSS, sondern eher von ihrer Implementierung. Diese Schwächen werfen lange Schatten. Als der Internet Explorer 6 im Jahre 2001 veröffentlicht wurde, war er mit Abstand der beste verfügbare Browser. Warum? • Er bot mehr und bessere Unterstützung für Webstandards als seine Vorgänger, und er hatte die damals beste Unterstützung für die DOMAPI. • Die Firefox zugrunde liegende Rendering-Technologie namens Gecko war noch zwei Jahre von ihrer Reife entfernt. • Der Internet Explorer 5 für Macintosh beanspruchte für sich, die am weitesten entwickelte CSS-Unterstützung zu bieten. Allerdings benutzte er hierfür seine eigene Rendering-Engine und litt unter einem geringen Marktanteil und schlechtem internen Support. • Netscape lag im Sterben. Nach Netscape 4 passierte einfach nicht mehr viel. • Safari war damals noch gänzlich unbekannt und sollte seine volle Reife erst Jahre später erreichen. Es dauerte ein weiteres Jahr, bis Safari in Sachen Darstellungsfähigkeit den gleichen Funktionsumfang erreichte wie die anderen Browser.

|

273

Das heißt, der Internet Explorer 6 war bei seiner ersten Veröffentlichung gar nicht mal so schlecht und hatte zudem einen recht großen Marktanteil. Angespornt von Netscapes anfänglicher Dominanz im Web, machte Microsoft seine Sache ziemlich gut und veröffentlichte in vier aufeinanderfolgenden Jahren hervorragende Webbrowser. Am Ende ruhte man sich dann leider doch zu lange auf den eigenen Lorbeeren aus. Apple, Inc. und der Mozilla Foundation kam gemeinsam die Aufgabe zu, diese Lücke zu schließen. Schritt für Schritt entwickelten sie ihre eigenen Browser weiter und stellten sie den Nutzern zur freien Verfügung. Spätestens 2005 gab es keinen Zweifel mehr, dass der Internet Explorer langsam in die Jahre kam.

Browserkrieg 2.0 Mitte 2005 empfahl die US-Regierung aus Gründen der Sicherheit, ganz auf die Verwendung des Internet Explorers zu verzichten. Befürworter offener Software und andere Kämpfer gegen die Monokultur beschworen enthusiastisch die Vorteile alternativer Browser. Die Ergebnisse nagten Monat für Monat am Marktanteil des Internet Explorers. Aufgerüttelt aus seinem Schlummer, hat Microsoft seitdem zwei neue Versionen des Internet Explorers auf den Markt gebracht, die ihren gemeinsamen Vorfahren um Längen übertreffen. Und trotzdem scheint dieser inzwischen über acht Jahre alte Dinosaurier nicht totzukriegen zu sein. Abgesehen von einfachen Netzwerkeffekten, sind hier ein paar Gründe, warum der Internet Explorer 6 immer noch benutzt wird: • Bei der ersten Veröffentlichung war die Menüleiste des Internet Explorers 7 standardmäßig versteckt, was viele Gelegenheitsbenutzer verwirrte und abschreckte. • Da IT-Firmen (eine von Microsofts wichtigsten Einnahmequellen) trotz der Effizienz, die sie ermöglichen, das Aktualisieren von Browsern häufig nur als Kostenstelle betrachteten, wurden die besten Absichten von der Maxime »was nicht kaputt ist, muss auch nicht repariert werden« wieder zunichte gemacht. Aus diesem Grund werden Aktualisierungen des Internet Explorers häufig als unnötiger Aufwand betrachtet. • Seit seinem Erscheinen hat Windows XP, dem Internet Explorer 6 standardmäßig beilag, mehr Benutzer an sich gebunden als jedes der neueren Microsoft-Betriebssysteme. Windows 7 ist seit Oktober 2009 auf dem Markt, und es ist zu erwarten, dass es Windows XP den Rang abläuft. Allerdings wird sein Marktanteil noch für einige Zeit unter dem seines Vorgängers liegen. • Es ist relativ einfach, »Low-Pass«-Filter für CSS zu verwenden, die viele der Fehler des Internet Explorers 6 vor seinen Benutzern verbergen – zumindest in einem gewissen Maße. • Zwischen 2001 und 2005 stellte eine Reihe von Anbietern, insbesondere Banken, Websites ins Netz, die speziell für den Internet Explorer für Windows programmiert waren. Jedenfalls machten sie diesen Eindruck, weil die für die Seiten zuständigen

274

|

Kapitel 14: Die schlechten Seiten

Leute es einfach nicht besser wussten. Dieser Überfluss an plattformspezifischen Diensten sorgte ungewollt für ein hohes Maß an Furcht, Unsicherheit und Zweifel, was die Glaubwürdigkeit anderer Browser anging. • Lässt man Sicherheit, Filter und plattformspezifische Programmierung außer Acht, ist es den meisten Gelegenheitsbenutzern vollkommen egal, welchen Browser sie benutzen, solange er einigermaßen benutzbar ist und zu funktionieren scheint. In diesem Sinne ist der Internet Explorer 6 eigentlich schon selbst ein »Bad Part« – nicht wegen seiner Benutzerunfreundlichkeit, sondern weil er einfach nicht totzukriegen ist. Sobald etwas nicht unterstützt wird, wird allen Webbenutzern der Zugang zu neuen Webtechnologien verweigert, weil die meisten Geschäftskunden nicht einsehen, Geld für etwas auszugeben, das nur ein Bruchteil des Zielpublikums tatsächlich nutzen kann. In anderen Fällen bietet der Internet Explorer Unterstützung für bestimmte Funktionen, aber nur mit Methoden, die so verworren sind, dass ihre Implementierung von Entwicklern als große Belastung empfunden wird. In den folgenden Abschnitten finden Sie eine Untersuchung der Mängel des Internet Explorers. Wo es Hilfslösungen gibt, werden diese ebenfalls beschrieben.

Fehlende oder schlechte Unterstützung für Selektoren Tabelle 14-1 beschreibt die mangelhafte Unterstützung von Selektoren im Internet Explorer. Tabelle 14-1: Mängel in der Unterstützung von Selektoren im Internet Explorer Selektor

Unterstützt seit Version

Anmerkungen

> (Kindselektor)

7

[foo] (Attribut)

8

:first-child, :last-child

8

:nth-child()

vorr. 9

:before

8

:after

8

.foo.bar

7

IE 6 liest diesen Selektor als .bar.

:hover

3

Die Pseudoklasse :hover wurde in Version 7 nur auf Elemente angewandt, die keine a-Elemente waren.

Einfache Attributselektoren funktionieren in IE 8. Versuche, ihren Gültigkeitsbereich weiter einzuschränken, zeigen aber keine Ergebnisse.

Zähler (counter) werden ignoriert.

Damit eine Website möglichst umfassend mit IE6 kompatibel ist, sollten Sie diese Selektoren möglichst vermeiden. Alternativ kann ihr Verhalten mithilfe von JavaScript nachgebaut werden. Hierfür ist allerdings Code nötig, der die gewünschten Ergebnisse nur mit roher Gewalt erreicht.

Die schlechten Manieren des Internet Explorers (speziell IE 6)

|

275

Das Urteil: Verwenden Sie diese Selektoren dort, wo es nicht anders geht, aber informieren Sie Ihre Auftraggeber und Designer darüber, was sie zu erwarten haben. Ersetzen Sie die Pseudoelemente :first-child und :last-child sowie den Kindselektor > bei Bedarf durch class-Attribute und -Selektoren. Folgende Ressourcen können helfen, die durch Darstellungsfehler im Internet Explorer verursachten Layoutprobleme zu lösen: • »Position Is Everything«, http://www.positioniseverything.net/ • die Mailingliste css-discuss, sowie das dazugehörige Wiki und Archiv, http://css-discuss.incutio.com/

»hasLayout« hasLayout ist ein spezieller Parameter im Internet Explorer. Wird er über die DOMAPI abgefragt, hat er entweder den Wert true (wahr) oder false (falsch). Hat hasLayout für ein bestimmtes Element den Wert true, wird seine Präsentation durch die Logik der Rendering Engine definiert. Ansonsten bleiben viele CSS-Eigenschaften mysteriöserweise wirkungslos. Viele der Layoutprobleme, die Gestaltern beim Testen ihrer Arbeit im Internet Explorer 6 begegnen, haben hier ihren Ursprung.

Allerdings können Sie auch erzwingen, dass ein Element »Layout hat«, beispielsweise um ein Layoutproblem zu lösen. Hierfür muss die Rendering Engine von IE 6 davon überzeugt werden, dass für das Element zumindest die Breite oder die Höhe bekannt ist. Meistens gibt man hierfür position und height einen anderen Wert als static bzw. auto. Diese Technik ist auch als »Holly Hack« bekannt. Sie wurde benannt nach Holly Bergevin, dem Entwickler, der diese Methode bekannt gemacht hat. Eine andere Möglichkeit, um ein Element mit »Layout« zu versehen, besteht in der Definition zoom: 1. Sie wird von vielen Entwicklern bevorzugt, weil sie Probleme mit positionierten Elementen vermeidet (siehe im Abschnitt »Stapelung« auf Seite 103). Wird weiter oben in der Kaskade außerdem die Eigenschaft font-size mit einem Pixelwert definiert, können diese Probleme durch flexible oder gridbasierte Layouts größtenteils umgangen werden (siehe im Abschnitt »Layouttypen und Hilfslinien-Raster« auf Seite 108). Dies kann allerdings einen großen Nachteil für IE6-Benutzer mit Sehproblemen bedeuten, da sich die Textgrößen im Menü Ansicht in dieser Version nicht ändern lassen, wenn die Textgröße in Pixeln angegeben wurde. Das Urteil: Probleme lassen sich nicht ganz vermeiden. Hier heiligt der Zweck die Mittel. Diese Mittel sind am besten Conditional Comments für die betroffene(n) Version(en) des Internet Explorers. Unter Umständen hilft auch der »Star-html«-Hack (* html) als Low-Pass-Filter weiter.

276

|

Kapitel 14: Die schlechten Seiten

Verdoppelte Außenabstände: Der »Double Margin Bug« Sehen Sie sich einmal die folgende Stildefinition an: #irgendeinDiv { display: block; float: left; width: 20em; margin-left: 10em; }

Hier beziehen sich die Werte für float und margin-left auf die gleiche Seite des Elternelements, und aus irgendeinem unerfindlichen Grund meint der Internet Explorer 6 deshalb, den Wert von margin-left auf 20em verdoppeln zu müssen. Die Hälfte der Lösung für dieses Problem wird vom W3C in Abschnitt 9.7 der Spezifikation von CSS 2.1 dokumentiert. Die andere Hälfte der Lösung ist alles andere als intuitiv: Setzen Sie den Wert von display für das Element auf inline. Dies funktioniert, weil das Dokument durch die Werte von width und float trotzdem als Block-Element dargestellt wird. Eine ausführliche Diskussion dieser Lösung, die übrigens Steve Clason zugesprochen wird, finden Sie auf der Website von Positioniseverything.net (http://www.positioniseverything.net/explorer/doubled-margin.html).

Das Urteil: Zwar ist die Lösung für das Problem der doppelten Außenabstände ziemlich seltsam und wenig intuitiv. Allerdings ist dies genau die Art von unauffälligen Lösungen, die man sich für alle Hilfslösungen wünschen würde. Bitte gehen Sie weiter, hier gibt es nichts zu sehen.

»expression()«-Werte Wussten Sie, dass man in Stylesheets JavaScript-Code einbauen kann und dass der Internet Explorer ihn auswertet? Wenn Sie als Wert einer CSS-Eigenschaft ein expression()-Objekt angeben und für dieses als einziges Argument einen gültigen JavaScript-Ausdruck angeben, wird der Internet Explorer diesen Ausdruck ausführen und das Ergebnis als Wert für die Eigenschaft verwenden. Diese Funktion kann äußerst praktisch sein. Gleichzeitig läuft sie aber auch dem Geist des »progressive enhancement« zuwider. Daher kann ich vom Gebrauch von expression() nur abraten. Gegen die Verwendung von expression() spricht außerdem, dass Sie in einer expression()-Anweisung keine Dokumentenknoten referenzieren können. Das geht nur, wenn Sie das Skript mit einem defer-Attribut versehen, das dann das Stylesheet mit dem expression()-Objekt lädt. Dies ist gleichbedeutend mit einer absichtlichen Implementierung eines »Flash of Unstyled Content«, bei dem für kurze Zeit der Inhalt ohne die Gestaltung durch die Stylesheet-Regeln angezeigt wird. Das Urteil: Vermeiden Sie die Verwendung von expression() um die Struktur Ihres Dokuments nicht durcheinanderzubringen und die Sicherheit nicht zu gefährden. Ist das nicht

Die schlechten Manieren des Internet Explorers (speziell IE 6)

|

277

möglich, sollten Sie sie auf die kleinstmögliche Anzahl von Browsern beschränken. (Dies gilt nur deshalb nicht als »Awful Part«, weil es Ihnen vermutlich eines Tages den Hals rettet.)

ActiveX-Filter, Transparenz und Farbverläufe Die ActiveX-Plattform ermöglicht dem Internet Explorer den Zugriff auf eine Reihe von Filtern und Übergängen. Hierzu gehört vor allem der Alpha()-Filter, der im IE analog zur CSS 3-Eigenschaft opacity (gegenwärtig in Firefox und Safari als -moz-opacity bzw. -webkit-opacity implementiert) eingesetzt werden kann. Ein verwandter Filter ist zudem wichtig, um den Alphakanal von PNG-Dateien im Internet Explorer 6 richtig darzustellen, wie im folgenden Abschnitt besprochen wird. Um ein Element im Internet Explorer mit verschiedenen Arten von Transparenz zu versehen, können Sie eine Stildefinition wie diese verwenden: #foo { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xxx); }

In diesem Fall übernimmt opacity einen ganzzahligen Wert zwischen 0 und 100. Im Gegensatz dazu übernimmt die CSS3-Eigenschaft opacity einen Fließkommawert zwischen 0 und 1. Das Urteil: Die Verwendung dieses Merkmals (und seiner CSS3-Entsprechung) sollte im Moment noch auf zwei Fälle beschränkt bleiben: auf Übergänge, die mit einem Skript über DOM-API realisiert werden, und Layout-Situationen, in denen zwei sich überlappende Hintergrundbilder nicht im Hintergrund eines Vorfahren-Elements kombiniert werden können. In allen anderen Fällen sollte dieses Merkmal vermieden werden, bis die CSS3-Eigenschaft opacity gemäß ihrer Definition von einem Großteil der Browser unterstützt wird.

PNG-Unterstützung (oder ihr Fehlen) Tatsächlich können alle verwendeten Versionen des Internet Explorers PNG-Dateien darstellen. Beim IE6 gibt es da jedoch einen kleinen Haken. Bei voller Farbtiefe unterstützen PNG-Bilder Farbdaten mit 24 Bit pro Pixel (8 Bit pro Kanal, wie JPEG, Photoshop, Webfarben und sRGB). Außerdem kann in PNG die Transparenz für ein Pixel ebenfalls mit 8 Bit (256 Abstufungen) angegeben werden. Findet der Internet Explorer 6 ein Pixel, das nicht vollständig transparent ist (also einen anderen Alphawert hat als FF), stellt er dieses Pixel stattdessen grau dar. Um dieses Problem zu lösen wurde die »prozedurale Oberfläche« AlphaImageLoader eingeführt. In diesem Fall funktioniert das, indem die Beziehung des eingebetteten Bildes zum übrigen Stapelkontext verändert wird. Damit das auch für Hintergrundbilder funktioniert, ist eine Menge DOM-API-Hacking nötig.

278

|

Kapitel 14: Die schlechten Seiten

Die beste Lösung dieses Problems (zumindest aus Sicht des Gestalters) besteht in der Verwendung einer HTML-Component-Datei, die von Angus Turnbull (http://www.twinhelix.com/) erstellt wurde. Die Dokumentation ist (zusammen mit diversen Alternativen, inklusive JavaScript-basierten Lösungen) auf der Website zu diesem Buch (http://www. htmlcssgoodparts.net). verlinkt. Das Urteil: In den meisten Fällen lässt sich dieses Problem mit anderen Bildformaten umgehen. Glücklicherweise lösen Urheberrechtskonflikte nicht mehr den Aufruhr aus, den es bei der Einführung des Internet Explorers 6 gab. Warten Sie einfach, bis der Marktanteil des IE 6 unter fünf Prozent sinkt (vermutlich geschieht das Mitte bis Ende 2010). Danach benutzen Sie Ihre PNG-Dateien einfach wie gewünscht und sehen, was passiert, wenn Ihre PNGs mit Alphakanal ohne Stützrad fahren lernen. (Wenn genug Browserhersteller das tun, werden auch die Entscheider irgendwann merken, dass der Internet Explorer 6 seine Lebensspanne längst überschritten hat.)

Schlecht unterstützte CSS-Eigenschaften Es gibt eine Reihe von Eigenschaft/Wert-Paaren, die für geschickte Gestalter schon seit längerer Zeit besonders interessant sind. Nur zu dumm, dass der IE 6 diese Werte nicht so unterstützt, wie er sollte. Leider kann man da nicht viel machen. Das Urteil: Schreiben Sie nach Möglichkeit spezielle Stilregeln, ohne hierfür zusätzliche Elemente zu verwenden, die auf allen Plattformen zu den gewünschten Ergebnissen führen, ohne dass hierfür Filter oder andere Hirnakrobatik zum Einsatz kommt. Wenn Ihnen die Verwendung von position: fixed wichtig ist, haben Sie beim IE 6 schlicht Pech gehabt.

Probleme mit XHTML und XML Die mangelnde Unterstützung für korrekt ausgeliefertes XHTML ist ziemlich ärgerlich, weil es viele der praktischen Vorteile von XHTML zunichte macht. Und damit die Ironie gegenüber dem Frust die Oberhand behält, sei gesagt, dass der Internet Explorer der erste weitverbreitete Browser war, der XML überhaupt unterstützte. Obwohl XHTML nicht auf allen Plattformen richtig unterstützt wird, hat es einen positiven Einfluss auf die Arbeitsgewohnheiten von Entwicklern. Dennoch sollten Sie bei ganz normalen Webprojekten davon ausgehen, dass bei Ihren Besuchern nicht alle Merkmale von XHTML unterstützt werden. Wenn es Ihnen wichtig ist, können Sie das User-Agent-Feld des Request-Headers auslesen und dann einen passenden Content-Type in der Serverantwort verwenden. Allerdings hat dieser Ansatz seine eigenen Konsequenzen (z.B. wenn der falsche Content-Type an Benutzer geschickt wird, die sich auf der anderen Seite eines Proxy-Servers befinden).

Die schlechten Manieren des Internet Explorers (speziell IE 6)

|

279

Ein weiterer Nachteil bei der Auslieferung Ihrer Inhalte als XML besteht darin, dass die XML-Spezifikation falsch formatiertes Markup im Benutzerprogramm absolut nicht verzeiht. Sobald Ihre Website Inhalte von Drittanbietern einbindet und Sie für Ihre Dokumente text/xhtml+xml als Inhaltstyp angeben, sind Schwierigkeiten vorprogrammiert. Das Urteil: In einer idealen Umgebung bietet XHTML ungeahnte Möglichkeiten. Leider ist das Web von heute nicht diese ideale Umgebung. Mist! Verwenden Sie XHTML 1.0, und liefern Sie es als Content-Type: text/html aus – oder verwenden Sie einfach HTML.

Ein hässliches System Bis zu einem gewissen Grad haben sich die Leute an das Design des Webs und des Internets im Allgemeinen gewöhnt. Das Web ist jedoch deutlich größer als die subjektiven Welten, in denen die meisten Benutzer leben. Tatsächlich umspannt es die ganze Welt, was zu einigen interessanten Eigenheiten im System führt.

Zerbrechliche Templates und Inhalte von Drittanbietern Wenn Sie sich die Webwerbung, Blog-Kommentare, Schnipsel von sozialen Netzwerken und die Lawine an Inhalten von Drittanbietern ansehen, wird Ihnen schnell klar, dass Sie sich kaum darauf verlassen können, dass Ihre Dokumente so makellos bleiben wie am Tag ihrer Veröffentlichung. Nicht jeder ist schließlich so mutig wie Sie. Leider lässt sich dieses Problem weder vermeiden noch umgehen, selbst wenn Sie als DOCTYPE nicht Strict, sondern Transitional verwenden. Manchmal landet eben auch Müll auf Ihrer Site. So ist das Leben. Das Urteil: Versuchen Sie, so viele Besucher und Drittanbieter von Inhalten wie möglich dazu zu bringen, sich an Ihre Standards zu halten, ohne hierbei Ihren Arbeitsablauf oder gar Ihre Lebensweise zu ändern. In der Zwischenzeit verwenden Sie die bestmöglichen Werkzeuge, um Dinge wie Benutzerkommentare von überflüssigem Markup zu befreien.

Markup-Validierung als Voraussetzung für korrekte Stylesheet-Implementierung Hiermit kommen wir zu einer der schlimmsten schlechten Seiten, und zwar nicht, weil diese Methode vermieden werden sollte, sondern weil sie einen der größten Mängel im System von HTML und CSS aufzeigt. Sobald Sie ein schließendes Tag vergessen oder einen id/class-Wert falsch schreiben, sorgen Sie automatisch dafür, dass die Kaskade nicht mehr so funktioniert wie vorgese-

280

|

Kapitel 14: Die schlechten Seiten

hen. Auch wenn sich die Browserhersteller nach Postels Gesetz (siehe im Abschnitt »HTML-Syntax« auf Seite 7) richten und dadurch manche Fehler in der Kaskade verbergen, können Sie nicht davon ausgehen, dass das in allen Fällen funktioniert. Sobald Ihr Markup auch nur einigermaßen komplex ist, finden Sie die Fehler in der Kaskade am besten, indem Sie Ihren Code validieren. Das Urteil: Dies ist eines der notwendigen Übel, das einige strikte Konstruktionisten als eine der wenigen Barrieren loben, die angehenden Webentwicklern im Wege stehen.

»Optimiert für …« Der Fokus auf bestimmte Browserplattformen, der in den Kindertagen des Webs üblich war, ist heute kein Thema mehr. Damals war Netscape besser als Mosaic, wurde aber bald vom Internet Explorer 3.0x überflügelt, dessen Darstellung deutlich besser war als alles, was Netscape damals zu bieten hatte. Heutzutage ist es wichtig, auf welcher Plattform Sie entwickeln. Wenn Sie nicht gerade für ein Publikum arbeiten, das ausschließlich den Internet Explorer einsetzt, sollten Sie Firefox verwenden (dank seiner unvergleichlich guten Unterstützung der Webstandards). Die gute Nachricht ist, dass sich niemand dafür interessiert, welche Entwicklungsplattform Sie verwenden, und dass das auch niemand tun muss. Gelegentlich werden Ihnen trotzdem Entscheider oder Auftraggeber begegnen, die wollen, dass die Dinge genau so aussehen wie auf ihrem Rechner, selbst wenn sie uralte Hardware verwenden und am Nachmittag mit der Sonne im Rücken arbeiten. Das Urteil: Es lohnt sich, diese Auseinandersetzung zu führen. Erziehen Sie. Schleifen Sie die Entscheider persönlich von ihrem Schreibtisch weg, und fordern Sie sie auf, Ihre Arbeit einmal in einer anderen Umgebung zu betrachten. Gehen Sie bei Bedarf diplomatisch vor. Machen Sie sich für die abgestufte Unterstützung stark (im folgenden Abschnitt besprochen). Lassen Sie nicht auf sich herumtrampeln.

Abgestufte Unterstützung Wenn Sie gut aufgepasst haben, oder Ihnen Apples Designentscheidungen wirklich wichtig sind, ist Ihnen vermutlich aufgefallen, dass die meisten Personal Computer inzwischen mit 64-Bit-Systemen arbeiten. Dies ist der erste große Entwicklungsschritt im Softwaredesign seit vielen Jahren. Andererseits müssen Webentwickler heutzutage deutlich weniger Umgebungen berücksichtigen als noch vor zehn Jahren. Damals konnte eine zwei Jahre alte Workstation schon als Auslaufmodell gelten. Die größte Vielfalt müssen Gestalter mit ziemlicher Sicherheit bei den verschiedenen Bildschirmauflösungen berücksichtigen. Zwar gibt es immer noch einige Leute, die Ihre Website per Modem oder über das Handy aufrufen; die meisten Benutzer werden aber in der Lage sein, einigermaßen aktuelle Software zu benutzen. Ein hässliches System

|

281

Aufgrund der Apathie vieler gelegentlicher Webbenutzer und des vergleichsweise langsamen Fortschritts bei der Unterstützung neuer Funktionen werden Sie jedoch nicht umhin können, eine große Zahl verschiedener Browserplattformen zu unterstützen. Hierbei haben es einige Gestalter schwerer als andere. Leute, die an einem Intranet arbeiten, auf das nur mit Windows-Rechnern zugegriffen wird, brauchen sich überhaupt keine Sorgen zu machen, es sei denn, sie verwenden Software von der Stange, die von kleinen Herstellern stammt. Die Namen der Firmen, die sich mit der Browservielfalt auseinandersetzen müssen, kennt man in jedem Haushalt: Yahoo!, Amazon, Nachrichten-Websites, soziale Netzwerke wie Facebook und Diensteanbieter wie Banken und andere Zahlungsdienstleister. Yahoo! wurde hier absichtlich zuerst genannt. Yahoo! war die erste Firma, die ein Testund Klassifizierungssystem entwickelt, implementiert und bekannt gemacht hat, das auf allen Browsern angemessene Standards einhält. Jede Kombination aus Browser und Betriebssystem wird dabei von Yahoo!s Qualitätssicherungsteam in eine von drei Leistungsstufen eingeteilt: Klasse »A« Diese Browser sind aktuell, weit verbreitet und unterstützen beliebte, aber nicht veraltete Merkmale. Sie bieten sehr gute Unterstützung für standardkonforme Implementierungstechniken. Die Benutzererfahrung entspricht mehr oder weniger genau den Zielen des ursprünglichen Site-Designs. Klasse »C« Diese Plattformen profitieren am meisten vom progressive enhancement. Möglicherweise können nicht alle Funktionen so verwendet werden, wie eigentlich geplant, aber Besucher können die Site immer noch effektiv benutzen. Klasse »X« Diese Plattformen sind absichtlich nicht Teil der anderen Klassen. Viele dieser Browser sind zumindest teilweise in der Lage, die Website richtig darzustellen. Der größte Teil dieser Browser wurde gerade neu veröffentlicht. Die anderen haben einfach einen zu geringen Marktanteil. Support-Tickets für diese Plattformen werden meist ignoriert, bis der Marktanteil groß genug ist, um normale Tests zu rechtfertigen. Zusätzlich zur Klassifizierung von Yahoo! verwende ich noch eine Klasse »B«. Diese Browser unterstützen nicht das gesamte Verhalten, sind aber in der Darstellung noch sehr nah am Optimum. In manchen Fällen ist es sinnvoll, diese Prioritäten umzukehren. Da ich meistens allein arbeite und beim Testen nur wenig Unterstützung von außen bekomme, landen bei mir weit mehr Plattformen in der Kategorie »X« als bei großen Webschmieden. In meinen Projektbeschreibungen gibt es einen Punkt, der in Yahoo!s Beschreibung der abgestuften Unterstützung zu fehlen scheint: Die Benutzererfahrung sollte für jeden Besucher in einer bestimmten Klasse konsistent sein. Für die Klasse »A« sollte die Konsistenz unabhängig von der verwendeten Plattform sehr hoch sein. 282

|

Kapitel 14: Die schlechten Seiten

Jetzt fragen Sie sich vielleicht, warum das eine schlechte Seite sein soll. Für diese Einordnung gibt es mehrere Gründe. Der wichtigste lautet: Der abgestufte Support rechtfertigt die Marktposition von »Ferner liefen«-Browsern wie Internet Explorer 6 (und davor Netscape 4). Diese Browser sind nur aufgrund von Netzwerkeffekten und Beharrlichkeit noch so beliebt – jedenfalls mit Sicherheit nicht wegen ihrer Verdienste. Der zweite Grund ist, dass die Tests zur Qualitätssicherung am ehesten mit der Herstellung von Würstchen vergleichbar sind. Die Kunden wollen das Endprodukt haben, aber auf keinen Fall sehen, wie es hergestellt wird. Das Urteil: Verwenden Sie abgestuften Support gut und häufig. Behalten Sie bei den Testergebnissen die Interessen Ihrer Besucher im Auge. Das gefällt Ihnen vielleicht nicht – bestimmt aber Ihren Besuchern.

»embed« oder »object« Das andauernde Überleben des embed-Elements ist vermutlich eines der schlimmsten Beispiele für angewandte Netzwerk-Effekte. Zu den Zeiten, als Windows Media Player ein nachträglicher Einfall war, kannte man Flash am ehesten durch die Gabocorp-Website. Während der Real Networks Player half, einen Sitz im US-Senat zu bezahlen, war Netscape der erste Browser, der die Verwendung von Audio- und Video-Plugins unterstützte. Dass dabei die Arbeit des W3C an HTML 4 komplett ignoriert wurde, interessierte dabei nur wenig. Gleichzeitig versuchte Microsoft mit aller Macht, wieder Boden gutzumachen. Microsoft übernahm selbst die Rolle, das object-Element zu unterstützen, das das W3C für die Einbindung von Multimedia-Plugins vorgesehen hatte. Die Nachzügler wurden kalt erwischt. Da Netscapes Browser überall waren, konzentrierten sich Mozilla und Apple darauf, dem Rest der Bevölkerung die beste Unterstützung für die Einbindung über das embed-Element zu ermöglichen. Diese Wahl konnte selbst von Microsofts späterem Marktanteil nicht wieder rückgängig gemacht werden. Eine ausführliche Diskussion zur Verwendung von Plugin-Markup finden Sie in Kapitel 11. Das Urteil: Um mit späteren Browsern kompatibel zu bleiben, sollte object auf jeden Fall Vorrang vor embed haben. Wenn Sie die Wahl haben, verzichten Sie ganz auf den Einsatz von embed. Mittlerweile wird object so gut unterstützt, dass es in allen wahrscheinlichen Anwendungsszenarien als zuverlässig gilt.

Formularelemente, Plugins und der Stapelkontext Das Problem mit Plugin-Inhalten und Formularelementen besteht darin, dass sie unabhängig von absoluter Positionierung oder dem Wert für z-index »vor« allen anderen

Ein hässliches System

|

283

Elementen dargestellt werden. Dieses Problem ist zwar nicht mehr so dramatisch wie früher, kann aber immer wieder einmal auftreten. Diese ungewollte Prominenz von Formularelementen und Plugin-Inhalten hängt damit zusammen, wie diese Elemente vom Browser dargestellt werden. Oftmals werden diese Elemente nicht von der Rendering Engine des Browsers, sondern direkt von den entsprechenden Teilen des Betriebssystems eingefügt. Im Falle des Internet Explorers sind dies das .NET-Framework und ActiveX. Letzteres fügt object-Elemente in die Seite ein, als seien sie modale Eingabefenster. Dieses Problem ist fast schon ein »Awful Part«, weil diese Situation sich kaum lösen lassen. z-index hilft hier nicht weiter. Da hilft offenbar nur noch rohe Gewalt. Folgende Lösungen gibt es: • Überarbeiten Sie Ihr Layout, so dass es zu keinen Überschneidungen mit dem betreffenden Element kommt. • Platzieren Sie den obersten Inhalt in einem iframe, der im Quellcode nach dem störrischen Element definiert wird. Das Urteil: Dieses Problem ist im Internet Explorer deutlich schlimmer als in anderen Browsern. Wie bei vielen der IE-bezogenen schlechten Seite gibt es hierfür keine einfache Lösung, solange die Browserhersteller Ihre Software nicht anpassen.

Obskure Gründe für ungültiges Markup Der schlechteste Grund für nicht validierenden Markup-Code ist die falsche Verwendung des Ampersand-Zeichens (siehe Kapitel 13). Daneben gibt es aber noch weit frustrierendere Gründe. Mein Lieblingsbeispiel für die seltsamen Anforderungen von HTML stammt aus dem Jahre 2002, als ich gerade als offizielles »Mädchen für alles« bei Webstandards.org zu arbeiten begann. Ich verfasste gerade im Blog der Website eine Antwort auf eine eingegangene E-Mail und wollte die Seite nur noch kurz validieren. Die Seite validierte nicht und der »obskure Grund« zeigte sich. Webstandards.org verwendet für die Validierung einen DOCTYPE vom Typ Strict. Mein Artikel enthielt ein blockquote-Element. Was ich nicht wusste (ich bevorzugte Dokumente mit dem Typ Transitional), war, dass blockquote bei der Verwendung von Strict mindestens ein Blockelement enthalten muss, um gültig zu sein, zum Beispiel einen Absatz oder ein div-Element. Ein weiteres seltsames Validierungsproblem trat auf, als dieses Buch von den technischen Sachverständigen begutachtet wurde. Damit ein Dokument gültig ist, müssen die Elemente thead und tfoot im Quellcode vor tbody erscheinen und nicht erst danach. Diese und andere seltsamen Anforderungen finden Sie zusammengefasst in einem Diagramm auf der Website zu diesem Buch. 284

|

Kapitel 14: Die schlechten Seiten

Das Urteil: Sobald Sie es auf sich nehmen, gültigen Markup-Code zu schreiben, bekommen Sie es mit einigen sehr seltsamen Anforderungen zu tun. Hierzu gehören Einschränkungen für Kind-, Eltern- und Nachkommenelemente, Attribute, Werte und Inhalte. Regen Sie sich nicht darüber auf – bringen Sie es einfach in Ordnung.

Sackgassen und die bösen Nachbarn von HTML HTML ist in seiner heutigen Form mittlerweile 20 Jahre alt und war ursprünglich dazu gedacht, akademische Aufsätze und anderes geschriebenes Material auszutauschen. Den ganzen Zirkus um Flash, Ajax, Podcasts und soziale Medien konnte sich damals niemand vorstellen. Als Ergebnis wurde die Sprache nach und nach um neue Merkmale erweitert. Bis Ende 1997 konnte man den »offiziellen« Status der gegenwärtigen Erweiterungen bestenfalls als provisorisch bezeichnen. Im Laufe der Evolution von HTML, der zugrunde liegenden Infrastruktur, über die die Inhalte übertragen werden, und der Benutzererwartungen haben sich eine Menge Dinge angesammelt, die zu ihrer Zeit noch sinnvoll erschienen. Sie finden diese verkümmerten Reste im Abschnitt »Die furchtbaren Seiten« auf Seite 296. Zu den Teilen, die gelegentlich sogar nützlich sein können, kommen wir jetzt.

Frames Die Frameset-DTD bezieht sich auf zwei Elemente, die 1996 groß in Mode waren, heutzutage aber schnell peinlich wirken können: frameset und frame. frameset ist ein Ersatz für das body-Element. Es kann die Attribute rows und cols enthalten. Jede der Zeilen und Spalten bezieht sich auf ein bestimmtes frame-Element im

Dokument. Die Werte werden als Pixel- oder Prozentwerte angegeben. Mehrfache Werte werden als kommagetrennte Liste definiert. Jedes der frame-Elemente besitzt ein src-Attribut, das definiert, welches Dokument im betreffenden Frame angezeigt werden soll. Das abhängige Dokument kann hierbei entweder eine typische HTML-Seite oder ein weiteres Frameset sein. Zudem kann jedem Frame ein name-Attribut zugewiesen werden. Wird dieser Wert im Attribut target eines Links angegeben, wird das Dokument, auf das der Link verweist, im Frame mit diesem Namen angezeigt. Auf diese Weise konnte der Inhalt eines Frames den Inhalt eines anderen Frames verändern. Eine grafische Darstellung eines verschachtelten Framesets und der eingebundenen Dokumente sehen Sie in Abbildung 14-1.

Sackgassen und die bösen Nachbarn von HTML

|

285

…

Abbildung 14-1: Ein funktionierendes Frameset und das dazugehörige Markup

Frames sind voll des Glanzes und der Magie des 20. Jahrhunderts. Sie sind aber kein Feature, sondern ein Bug. Hilfstechnologien können Frame-Inhalte bestenfalls annähernd so darstellen wie visuelle Browser. Noch wichtiger ist aber, dass die Dimensionen des Webdokuments mit jedem Frame exponenziell zunehmen. Nur wenige Designer sind in der Lage, dieser Komplexität für den Benutzer einen Sinn zu geben. Die Wahrscheinlichkeit ist höher, dass der Designer beim Versuch scheitern wird, seinen Frames einen Zusammenhang zu geben. Die einzige anständige Verwendung von Frames besteht darin, die Navigation der Site in einem Frame darzustellen, während der Hauptinhalt in einem anderen Frame dargestellt wird. Abgesehen von Problemen mit der Zugänglichkeit, erhöhen sich auch die Schwierigkeiten, Ihren Benutzern zu vermitteln, wo sie sich gerade befinden. Damit der Zustand des Inhalts-Frames sich auch im Navigations-Frame widerspiegelt, ist der Einsatz von JavaScript nötig. Und auch die Darstellung der Hinweise zur Ortsbestimmung kommt ohne Skripting nicht aus. Daneben definiert die Transitional-DTD ein Element namens iframe (eingebetteter Frame). Im Markup unterscheidet sich iframe von Bildern nur durch seine Fähigkeit, 286

|

Kapitel 14: Die schlechten Seiten

Inhalte jedes MIME-Typs einzubinden, der vom Browser unterstützt wird. Auf Benutzerebene haben iframes mit normalen Frames die Möglichkeit gemeinsam, mithilfe des Attributs scrolling die Anzeige oder das Verbergen von Scrollbalken zu steuern. Es ist wesentlich wahrscheinlicher, dass Sie iframes benötigen als externe Frames, besonders wenn es um das Einbinden externer Werbung geht. Eingebettete Frames bieten außerdem die Möglichkeit, asynchrone Transaktionen wie eine Art »Arme-Leute-Ajax« durchzuführen. Mit Ajax werden asynchrone Transaktionen mithilfe von XMLHttpRequestObjekten abgewickelt, und die Ausgaben werden in die Elementstruktur des Dokuments integriert. Stattdessen kann ein Entwickler aufeinander folgende Dokumente auch in ein iframe laden, das sich außerhalb des Ansichtsbereichs befindet. Von dort können die Dokumentknoten dann in das Dokument kopiert werden, das der Benutzer sieht. Das Urteil: Verwenden Sie keine Frames. Nicht heute, nicht morgen und auch später nicht. Die Verwendung von iframes ist gerade noch verzeihlich, wenn Ihr Werbepartner dies verlangt (und damit darauf besteht, dass Sie potenziellen Angreifern ein zusätzliches Einfallstor öffnen). Ansonsten sollten Sie sich auf serverseitige Funktionalität und XMLHttpRequest verlassen, um die weniger anstößigen Funktionen von frame und iframe in Ihrer Site zu nutzen.

Das Element »strike« Kurz gesagt macht das Element del genau das, wofür strike eigentlich gedacht war. Zudem wird del inzwischen weitgehend unterstützt. Das Urteil: Verwenden Sie anstelle von strike das del-Element. Dies gilt besonders für die Entwickler von Blogging-Plattformen!

Das Attribut »name« Wie in Tabelle 14-2 zu sehen ist, kann das Attribut name an vielen Stellen auftauchen. Tabelle 14-2: Elemente, für die ein »name«-Attribut definiert werden kann, und die damit verbundenen Funktionen Element

Funktion

a

Definiert ein Linkziel im selben Dokument.

Formularelemente frame und iframe

Gibt dem Element einen Namen, mit dem es z.B. von Skripten aus angesprochen werden kann.

map meta

Gibt einem Frame einen einmaligen Namen, über den er im target-Attribut eines Links innerhalb der gleichen Präsentation angesprochen werden kann. Bennent ein map-Element, das mit einem bestimmten Bild verbunden ist. Definiert den Namen eines beliebigen Name/Wert-Paares für Metadaten des Dokuments, z.B. <meta name="keywords" \u />.

Sackgassen und die bösen Nachbarn von HTML

|

287

Das Urteil: Die Verwendung des Attributs name ist größtenteils veraltet. Die in Tabelle 14-3 gezeigten Techniken werden bevorzugt. Von diesem Hinweis sind Formularelemente als einzige nicht betroffen. Hier muss das Attribut name sogar verwendet werden. Tabelle 14-3: Bevorzugte Alternativen zum Attribut »name« Element

Bevorzugte Alternative

a

Werte für id als Verweis innerhalb des Dokuments werden von allen aktuellen Browsern unterstützt.

iframe

Implementieren Sie das gewünschte Verhalten mit JavaScript (sofern sich das Objekt mit der Politik der »gleichen Domain« vereinbaren lässt); sorgen Sie nach Möglichkeit zusätzlich für eine Alternativlösung.

map

Durch die durchgängige Unterstützung für x- und y-Werte für input type="submit" und anderen Möglichkeiten aktueller Browser gilt dieses Element als veraltet.

meta

Vermeiden Sie die Verwendung vollkommen. Der beliebteste name-Wert für das meta-Element ("keywords") wird von allen großen Suchmaschinen ignoriert.

Die Elemente »noscript« und »noframes« Die Verwendung von noscript ist nur nötig, wenn Sie die Tugend des progressive enthancement blind ignorieren. Stattdessen sollten Sie Websites und -applikationen so entwickeln, als gäbe es kein Skripting. Verwenden Sie Skripte nur, um die Benutzererfahrung über die Standardfunktionalität hinaus zu bereichern. Tatsächlich verletzt jedes andere Design die Prinzipien (und teilweise auch die Gesetze) für die Zugänglichkeit von Websites. Das Element noframes vermittelt ungefähr so viel Schutz und Zuversicht wie das Element, das es ersetzen soll. Das Urteil: Diese Elemente sollen eigentlich als Sicherheitsnetz dienen. Dies galt für die Leute bei Netscape, die die Elemente script und frame als Erste implementierten, als vernünftig. Wenn Sie diese Elemente brauchen, ist das ein deutliches Zeichen für Designprobleme. Wenn es wirklich nicht anders geht, sollten Sie die Elemente nur verwenden, um die »abgespeckte« Version Ihrer Site etwas zu verbessern. Für noframes gibt es meiner Meinung nach nur eine akzeptable Verwendung: als Link auf eine vernünftige Sitemap.

Semantische Verrenkungen und der begrenzte Wortschatz von HTML Wie bereits gesagt wurde, ist HTML weit über seinen ursprünglichen Zweck hinaus gewachsen, was Gestalter, die auf semantisch korrektes Markup achten, oft zwingt, die Quadratur eines Kreises zu versuchen.

288

|

Kapitel 14: Die schlechten Seiten

Zum Glück haben sich die Leute, die für HTML 5 und für die Verbreitung von Mikroformaten zuständig sind, eine Menge Arbeit gemacht, um das Leben von Menschen zu erleichtern, denen die Semantik am Herzen liegt. Bis dahin können wir nur das Beste aus den Werkzeugen machen, die uns jetzt schon zur Verfügung stehen. Quetschen Sie auch den kleinsten Rest an Bedeutung aus der Kaskade, Taxonomien und universellen Attributen, und konstruieren Sie Ihr Design lieber robuster und funktionsreicher als nötig. Das Urteil: Vermeiden Sie unpassende Elemente, verlassen Sie sich wo nur irgend möglich auf universelle Attribute, und warten Sie sehnsüchtig darauf, dass HTML 5 ausreichend unterstützt wird.

Präsentationselemente und wie Sie sie vermeiden Trotz der semantischen Einschränkungen von HTML 4 wurden die Präsentationselemente aus gutem Grund verworfen. Die Elemente strong, em und code existieren, um die semantische Funktion von Präsentationselementen (b, i, kbd, font etc.) zu übernehmen. Die einzige verbleibende Funktion dieser Elemente besteht darin, den typografischen Konventionen vieler Generationen zu folgen, indem fremdsprachige Wörter beispielsweise kursiv dargestellt werden. Das Urteil: Verwenden Sie diese Elemente ausschließlich unter den folgenden Bedingungen: – Es existiert kein anderes semantisch vernünftiges Markup-Element für den gewünschten Zweck. – Es gibt feststehende typografische Konventionen, die den Einsatz von Präsentationselementen rechtfertigen. – Sie haben kein Problem damit, das Element mit einem passenden universellen Attribut zu versehen, das die Beziehung zwischen dem Element, der verwendeten Schriftgestaltung und dem Inhalt des Elements klarstellt. – Gelegentlich lässt sich die Kaskade besser nutzen, wenn Sie Präsentationselemente anstelle von span verwenden. In Dokumenten mit dem DOCTYPE Strict ist das Element font ungültig und sollte überhaupt nicht benutzt werden. Wenn Sie font im Code älterer Websites finden, entfernen Sie am besten die vorhandenen Attribute, geben ihm stattdessen ein passendes class-Attribut und verschieben die Darstellung in ein Stylesheet (wo sie auch hingehört).

Sackgassen und die bösen Nachbarn von HTML

|

289

Vertikalen Leerraum verändern: »hr« und »br« Die Elemente hr (horizontale Linie) und br (Zeilenumbruch) gehören zu den ältesten Elementen, die der gegenwärtige HTML-Namensraum kennt. Dennoch sind sie Relikte einer Zeit, in der es noch keine Stylesheets gab. Trotzdem tauchen sie unter seltsamen Umständen immer wieder auf. So wird hr gelegentlich benutzt, um das Umfließen von Floats zu verhindern. Hierfür wird es per relativer Positionierung aus dem sichtbaren Bereich entfernt, und für die Eigenschaft clear wird ein anderer Wert als none festgelegt. br kann gelegentlich nützlich sein, wenn die Eigenschaft white-space (siehe unten) mehr Probleme schafft, als sie löst, und der fragliche Inhalt nicht durch den Missbrauch von div oder span formatiert werden kann. Das Urteil: Höchstwahrscheinlich finden Sie in den meisten Fällen bessere Lösungen für Ihr Problem. Trotzdem ist es möglich, dass Sie eines Tages auf diese Elemente als letzte Rettung zurückgreifen müssen. Wenn Sie eine bessere Möglichkeit finden, nehmen Sie diese. Machen Sie sich aber nicht zu viele Sorgen, wenn es einmal nicht gehen sollte.

Das Element »pre« und die Eigenschaft »white-space« Der größte Wert des Elements pre liegt in seiner standardmäßigen Darstellung durch die Browser. Sie hat den gleichen Nutzen wie die Verwendung der folgenden StylesheetRegel: p.vorformatiert { white-space: pre; }

Oftmals wird pre verwendet, um die Zeilen- und Strophenstruktur von traditionellen Gedichten zu formatieren. Dafür ist pre nicht nur unangemessen, sondern auch ungeeignet. Für diesen Zweck existieren deutlich bessere Lösungen, und ich habe mir die Mühe gemacht, auf der Website zu diesem Buch darüber zu schreiben. Das Urteil: Sie sollten pre nur dann benutzen, wenn Sie wirklich unglaublich faul sind oder dermaßen unter Zeitdruck stehen, dass es Ihnen egal ist, jetzt den Mist zu bauen, den Sie später wieder wegschaufeln müssen.

CSS-Travestien Webentwickler, die seit Mitte der 1990er-Jahre schon dabei sind und von CSS wussten, hofften inständig auf eine möglichst frühe und effektive Implementierung. Weil CSS eben noch nicht zur Verfügung stand, war Webprogrammierung zu dieser Zeit nicht immer einfach.

290

|

Kapitel 14: Die schlechten Seiten

Zehn Jahre später, auf dem Gipfel des »irrationalen Überschwangs«, konnte CSS schon deutlich mehr. Trotzdem kommt es mit den Anforderungen des gegenwärtigen Webs nicht immer zurecht. Die größten Stolpersteine behandeln wir im nächsten Abschnitt.

@-Direktiven Wie viele Designelemente sind auch @-Direktiven recht elegant. Sie bieten einen zusätzlichen Mechanismus, umden Geltungsbereich von CSS-Regeln über die Kaskade einzuschränken, was an sich schon ziemlich elegant ist. Leider ist die Unterstützung für @-Direktiven noch nicht sehr weit verbreitet. Das liegt teilweise an den folgenden Dingen: • Je nach ihrer Position im Quellcode eines Dokuments oder Stylesheets können Browser die @-Direktiven anwenden – oder auch nicht. • Für die Direktiven @import und @media können zusätzliche, vom Browserhersteller festgelegte Attribute definiert werden, die in den meisten Fällen aber nicht klar dokumentiert sind. • Die Unterstützung für alternative Medien ist noch lange nicht ausgereift (siehe Kapitel 3). Das Urteil: Wenn @-Direktiven funktionieren, sind sie großartig, wenn nicht, dann nicht. Einige der hier beschriebenen Merkmale werden Ihnen hoffentlich im richtigen Moment einfallen. Allerdings ist es eher unwahrscheinlich, dass @-Direktiven dazugehören.

Berechnete Werte und Rundungsunterschiede Jedes visuelle Anzeigemedium verwendet eine Grund-Längeneinheit, wie in Kapitel 3 bereits detailliert erklärt wurde. Daher muss der Browser Werte, die in anderen Maßeinheiten angegeben wurden, beim Rendern der Seite in seine native Einheit umrechnen (bei Bildschirmen meist Pixelwerte). Speziell bei Längeneinheiten spricht man daher auch von »berechneten Werten«. Schlecht definierte CSS-Regeln können zu vollkommen anderen berechneten Werten führen, als im Stylesheet angegeben. Ein gutes Beispiel hierfür ist der bereits beschriebene Double Margin Bug. Unterschiede in den visuellen Eigenschaften und in den Algorithmen zur Schriftdarstellung der verschiedenen Browser können gelegentlich zu Rundungsfehlern führen. Oft treten sie zu deutlich in Erscheinung, als dass man sie einfach ignorieren könnte. So werden berechnete Werte für letter-spacing, die kleiner als ein Pixel sind, am Mac nicht umgesetzt, was sich wiederum auf die Größe von Elementen auswirken kann. Führen diese Variationen zu deutlichen Layout-Unterschieden zwischen verschiedenen Plattformen, z.B. bei Designs mit geringer Fehlertoleranz, kann das schnell frustrierend werden.

CSS-Travestien

|

291

Das Urteil: Müssen Designs so präzise sein, dass sich Rundungsfehler nicht vermeiden lassen, können zwei Angewohnheiten das Gefahrenpotenzial verringern helfen: Zum einen sollten Sie Fließkommawerte möglichst genau angeben, d.h. mit drei, wenn nicht sogar vier Nachkommastellen. Zweitens sollten Sie sich im Stylesheet auf ein Medium beschränken und die dafür passenden Längeneinheiten verwenden, z.B. PC für den Medientyp screen und pt/in/cm für print.

Herstellerspezifische Präfixe: »-moz« und »-webkit« Da die Benutzer von Firefox und Safari recht gewissenhaft mit dem Web umgehen und gerne neue Technologien einsetzen, gibt es gute Gründe dafür, dass diese Produkte Neuerungen recht früh implementieren. Die korrekte Unterstützung von CSS 2.1 und anderen »offiziellen« Standards ist ein Hauptargument für die Verwendung dieser Browser. Gleichzeitig unterliegen die von den Browsern unterstützten CSS 3-Eigenschaften oft noch gewissen Veränderungen. So haben bisher die wenigsten CSS 3-Module den Status eines Last Call Working Draft erreicht. Dies ist der letzte Schritt vor einer offiziellen Empfehlung des W3C (was einem De-facto-Standard entspräche), in dem die allgemeine Öffentlichkeit die Entwicklung einer Webtechnologie mitbestimmen kann. Da CSS 3 sich immer noch in der Entwicklung befindet, wurde die Unterstützung neuer Eigenschaften von den Browser-Entwicklern mit einem speziellen »Sandkasten« umgeben. Dies sind die Präfixe -mox und -webkit. Der Wunsch nach der Verwendung dieser Eigenschaften ist eine andere Frage. Die Antwort darauf muss jedes Entwicklungsteam entsprechend seiner Entwicklungsphilosophie und seiner Projektziele selbst finden. Das Urteil: Benutzen Sie diese Eigenschaften, wenn Sie wollen. Seien Sie aber auf unerwünschte Folgen vorbereitet, besonders dann, wenn neue Browserversionen veröffentlicht werden, nachdem die entsprechenden CSS 3-Module den Status einer offiziellen W3C-Empfehlung einmal erreicht haben.

Der Wert »inherit« Vererbung ist eine komplizierte Sache. In den meisten Fällen werden Schriftfarben und -größen von den Vorfahren-Elementen an ihre Nachkommen vererbt. Bei Box- und anderen Layout-Eigenschaften ist das jedoch nicht der Fall. Es gibt Situationen, in denen Sie die Vererbung dieser Werte erzwingen wollen, auch wenn dies eher selten ist. Das Problem dabei ist, dass der Wert inherit nicht von allen Browsern korrekt unterstützt wird.

292

|

Kapitel 14: Die schlechten Seiten

Das Urteil: Es wäre schön, wenn inherit eines Tages browserübergreifend unterstützt würde. Für die richtige Verwendung ist allerdings viel Fingerspitzengefühl gefragt. Bis es so weit ist, bleibt uns nur, die literalen Werte wo nötig zu wiederholen.

Dinge verstecken: »z-index« und »clip« Auf den ersten Blick scheinen die Eigenschaften z-index und clip unglaublich nützlich zu sein. Mit der einen können Sie die Reihenfolge der Elemente auf der z-Achse (die Entfernung vom Betrachter, wenn Sie so wollen) verändern, die andere beeinflusst teilweise ihre Sichtbarkeit. In der Praxis ist die Verwendung dieser Eigenschaften jedoch deutlich schwieriger als angenommen. Um z-index richtig zu benutzen, muss man sich klarmachen, dass der Stapelkontext eines Dokuments schichtweise organisiert ist, so als würden Sie mehrere Folien übereinander auf einen Projektor legen. Die Reihenfolge ist wie folgt: 1. der Ansichtsbereich (bzw. die »Zeichenfläche«) des Browsers 2. Block-Elemente ohne Werte für float oder position 3. Elemente, die als Float definiert wurden (float: left bzw. float: right) 4. Elemente mit einem anderen Wert für position als static Die Elemente selbst haben außerdem eine eigene Stapelreihenfolge. Zuerst wird das Element mit den jeweiligen Hintergrundeigenschaften versehen (background-color, background-image), danach kommt der eigentliche Inhalt. Davor werden möglicherweise Elemente überlagert, die sich in der gleichen »Schicht« befinden, aber erst später in der Quellcode-Reihenfolge vorkommen. Diese »innere« Stapelungsreihenfolge wird für jede Schicht wiederholt. Mit z-index können Sie diese Reihenfolge gezielt verändern. Ist der Wert größer als null, erscheint es vor allen anderen Elementen, ist der Wert kleiner, wird es weiter hinten angezeigt. Hierfür muss position allerdings einen anderen Wert als static haben. Leider wird rect, der einzig sinnvolle Wert für clip, von keinem Browser gemäß der CSS 2.1-Spezifikation umgesetzt. Die Idee hinter clip ist lobenswert: ein Element zu verkleinern, ohne hierfür die Größe seiner Inhaltsbox zu verändern. Dadurch stehen die Werte für spätere Manipulationen über die DOM-API zur Verfügung. Allerdings werden die Werte im Gegensatz zur Eigenschaft padding von der linken oberen Ecke des Elements aus gemessen. Dieses Verfahren kann nur richtig funktionieren, wenn Sie die Größe des Elements zur Laufzeit genau kennen. Das Urteil: Theoretisch ist das eine gute Idee, in der Praxis jedoch nicht verwendbar. Diese Eigenschaften gehören zu den Mängeln, die Gestaltern ihren Schlaf kosten.

CSS-Travestien

|

293

Zähler Auch wenn die Möglichkeit, mit CSS automatisch zu zählen, recht unbekannt ist, lohnt es sich, einen Blick darauf zu werfen. Leider ist das ganze System ein großes Wrack, da die Richtlinien undurchschaubar sind und die Funktionalität vom Internet Explorer nicht unterstützt wird. Das Urteil: Anstatt wie die existierenden Regeln mit imaginären Werten zu arbeiten, wäre es deutlich besser, wenn die Funktionalität durch einen einzelnen Wert für counter ersetzt würde. Dieser Wert hinge vom Zustand seines Vorgänger-Elements ab und würde zwei Parameter übernehmen: einen Startwert und eine Angabe der Prioritätsebene. Die meisten Gestalter – mich eingeschlossen – würden lieber mit einer eingeschränkten automatischen Nummerierung arbeiten statt mit einer mächtigen vollautomatischen Nummerierung, die sich nicht implementieren lässt.

Regeln für den Fluss der Elemente Sitzen Sie auch manchmal mit offenem Mund vor Ihrem Bildschirm und fragen sich, warum der Browser Ihre Stylesheet-Regeln ausgerechnet so umsetzt? Der Grund liegt vermutlich in der nicht immer leicht verständlichen Sprache der CSS-Spezifikationen. Lassen Sie sich folgenden Text auf der Zunge zergehen: Eine Zeilenbox ist immer hoch genug, um alle enthaltenen Boxen in sich aufzunehmen. Sie kann jedoch auch höher als die höchste enthaltene Box sein (z.B. wenn die Grundlinien der Boxen aneinander ausgerichtet werden). Ist die Höhe einer Box B geringer als die Höhe der enthaltenden Zeilenbox, wird die vertikale Ausrichtung von B innerhalb der Zeilenbox durch die Eigenschaft vertical-align bestimmt. Passen mehrere Inline-Boxen nicht horizontal in eine einzelne Zeilenbox, werden sie auf zwei oder mehr vertikal gestapelte Zeilenboxen verteilt. Ein Absatz ist daher ein vertikaler Stapel aus Zeilenboxen. Gestapelte Zeilenboxen besitzen keine vertikale Trennung und überschneiden sich nicht. Im Allgemeinen berührt die linke Kante einer Zeilenbox die linke Kante des umgebenden Blocks, und die rechte Kante berührt die rechte Kante des umgebenden Blocks. Allerdings können Float-Boxen zwischen die Kante des umgebenden Blocks und die Kante der Zeilenboxen geraten. Daher können Inline-Boxen, obwohl Zeilenboxen im gleichen Inline-Formatierungskontext normalerweise die gleiche Breite haben (die des umgebenden Blocks), unterschiedliche Breiten haben, wenn der verfügbare horizontale Raum aufgrund von Floats verkleinert wird. Zeilenboxen im gleichen Inline-Formatierungskontext haben allgemein eine unterschiedliche Höhe (z.B. kann eine Zeile ein hohes Bild enthalten, während andere nur Textinhalte haben). CSS 2.1 Spezifikation: Abschnitt 9.4.2, »Inline-Formatierungskontext«

Alles verstanden? In der Zwischenzeit war ein unglücklicher Softwareentwickler gezwungen, diese Passage zu verstehen und Software zu implementieren, die diesen Regeln folgt. Sie benutzen diese Software jeden Tag.

294

|

Kapitel 14: Die schlechten Seiten

Dieser Mangel von CSS illustriert die Vorzüge von Gemeinschaften. Wenn Sie einer aktiven Gemeinschaft gleichgesinnter Kollegen beitreten können, gibt es immer mindestens eine Person, die das »Zen« in Passagen wie der oben genannten gefunden hat. Das Urteil: Erleuchtung ist eher ein Prozess als ein Zustand. Bilden Sie sich entsprechend weiter, selbst wenn Sie gelegentlich zähneknirschend noch einmal von vorne anfangen müssen.

Unicode-Werte und die Eigenschaft »content« Die Eigenschaft content (behandelt in Kapitel 7 und Kapitel 8) hat einen bedeutenden Mangel: Sie unterstützt keine Zeichen-Entities. Wenn Sie :before, :after und content in Ihrem Stylesheet benutzen, haben Sie drei »sichere« Möglichkeiten, Zeichen außerhalb des 7-Bit-ASCII-Bereichs anzugeben: • Stellen Sie sicher, dass sowohl Ihre Entwicklungswerkzeuge als auch der Webserver die gleiche Zeichenkodierung verwenden, bevor Sie ein literales Zeichen einfügen. • Verwenden Sie in Ihrem Stylesheet die korrekte @charset-Direktive, und fügen Sie dann das literale Zeichen ein. • Verwenden Sie durch Backslash geschützte Unicode-Werte, um den gewünschten Inhalt anzugeben. In der gegenwärtigen Praxis haben alle drei Methoden ihre Fallstricke. Die erste Wahl ist nur dann ungefährlich, wenn Sie vollkommene Kontrolle über Ihre Entwicklungsumgebung und den Server haben, was lange nicht bei allen Leuten der Fall ist. Der zweite Weg ist nicht gangbar, weil einige ältere Versionen des Internet Explorers und von Safari sich gerne an @charset-Direktiven verschlucken. Für die dritte Methode gibt es keine ausreichende Unterstützung. Immerhin ist sie vorwärtskompatibel und immun gegen Änderungen der Serverkonfiguration und Netzwerkbedingungen. Wollen Sie im Wert für die Eigenschaft content ein Unicode-Zeichen verwenden, muss dieses als hexadezimaler Wert angegeben werden, dem ein Schrägstrich vorangestellt wird, wie hier gezeigt: blockquote > p:before { content: ’\201D’; }

Hiermit platzieren Sie ein doppeltes öffnendes Anführungszeichen an den Anfang jedes Absatzes, der sich in einem blockquote-Element befindet, da der hexadezimale Wert 0x201 dem Dezimalwert 8221 entspricht. Das Urteil: Verwenden Sie bei Bedarf UTF-8-Zeichen, aber prüfen Sie, dass der Server entsprechend konfiguriert ist.

CSS-Travestien

|

295

Die furchtbaren Seiten Ab hier wird es richtig schlimm: HTML und CSS sind voll mit Dingen, die veraltet, schlecht überlegt und – für sich genommen – unvermeidlich sind, obwohl sie eigentlich gut gemeint waren. Und dann gibt es da die Scheußlichkeiten, die es auf unerklärliche Weise aus dem letzten Winkel von jemandes Hirn auf die Rückseite eines Bierdeckels, durch diverse Meetings auf die Action Item List des Vorgesetzten eines Managers geschafft haben, von dort aus im Code gelandet sind und sich schließlich in den dampfenden Eingeweiden eines Webbrowsers wiederfinden. Verwenden Sie die in diesem Abschnitt beschriebenen Werkzeuge nur, wenn die Weigerung Ihre Entlassung zur Folge hat.

Die Elemente »marquee« und »blink« Diese Elemente sind Relikte aus der Pubertät des Webs. Tatsächlich ist das Element blink standardmäßig in Firefox deaktiviert, wird aber immer noch unterstützt. Allerdings zwingen diese Elemente Ihre Besucher dazu, ihre Aufmerksamkeit auf mehrere Dinge gleichzeitig zu richten. Zudem bergen sie das Risiko, einen epileptischen Anfall auszulösen. Das Urteil: Animationen sind kein Inhalt. Sie sind weder Teil der Struktur noch der Darstellung, sondern des Verhaltens. Wenn Sie Animationen verwenden müssen, tun Sie das mit JavaScript oder Flash, und gehen Sie dabei vorsichtig vor.

Eigenschaften der Benutzeroberfläche (IE) Wie sich zeigt, bietet der Internet Explorer Designern die Möglichkeit, die Darstellung von Scrollbalken und Browserfenstern zu beeinflussen. Dies schafft Gelegenheit, die Markenidentität auf andere Teile der Benutzeroberfläche auszudehnen. Manche Leute sehen darin einen Vorteil. Leider stimmt das nicht. Wenn Sie anfangen, an einer Benutzeroberfläche herumzuschrauben, die in allen Programmen gleich aussieht, missachten Sie die Erwartungen der Benutzer. Das kann sogar dazu führen, dass einige Leute denken, ihr Rechner hätte sich einen Virus eingefangen. Alternative: Erstellen Sie lieber eine richtige Adobe AIR-Applikation. Auch wenn es Sie zwingt, ein paar Räder neu zu erfinden, können Sie sich damit einen guten Verdienst sichern.

296

|

Kapitel 14: Die schlechten Seiten

Das Attribut »align« In der guten alten Zeit, als es noch kein CSS gab bzw. als es zumindest noch nicht verlässlich funktionierte, mussten Webentwickler ihre Designs mithilfe von Tabellenmarkup und des Attributs align umsetzen. Nach dem Lesen dieses Buches sollten Sie gemerkt haben, dass sich die Technologien in den vergangenen Jahren etwas verbessert haben. Alternative: Entfernen Sie das Attribut, wo es Ihnen begegnet, und verwenden Sie stattdessen die passenden Werte für float, margin oder text-align.

Das Attribut »style« Da gibt es also dieses universelle Attribut, mit dem Sie CSS-Stile auf den kleinstmöglichen Bereich beschränken können, wobei Sie davon ausgehen, dass Ihre Werte auch verwendet werden. Manche Leute haben auch die Grippe. Die scheinen auch nichts zu tun, um ihre Verbreitung zu verhindern. Durch die Verwendung des Attributs style zerstören Sie die Kaskade, Medientyp-Deklarationen und jede Hoffnung, Ihre Arbeit später noch warten zu können. Lassen Sie einfach die Finger davon. Das Urteil: Setzen Sie sich hin, blättern Sie in diesem Buch, lesen Sie im Abschnitt »Regelkonflikte, Priorität und Präzedenz« auf Seite 31, und wenden Sie das Gelernte an. Eventuell ist das style-Attribut leichter zu verstehen, wenn Sie sich nur auf das Markup konzentrieren. Für Gestalter ist style jedoch ungefähr das Gleiche wie ein Erdöl-Bohrloch in 1.500 Metern unter dem Meeresspiegel, das sich nicht stopfen lässt.

Div-itis Entwickler, die das Konzept des »CSS-Zen« nicht kennen, erliegen leicht der Versuchung, das Markup für ihre Darstellung so zu erstellen, als würden sie immer noch mit tableTags arbeiten. Diese Angewohnheit wird aus gutem Grund als div-itis bezeichnet. Das Ergebnis ist ein Dokument voller Markup-Elemente, die nur für die Präsentation da sind, anstatt zukünftige Entwicklungen zu erleichtern. Diese Elemente lassen sich recht einfach finden. Normalerweise spiegeln die Werte für class oder (wesentlich seltener) id nicht die Funktion des Inhalts wider, sondern beziehen sich auf dessen Darstellung. Häufig tragen diese id- bzw. class-Attribute Werte wie rechts und links.

Die furchtbaren Seiten

|

297

Das Urteil: Die div-itis kann mit einer Vielzahl von Techniken vermieden werden. Am wichtigsten ist die Verwendung von Werten für class und id, die den Zweck eines Elements widerspiegeln und nicht dessen Beziehung zur Darstellung eines Dokuments. Weitere wichtige Techniken sind: – moderates Übererfüllen der Anforderungen (siehe im Abschnitt »Die vier wichtigsten Angewohnheiten für effektive Stylesheets« auf Seite 49) – Anpassung des Positionierungskontexts (siehe im Abschnitt »CSS-Eigenschaften für die Positionierung« auf Seite 99) – sorgfältige Verwendung von Hintergrundbildern (siehe im Abschnitt »Hintergrundbilder erstellen« auf Seite 157) – effektive Verwendung aller verfügbaren Box-Eigenschaften (siehe im Abschnitt »Rahmen, Innen- und Außenabstände« auf Seite 81)

Attribute für Event-Handler Event-Handler im Markup unterscheiden sich kaum von style-Attributen. Sie sind sogar noch unnötiger (sofern das überhaupt geht). Wenn Sie Event-Handler direkt für bestimmte Tags definieren, verlagern Sie Verhalten in die strukturelle Schicht Ihrer Website. Hierbei ist der Ärger schon vor »programmiert« (und Ihr Markup ist wesentlich schwerer zu lesen). Auf längere Sicht ist die unaufdringliche Verwendung von JavaScript deutlich leichter zu handhaben. Das Urteil: 1. Überlegen Sie, welchen Elementen Sie Events zuweisen wollen, und fügen Sie die nötigen universellen Attribute ein, um dann nach Bedarf über die DOMAPI darauf zuzugreifen. 2. Erstellen Sie eine Funktion, die beim Laden der Seite (onLoad) aufgerufen wird, z.B. so: window.onload = EventsZuweisen;

3. Durchlaufen Sie in der onLoad-Funktion die in Schritt 1 ermittelten Elemente, und weisen Sie ihnen die benötigten Event-Handler und den entsprechenden Code zu. 4. Müssen die Events zu einem bestimmten Zeitpunkt aufgerufen werden oder haben sie mehrfache Abhängigkeiten, müssen Sie möglicherweise Closures für die Behandlung Ihrer Events benutzen. Links zu Anleitungen, die die Verwendung von JavaScript-Closures beschreiben, finden Sie auf der Website zu diesem Buch.

298

|

Kapitel 14: Die schlechten Seiten

Überflüssige Unterstreichungen Wenn Ihnen Unterstreichungen gefallen, brauchen Sie möglicherweise einen Realitätsabgleich. Unterstreichungen sind für Links da, nur für Links und für sonst nichts. Das entspricht einer der wichtigsten Erwartungen Ihrer Besucher. Aber vielleicht wollen Sie ja, dass Ihre Besucher wild herumklicken, um auf eine andere Seite Ihrer Website zu gelangen. Das Urteil: Außer für Links gibt es nur zwei sinnvolle Verwendungen für Unterstreichungen: für mit dem ins-Element gekennzeichnete Inhalte (die standardmäßig vom Browser unterstrichen werden) und für Betonungen in Texten, die aussehen sollen, als seien sie mit einer Schreibmaschine geschrieben worden. Im ersten Fall sollten Sie sicherstellen, dass die unterstrichenen Einfügungen sich in der Gestaltung deutlich von Links unterscheiden; im zweiten Fall sollten Sie die entsprechenden Stile für das em-Element definieren und Ihren «Schreibmaschinen«-Inhalt in einem Bereich platzieren, der visuell vollständig vom restlichen Text Ihrer Seite getrennt ist.

Das Attribut »http-equiv« Manche Leser arbeiten mit Systemadministratoren zusammen, die der extremen – und oftmals kontraproduktiven – Praxis anhängen, jede mögliche Änderung an der Konfiguration des Webservers auszuschließen. Wenn Sie einer dieser Leser sind, gilt die folgende Passage nicht für Sie.

Als die allgemeine Öffentlichkeit begann, ihre eigenen Websites ins Netz zu stellen, waren virtuelle Domains das sprichwörtliche Licht, das manchen Leuten aufging. Die Unterstützung für serverseitiges Skripting war teuer und nur schwer zu benutzen. Vor 15 Jahren waren die Server-APIs nur den wahren Gurus vorbehalten. Wie Frames war das Attribut http-equiv dazu gedacht, das Verhalten von Webservern nachzubilden, ohne hierfür große Mengen an Geld, Zeit und Aufwand investieren zu müssen. Das Urteil: Glücklicherweise ist das Web längst aus der Zeit der Feuersteinmesser und Bärenfelle herausgewachsen. Wenn Sie das Verhalten des Webservers für Ihre Site anpassen wollen, verwenden Sie die HTTP-API-Module, die von Ihrem Webhosting-Anbieter für die verschiedenen Skriptsprachen bereitgestellt werden. Oder benutzen Sie Apache und seine .htaccess-Plattform. Es ist einfacher, als Sie denken, und Beispielcode ist im Web reichlich zu finden. Mehr dazu finden Sie auf der Website zu diesem Buch.

Die furchtbaren Seiten

|

299

Das Puzzle wieder zusammensetzen HTML und CSS haben ihre guten Seiten, die für hervorragende Ergebnisse sorgen. Sie besitzen schlechte Seiten, mit denen Sie lieber nichts zu tun haben sollten. Und schließlich gibt es wie bei jeder Technologie auch in HTML und CSS einige furchtbare Seiten, denen Sie am liebsten nie begegnen würden. Wenn Sie diese Teile bei der Benutzung bestimmter Werkzeuge unterscheiden können, sind Sie in der Lage, den meisten Ärger von Ihren Arbeitsergebnissen fernzuhalten und die bestmögliche Wartbarkeit der von Ihnen erstellten Websites zu gewährleisten.

300

|

Kapitel 14: Die schlechten Seiten

ANHANG

URIs, Client-Server-Architektur und HTTP

Das Web als Hypertext-Medium erschafft eine (virtuelle) Landschaft, die es in der Geschichte der Menschheit so noch nicht gegeben hat. Das Internet als Struktur, die dem Web zugrunde liegt, wird dabei kaum bemerkt. Webentwickler brauchen nur wenige Kenntnisse von den Dingen wie TCP/IP und DNS, die unter der Haube vor sich gehen. Das Hypertext Transfer Protocol (HTTP) dagegen ist für die Erstellung von Websites außerordentlich wichtig, denn es bildet die Basis für all die http://-URIs, die in Links und anderen Referenzen verwendet werden.

Die zugrunde liegende Client-Server-Architektur Client-Server-Protokolle (inklusive HTTP) folgen während einer Transaktion den in Abbildung A-1 gezeigten Schritten. Nameserver Ein HTTP-Request besteht aus sechs Grundschritten 1. Nameserver-Abfrage; 2. TCP/IP-Verbindung vom Client (Browser) zum Server; 3. Tatsächliche Anfrage (Request); 4. Verarbeitung des Requests durch den Server; 5. Serverantwort (Response); 6. Empfang durch den Client, Parsing und Darstellung

1

6

2 3 5

Client

4

Webserver

Abbildung A-1: Client-Server-Architektur als Folge von sechs Schritten

1. Der Client fordert bei Bedarf die IP-Adresse des Servers von einem Nameserver an. 2. Der Client öffnet eine Transportverbindung zum Server; im Falle von HTTP geschieht dies per TCP/IP. |

301

3. Danach schickt der Client über die Verbindung Daten an den Server, die dazu geeignet ist, eine Antwort vom Server zu erhalten. Diese Anfrage wird normalerweise als Request bezeichnet. 4. Der Server nimmt den Request entgegen und verarbeitet ihn, indem er sämtlichen dafür nötigen Code ausführt und die resultierende Ausgabe für die Antwort an den Client verpackt. 5. Der Server schickt die verpackten Daten über die vom Client in Schritt 2 geöffnete Verbindung an diesen zurück. Dieser Schritt wird allgemein als Response bezeichnet. 6. Der Client nimmt die Daten entgegen. Sofern diese korrekt formatiert sind, speichert und verarbeitet er die erhaltenen Daten lokal. Im Falle einer Web-Transaktion ist das Resultat der Verarbeitung oftmals die Darstellung einer Seite. Die Abfolge dieser Schritte enthält eine Reihe möglicher Fehlerquellen. Am bekanntesten ist wohl der berüchtigte HTTP-Fehler 404 (»Not Found«), der meist in Schritt 3 des Prozesses auftritt.

Was jeder Webentwickler über HTTP wissen sollte Die Feinheiten von HTTP und des Betriebs von Webservern würden den Rahmen dieses Buches sprengen. Dennoch gibt es ein paar Dinge, die jeder Entwickler von Websites unabhängig von seiner oder ihrer Spezialisierung wissen sollte.

Wenn ein Browser eine Seite anfordert, wird so gut wie immer mehr als ein Request durchgeführt. Stylesheets, Skriptdateien und Bilder müssen ebenfalls angefordert und heruntergeladen werden.

Abbildung A-2: Die Anforderung einer Webseite, inklusive zusätzlicher Requests für Stylesheets, Skriptdateien und Bilder

302

|

Anhang: URIs, Client-Server-Architektur und HTTP

Es gibt nur wenige Vorsichtsmaßnahmen gegen Netzwerklatenzen. Die wenigen, die es gibt, sorgen für eine Beendigung der Sitzung (auch als Timeout bekannt). Es ist unmöglich, den Zustand und das Ausmaß des Netzwerks zwischen Server und Browser genau zu kennen. Daher kann man sich weder auf eine bestimmte Reihenfolge verlassen, in der die Bestandteile einer Seite geladen werden, noch lässt sich festlegen, wie lange eine Seite zum Laden braucht. Jeder Request für eine einzelne Seite hat normalerweise weitere Requests auf verschiedene weitere URIs zur Folge. Wie in Abbildung A-2 gezeigt wird, enthalten Seiten Bilder, Multimediadaten, Codebibliotheken und andere externe Ressourcen. In Umgebungen mit hoher Latenz können Verzögerungen zu einer deutlichen Verschlechterung der Benutzererfahrung führen. In Umgebungen mit hohem »Verkehrsaufkommen« kann ein schlechtes Ressourcenmanagement den Webserver überlasten. Daher sollten Sie versuchen, die bestmögliche Kombination aus der Verwendung von Webserver-Ressourcen und Netzwerkbelastung zu finden. Diese Suche liegt vor allem in der Verantwortung der Leute, die den HTML- und CSS-Code schreiben. HTTP ist ein zustandsloses Protokoll »Zustandslos« heißt hier, dass die Transaktionen zwischen Webserver und Client unabhängig voneinander durchgeführt werden. Zwischen einem und dem nächsten Request besteht kein Zusammenhang. Hilfslösungen wie Cookies ermöglichen es dem Server aber, den Kontext bei Bedarf herzustellen. Zudem können dem URI Sitzungsparameter angehängt werden, wodurch diese allerdings ziemlich lang werden können. Die wichtigste Konsequenz für HTML/CSS-Entwickler besteht darin, dass die Zustandslosigkeit es unmöglich macht, den Zustand der Client-Umgebung vorherzusagen. Das erschwert Annahmen über die Benutzererfahrung während der gegenwärtigen Sitzung, was wiederum große Auswirkungen auf Versuche hat, die Website zu optimieren. Ein HTTP-Request hat typischerweise eine von zwei Formen: GET oder POST Man kann davon ausgehen, dass die meisten Anfragen an den Webserver als GETRequests übergeben werden. Allerdings gibt es viele Gelegenheiten, bei denen aus technischen oder Sicherheitsgründen POST-Requests die bessere Wahl sind. Dies gilt besonders für Anfragen, bei denen Formulare mit Besucherdaten übertragen werden. Eine detaillierte Erklärung zum Unterschied zwischen GET und POST finden Sie in Kapitel 13. (HTTP unterstützt noch weitere Request-Formen, aber GET und POST erledigen die meiste Arbeit.)

MIME-Typen in aller Kürze Neben der DOCTYPE-Deklaration, die der Autor einer Seite am Anfang des Quellcodes angibt, übergibt der Server zusätzliche Informationen zu den von ihm unterstützten Datenformaten. Diese Informationen werden im MIME-Format (was für Multipurpose

MIME-Typen in aller Kürze

|

303

Internet Mail Extensions steht) übergeben und aus Sicherheitsgründen mitgeschickt. Einige häufig verwendete MIME-Typen sehen Sie in Tabelle A-1. Tabelle A-1: Häufig verwendete MIME-Typen Art der Ressource

Verwendeter MIME-Typ

HTML

text/html

Korrekt übergebenes XHTML

application/xhtml+xml

Bilder und Grafiken

image/gif, image/jpeg, image/png, image/svg+xml

Adobe Portable Document Format (PDF)

application/pdf

Adobe Flash

application/x-shockwave-flash

MP3-Audio

audio/mpeg

Windows Media

video/x-ms-wmv, audio/x-ms-wma

Es gibt drei auf ihre Art wichtige Möglichkeiten, den MIME-Typ einer Datei oder Server-Response anzugeben: Standard-Response-Header des Servers In der Konfiguration des Webservers ist es möglich, MIME-Typen bestimmten Dateiendungen zuzuordnen. Über ein serverseitiges Skript ausgegebene Response-Header Die HTTP-Funktionen der größeren Webserver-Skriptsprachen enthalten Möglichkeiten, den MIME-Typ nach Bedarf anzugeben. In PHP könnte das etwa so aussehen: Header("Content-Type: text/xhtml+xml\r\n");. Dateiendungen Webbrowser überprüfen auf verschiedene Weise den Inhalt, den sie erhalten. Zuerst wird der im Response-Header übergebene MIME-Typ getestet, danach die Dateiendung (z.B. .png) und zum Schluss die in der Datei selbst enthaltenen Kopfzeilen. Allerdings sollten Sie sich nicht auf die Fähigkeiten des Browsers verlassen, da es keine Hilfe für die Behandlung fehlerhafter Daten gibt, wie sie vor allem bei Videofilmen und -streams zu finden sind.

Die Anzahl der Requests kontrollieren Zu komplexe Stylesheets können einige Schwierigkeiten hervorrufen, die zutage treten, wenn Designer und Entwickler Ihre Designs nicht für die Kommunikation zwischen Client und Server optimieren. Für Gestalter sind folgende Punkte dabei besonders wichtig: Liefern Sie nach Möglichkeit alle Dateien, die mit einem bestimmten Dokument zusammenhängen, vom gleichen Server bzw. von der gleichen Gruppe von Servern aus. Das funktioniert nur selten, wenn Ihr Projekt Werbung von Drittanbietern enthält (z.B. Multimediadateien oder Daten aus sozialen Netzwerken). Je mehr die Ressour-

304

|

Anhang: URIs, Client-Server-Architektur und HTTP

cen einer Site aber auf einem Server konzentriert sind, desto geringer ist das Risiko, dass die Seiten aufgrund von Fehlern nicht mehr funktionieren, die jenseits der Kontrolle des Betreibers liegen. Im Allgemeinen sollte die Anzahl von Server-Requests möglichst gering gehalten werden. Ein gut konfigurierter Serverrechner mit einer angemessenen Anbindung kann problemlos mehrere Hunderttausend HTTP-Requests pro Stunde verarbeiten. Das ist aber nicht das Gleiche wie die Behandlung von mehreren Hunderttausend Besuchern pro Stunde. Selbst eine einfache statische Seite kann schon für Dutzende von EinzelRequests nach Stylesheets, JavaScript-Dateien und Bildern verantwortlich sein. Zu den Techniken zur Verringerung der Anfragen gehört die Verwendung von Sprites, die Verwendung des style-Elements für einmalig verwendete Stylesheet-Regeln und das gepufferte (»cached«) Zusammenfassen von serverseitigem Markup und CSSRessourcen per include und Funktionen für den Ausgabepuffer. Platzieren Sie JavaScript-Dateien nach Möglichkeit am Ende der Quellcode-Reihenfolge. Auf diese Weise können die Netzwerkanfragen und die Ausführungszeit für JavaScript so lange aufgeschoben werden, bis der eigentliche Inhalt der Seite geladen ist, was wiederum zu großen Verbesserungen für die Ladezeit der Seite führt. Eine Sekunde hier, eine Sekunde da, und schon bald reden Sie von einer echten Zeitersparnis. O’Reilly hat einige Bücher im Angebot, die sich tiefergehend mit der Performance-Steigerung beschäftigen: • High-Performance Web Sites (deutsche Ausgabe) von Steve Souders • Even Faster Web Sites von Steve Souders • Website Optimization: Speed, Search Engine, and Conversion Rate Secrets von Andrew B. King

Die Anzahl der Requests kontrollieren

|

305

Glossar

ANSI

Benutzerprogramm (User Agent) American National Standards Institute. In der USamerikanischen Technologie-Industrie kann man ANSI analog zu Ecma International (früher bekannt als ECMA) sehen. Der Name wird in diesem Buch im Zusammenhang mit Schriften genannt, weil die frühen Windows-Zeichenkodierungen auf einem Standard-Entwurf basierten, der zuerst von der ANSI vorgeschlagen wurde. Erst danach wurde er von der International Organization for Standardization (ISO) übernommen. Vgl. Windows-1252 und ISO 8859-x.

ASCII Steht für American Standard Code for Information Interchange. Dies war der erste Zeichensatz, der für sich beanspruchen konnte, in der gesamten englischsprachigen Welt unterstützt zu werden. Selbst 50 Jahre nach seiner Einführung ist er noch allgegenwärtig. Er ist beschränkt auf einfache lateinische Schriftzeichen, wie sie im Englischen verwendet werden, Whitespace-Zeichen und Telex-spezifische Kontroll- und Übertragungszeichen. ASCII enthält praktisch alle lateinischen Schriftund Satzzeichen, aber keine diakritischen Zeichen wie Ö und ü.

Attribut Zusätzliche Informationen zu einem Element. Kodiert als Name/Wert-Paar im öffnenden Tag des Elements.

Basic Multilingual Plane Der Bereich der Unicode-Codepositionen zwischen U+0000 und U+FFFF (0–65535 dezimal). Enthält fast alle täglich benutzten Schriftzeichen, unabhängig von ihrer Herkunft.

Jede Software, die Webinhalte darstellt. Dies kann ein Browser, sein Bildschirmleseprogramm oder eine andere Art von Softwareprozess sein.

Browser Die häufigste Benutzerschnittstelle zum Web; eine Software, die Webinhalte auf dem Bildschirm eines Computers dargestellt.

Buchstabenabstand Der zwischen zwei Schriftzeichen eingefügte Leerraum innerhalb einer Textpassage. Wird gesteuert mit der CSS-Eigenschaft letter-spacing (teilweise auch per word-spacing).

Cascading Style Sheets (CSS) Das am häufigsten verwendete Stylesheet-Format für die Steuerung der Darstellung von HTML-Dokumenten

Client Die Seite einer HTTP-Transaktion, die die Requests durchführt und mit den Antworten etwas macht, typischerweise die Darstellung der erhaltenen Daten.

Codeposition Eine einzelne Position in einem bestimmten Zeichensatz. Das an einer bestimmten Codeposition stehende Zeichen kann je nach Zeichensatz unterschiedlich sein. In der Praxis werden jedoch hauptsächlich die ersten 256 Codepositionen verwendet, um einen Großteil der Texte im Web abzubilden. Sie sind in den meisten Zeichensätzen gleich. Auch wenn die Codeposition eines Zeichens nicht immer seiner Kodierung entspricht, ist die für diese Beziehung nötige Transformation gut dokumentiert.

|

307

Datei

Festbreitenschrift (Mono)

Ein bestimmter Knoten im Dateisystem eines Computers.

Eine Schrift, bei der alle Buchstaben die gleiche Breite haben, wie z.B. Courier. Es wird kein Schriftweitenausgleich vorgenommen.

Diakritsche Zeichen Unterscheidendes Zusatzzeichen, das im Grunde nicht zum Buchstaben gehört, aber eine andere Aussprache signalisieren kann. Häufige Beispiele sind der Akut-Akzent (´, z.B. in générale), Umlaute (¨, z.B. in Klönschnack), die Cedille (z.B. in »Ça va?«), gelegentlich auch der Schrägstrich (z.B. in »Smørgåsbrød«).

Dingbats (Zierschrift) Zeichensammlung (üblicherweise als eigener Zeichensatz), die nicht aus normalen orthografischen Zeichen, sondern z.B. aus Ornamenten oder Symbolen besteht (Musiknoten, Schaltungssymbolen etc.).

Dokumentenbaum Die Vorstellung einer sich verzweigenden Struktur aller in einem Dokument enthaltenen Elemente. Synonym mit dem auf ein bestimmtes Dokument angewandten »Document Object Model«.

Dokumenttyp-Definition (DTD) Eine maschinenlesbare formelle Definition eines bestimmten Markup-Vokabulars.

Durchschuss Bezieht sich auf die Längsachse, an der sich der Text orientiert. Bei linksbündig ausgerichteten Texten beginnen die Zeilen alle an einer gemeinsamen linken Achse; bei rechtsbündig ausgerichteten Texten entsprechend rechts. Beim Blocksatz haben alle Zeilen bis auf die letzte eine gemeinsame linke und rechte Achse. Dieser Teil des Layouts wird über die CSS-Eigenschaft text-align gesteuert.

Eigenschaft In CSS ein Aspekt der Darstellung. Manche Eigenschaften sind als sogenannte Kurzschrift-Eigenschaften definiert (z.B. background oder border), mit denen Sie mehrere Werte auf einmal angeben können.

Element Strukturen innerhalb eines HTML-, XHTMLoder XML-Dokuments, dessen Anfang und Ende mit Tags markiert wird.

Elternelement Das direkte Vorfahren-Element des aktuellen Elements.

308

|

Font Eine Sammlung von (Schrift-)Zeichen mit einem gemeinsamen visuellen Stil; ein Bestandteil einer Schrift oder Schriftfamilie. Fonts werden gemäß des unterstützten Zeichensatzes strukturiert.

Gebrochene Schrift (Blackletter) Ein typografischer Stil, der von den deutschen Handschriften des Spätmittelalters inspiriert wurde. Ein Beispiel für eine gebrochene Schrift ist die Fraktur.

Geschwisterelemente Elemente, die das gleiche Elternelement haben. Geschwisterelemente werden in Abhängigkeit von ihrer Reihenfolge im Dokument oft als voriges oder folgendes Geschwisterelement bezeichnet.

Glyph Die grafische Darstellung eines Buchstabens, eines Silbenzeichens, einer Ligatur (z.B. fl) oder eines Buchstabenteils.

Groteske (Gothic) Üblicherweise synonym mit serifenlos. (Nicht zu verwechseln mit »gotischen«, also schmalfetten, gebrochenen, mittelalterlichen Schreibschriften, wie z.B. Fraktur).

Groß-/Kleinbuchstaben (Upper-/lowercase) Synonym mit Majuskeln/Minuskeln, manchmal auch Versal/Gemeine.

HyperText Markup Language (HTML) Das allgegenwärtige Format für das Markup von Dokumenten, die als Webseiten verwendet werden.

HyperText Transfer Protocol (HTTP) Das Request-Response-Netzwerkprotokoll, das dem Web zugrunde liegt.

ISO 8859-x Eine Reihe von Zeichensätzen, die nach Windows-1252, aber vor Unicode eingeführt wurden. Sie unterstützen praktisch alle gegenwärtigen europäischen Schriftsysteme, inklusive Hebräisch, Türkisch und Thai.

JavaScript Die häufigste Programmiersprache für Datenverarbeitung und Interaktivität im Webbrowser.

Kindelement Ein direkter Nachfahr eines anderen Elements.

Kodierungsschema mit variabler Bitbreite (Variable-width encoding) Kodierungsschemata für Schriftzeichen wie UTF-8, die eine variable Anzahl von Bits verwenden können, um ein bestimmtes Zeichen zu beschreiben. Bei UTF-8 wird die Bitweite durch die anfänglichen Bits für ein bestimmtes Zeichen angegeben: 0 für Zeichen mit 8 Bit, ansonsten n für die Anzahl von Bytes, die für die Beschreibung des Zeichens nötig sind.

Kontrollzeichen Eine Folge von Bits, die ein Signal repräsentieren, das von einer Benutzerschnittstelle an ein Terminal oder einen entfernten Rechner geschickt wird, um eine Aktion auf dem Zielgerät auszulösen (z.B. Zeilenumbruch, Wagenrücklauf, Tabulator etc.)

Kursiv (Italic) Ein Schriftschnitt, der durch das Hinzufügen kalligrafischer Akzente aus der entsprechenden aufrechten Urschrift entwickelt wurde. Der übliche Neigungswinkel beträgt i.d.R. 5 bis 10 nach rechts (vgl. oblique).

Markup Strukturelle Informationen, gemischt mit dem zu strukturierenden Inhalt. HTML, XHTML und XML sind verschiedene Formen von Markup.

Microsoft Core Fonts Ende der 1990er-Jahre stellte Microsoft eine von Matthew Carter entwickelte Sammlung von Schriften zur Verfügung, die Internet Explorer beilag, aber auch unabhängig davon zur kostenlosen Benutzung heruntergeladen werden konnte. Diese Fonts waren für viele Jahre auf WindowsRechnern sehr weit verbreitet. Teilweise standen sie auch auf Macintosh-Systemen zur Verfügung. Nach Apples Support-Dokumentation ist Mac OS X 10.5 die erste Version des Systems, die alle Schriften der Core Fonts enthält. Diese Sammlung wird von Microsoft zwar nicht als eigenständiges Produkt unterstützt, steht aber weiterhin auf Websites anderer Anbieter zum Download bereit.

Mindmaps Eine beliebte Technik für die Visualisierung von Website-Designs.

Nachfahren-Element Ein Element, das innerhalb des aktuellen Elements verschachtelt ist. Handelt es sich um ein direktes Nachfahren-Element (d.h. es folgt in der Kaskade

direkt auf seinen Vorfahren), spricht man von einem Kindelement.

Leerraum Beliebiger Raum auf der Seite oder Zeichenfläche, der nicht mit Schrift, Illustrationen oder Trennlinien ausgefüllt ist. Der englische Begriff »whitespace« steht einerseits für diesen Leerraum, aber auch für den Computerbegriff »Whitespace-Zeichen« (z.B. Leerzeichen, Tabulator etc.).

Oblique (Geneigte Schrift) Oft fälschlicherweise mit kursiv gleichgesetzt. Tatsächlich handelt es sich um die Urschrift (Roman), die künstlich schräggestellt wurde.

Orthografie Rechtschreibung. Regeln zur korrekten Schreibweise von Wörtern.

Parsen Das Lesen und analysieren der HTML- und CSSInhalte durch den Browser. Hierdurch werden die enthaltenen Informationen in eine interne Struktur (siehe Dokumentenbaum) überführt, die dann für die Darstellung des Inhalts aufbereitet wird.

Recommendation (Empfehlung) Offizielle Dokumente des W3C, die stabile Spezifikationen enthalten. Allgemein bekannt als »Webstandards«.

Rendern (Darstellung) Die Erstellung einer anzeigbaren Repräsentation der vom Benutzerprogramm (Browser) eingelesenen Informationen.

Ressource Ein Dokument oder ein Teil davon, das über einen eigenständigen URI (Uniform Resource Identifier) erreichbar ist.

Roman Bezeichnet die Urschrift eines Zeichensatzes (Fonts), z.B. Times New Roman. Von dieser können andere Schriftschnitte abgeleitet sein, wie etwa kursive Varianten.

Schmalschrift (Condensed) Stil einer Schrift, die sich von anderen Schriften durch ihre schmale Natur und eng beieinander stehende Buchstaben unterscheidet. Gegenteil von Breitschrift.

Schreibschrift (Script) Eine Klasse von Schriften, die entwickelt wurde, um Handschriften nachzuempfinden.

|

309

Schrift

Server

Eine Familie von Buchstabenformen mit großer Ähnlichkeit in der Gestaltung; in ihrer Funktion synonym mit Schriftfamilie.

Schriftfamilie Eine Sammlung von Fonts, die sich nur in ihrem Schriftgewicht (z.B. mager, normal, fett etc.) und Schriftstil (normal, kursiv, Kapitälchen etc.) unterscheiden. Rasterschriften, wie sie von Windows und frühen Laserdruckern verwendet wurden, können außerdem eigene Instanzen der Fonts für verschiedene Schriftgrößen enthalten.

Die Seite einer HTTP-Transaktion, die auf Anfragen des Browsers (Clients) den angeforderten Inhalt zurückgibt.

Spationierte Schrift (Extended) Das Gegenstück zur Schmalschrift. Die Buchstaben sind breiter als bei normalen Schriften, der Buchstabenabstand ist meist etwas weiter. Auch als breitlaufende Schrift bezeichnet.

Steg (Gutter) In Printmedien der unbedruckte Bereich zwischen dem Satzspiegel und dem Rand. Im Web auch der Leerraum zwischen dem Text und einer möglichen Trennlinie bzw. zwischen zwei Spalten oder zwei Textpassagen. In vielen Fällen über die CSSEigenschaft padding gesteuert.

Schriftgewicht Kennzeichnet im Allgemeinen die Linienstärke einer Schrift. Wird mit der CSS-Eigenschaft fontweight gesteuert. Übliche Schriftgewichte im Druck reichen von »Ultraleicht« (Haarlinie, geringstes Schriftgewicht) bis zu »Ultrafett«. Normaler Text erhält i.d.R. das Schriftgewicht »Mittel« (Medium, Book). Dies ist der Standardwert.

Stylesheets Anweisungen zur Darstellungen von MarkupStrukturen. Die dominierende Form von Stylesheets im Web sind Cascading Style Sheets (CSS).

Schriftweitenausgleich (Kerning) Automatischer Ausgleich der Schriftweite, entweder durch Unterschneidung (Verringerung des Buchstabenabstands) oder auch durch Spationierung (Erweiterung des Abstands), z.B. bei Buchstabenpaaren wie fl, Fe, We, ff oder Te. Ohne das Kerning erscheinen diese Buchstaben ungewöhnlich weit voneinander entfernt. Bei manchen Kombinationen aus Betriebssystem, Software und Schriften muss die Schriftweite für Rasterschriften hoher Qualität manuell angepasst werden. In diesem Fall spricht man vom »Ausgleichen«.

Seite Die dem Betrachter angezeigte Ausgabe der Daten, die als Antwort auf einen Request für einen bestimmten URI erzeugt wird.

Selektor In CSS eine Kurzbeschreibung, die eine Struktur innerhalb einer Seite identifiziert, auf die eine bestimmte Form der Darstellung (der Stil) angewandt werden soll.

Serifenschrift Hauptmerkmal sind die sogenannten Serifen, Verzierungen an den Linienenden, wie beispielsweise bei der Times.

Serifenlose Schrift Eine Klasse von Schriften, die durch offensichtlich geometrische Formen, Strichführung mit gleicher Dicke und das Fehlen von Verzierungen (Serifen) an den Linienenden gekennzeichnet ist.

310

|

Tags Mit spitzen Klammern (< und >) umgebenes Markup, mit dem die Elemente eines HTML-, XHTMLoder XML-Dokuments definiert wird.

Text Allgemeiner Begriff für das Arbeitsprodukt eines Texters.

Textausrichtung Bezieht sich auf die Längsachse, an der sich der Text orientiert. Bei linksbündig ausgerichteten Texten beginnen die Zeilen alle an einer gemeinsamen linken Achse; bei rechtsbündig ausgerichteten Texten entsprechend rechts. Beim Blocksatz haben alle Zeilen bis auf die letzte eine gemeinsame linke und rechte Achse. Dieser Teil des Layouts wird über die CSS-Eigenschaft text-align gesteuert.

Trennlinie (Rule) Eine Linie, die auf einer Seite eines Textblocks eingefügt wird. Üblicherweise über die CSS-Eigenschaft border gesteuert.

Übertragungszeichen Eine Folge von Bits, die aus Gründen der Rückwärtskompatibilität auch in modernen Zeichensätzen noch enthalten ist. Sie wurden verwendet, um den Status eines Datenstroms zu kennzeichnen, der von einem Terminal (meist einem Fernschreiber) an einen entfernten Rechner, ein entferntes Speichermedium oder ein entferntes Ausgabegerät (wie

einen Drucker oder einen Lochkartenstanzer) übertragen wurde. Der Bereich der Kontroll- und Übertragungszeichen wird im ASCII-Zeichensatz durch die Codepositionen zwischen 00 bis 1F (0–31 dezimal) und 7F (127 dezimal, Löschzeichen) repräsentiert. Die Einbeziehung dieser Zeichen war ein historisch wichtiger Schritt bei der Verbesserung der Usability von Eingabegeräten.

Unicode Ein Kodierungsschema, das in den frühen 1990er Jahren von einem großen Konsortium entwickelt wurde. Unicode sollte als Grundgerüst für die elektronische Speicherung und Übertragung aller bekannten Schriftsysteme auf einmal dienen. Unicode-Fonts referenzieren Unicode-Codepositionen, unterstützen aber nur selten alle möglichen Zeichen. Die Unicode-Codepositionen U+0000 bis U+007F (0 bis 127 dezimal) sind identisch mit dem ASCII-Zeichensatz, während die Positionen U+0080 bis U+00FF ( (128-255 dezimal) ihre Entsprechungen in ISO 8859-1 finden.

UTF-8 Ein beliebtes Kodierungsschema für Unicode-Texte, besonders für europäische Sprachen. ASCII -Zeichen werden in sieben Bits kodiert, die ISO 8859-x-Zeichen außerhalb von ASCII mit acht Bit (1 Byte), der verbleibende Rest des Basic Multilingual Plane mit 16 Bit (1 Byte). Für die übrigen Unicode-Zeichen werden jeweils 32 Bit (4 Byte) verwendet. Siehe auch: Variable width encoding.

Vorfahren-Element Ein Element das sich (möglicherweise mehrere Ebenen) höher im Dokumentenbaum befindet und das aktuelle Element (das Nachfahren-Element) enthält.

Whitespace-Zeichen Zeichen wie Leerzeichen oder Tabulatoren, die die Abwesenheit von Daten und Text kennzeichnen. Tabulatoren und Zeilenvorschübe gehören hierbei zu den Kontrollzeichen. Als sie in den ASCII-Zeichensatz aufgenommen wurden, ging man noch davon aus, dass Fernschreiber als Hauptausgabegerät für ASCII-kodierte Daten verwendet werden. Der tatsächlich durch diese Zeichen in die Darstellung eingefügte Leerraum hängt von der Hardund Softwarekonfiguration des Benutzers ab und nicht von der Spezifikation des zugrunde liegenden Zeichensatzes.

Windows-1252 Ein 8-Bit-Zeichensatz, der ursprünglich von Windows für die Darstellung von Englisch und anderen westeuropäischen Sprachen verwendet wurde. Gleichzeitig diente er für die Kodierung älterer Windows-Systemschriften und der Core Fonts. Ähnlich, aber nicht identisch mit ISO 8859-1. Die untere Hälfte (0 bis 127) der Zeichensätze Windows-1252 und ISO 8859-x ist jeweils identisch mit dem ASCII-Zeichensatz.

World Wide Web Consortium (W3C) Eine Organisation, die als wichtigstes Forum für die Spezifizierung von weborientierten Technologien dient.

Zeichen Ein kodierter Buchstabe, eine Zahl, ein Symbol oder ein Whitespace-Zeichen. Der Inhalt einer einzelnen Codeposition innerhalb eines Zeichensatzes; besteht möglicherweise aus einem oder mehreren Einzelzeichen, Whitespace-, Kontroll-, oder Übertragungszeichen.

Zeichen-Entity Referenz auf einen benannten Inhaltsteil, typischerweise ein spezielles Zeichen, das mit einem Kaufmanns-Und (&, Ampersand) eingeleitet und mit einem Semikolon beendet wird (z.B. ø).

Zeichenkette (String) Eine beliebige Folge von Zeichen mit unterschiedlichen Gültigkeitsanforderungen (abhängig von der verwendeten Plattform).

Zeichenkodierung Die Entsprechung von Zeichen in Datenform, d.h. die Bitfolge, die verwendet wird, um ein Zeichen zu übertragen oder zu speichern. Siehe auch Codeposition; Ersteres bezeichnet eine literale Folge von Bits, die das Zeichen in einem Datenstrom abbilden, während Letzteres sich auf seine Position in einem Zeichensatz bezieht.

Glossar

|

311

Index

Symbole & (Kaufmanns-Und) 254 ? (Fragezeichen) 254

A a-Element 287 abbr-Element 144, 172 abgerundete Ecken 158, 162 accesskey-Attribut 269 acronym-Element 145 action-Attribut 254 :active-Pseudoklasse 141, 143 ActiveX platform 278 additives Farbmodell 149 Adobe Photoshop Bilder beschneiden 184 Bilder mit Passepartout versehen 185 Bilder neu berechnen 186 Bilder verkleinern 192 Bilder vorbereiten mit 182 Ebenen-Palette 162 Farbprofile 190 Hintergund-Texturen/-Muster 160 Kontrast von Fotos optimieren 187 mehrfache Anpassungen vornehmen 189 Adobe Shockwave Flash 200, 203 :after-Pseudoelement 146 Aliasing 215 align-Attribut 297 all-Medientyp 27 AlphaImageLoader-Filter 278 alt-Attribut 15, 183 Bilder beschriften 195 FIR, Überlegungen 165 Schriftgrößen 221 Zugänglichkeit von Formularen 268 Altersweitsichtigkeit 148 Amazon.com 282 Ampersand-Zeichen 284 Anführungszeichen 9

Anti-Aliasing 215 article-Element 73 ASCII-Standard 231 Kodierungsschema wählen 231 reservierte Zeichen 255 aside-Element 73 Attribut XXIV, 8 universell 13 Attribut-Selektoren 30, 177 audio-Element 205 Aufzählungszeichen, eigene verwenden 123 Außenabstände Größe von Elementen, Steuerung 75 mehrspaltige Layouts 94 negativ 81 Tabellenzellen 175 zusammengefasst 82

B background-attachment-Eigenschaft 155 nicht wiederholte Motive 161 background-color-Eigenschaft 155 Elemente für Dateiupload und 256 Faux Columns 159 Stylesheet-Regeln 148 background-Eigenschaft 148, 155, 157 background-image-Eigenschaft 155 Listen und 119 negative Außenabstände und 81 Sprites und 166 background-position-Eigenschaft 155 Faux Columns 159 Schriftgrößen 221 Sprites und 165–166 Werte definieren 156 background-repeat-Eigenschaft 155 Faux Columns 159 background-size-Eigenschaft 157 :before-Pseudoelement 146 benutzergenerierte Inhalte siehe Formulare

Index

|

313

Benutzerprogramme (User Agents) alternative Navigation 121 Definition XXIII Definitionslisten gestalten 127 Standardstile für Listen 117 Stilregeln entfernen 125 Benutzertests 68 Bergevin, Holly 276 Bilder 181, 193 alt-Attribut 183 beschneiden 184, 189 beschriften 195 ersetzte Elemente und 182 Erstellung 184 für Veröffentlichung vorbereiten 182 Größen und Rahmen 183 Kontrast optimieren 187 Layouts in Spalten 195 mehrfache Anpassungen vornehmen 189 mit Farbprofilen arbeiten 189 mit Passepartout versehen 185, 189 neu berechnen 186, 189 Optimierung 191 ordnen 192 Stildefinitionen für 195 Tonwerte anpassen 187, 189 verkleinern 191 veröffentlichen 192 Vorschau 197 Zusatzinformationen 184 Bilder beschneiden 184, 189 Bilder beschriften 195 Bilder mit Passepartout versehen 185, 189 Bilder neu berechnen 186, 189 Bilder veröffentlichen 192 Bildergalerie Lightbox-Werkzeug 198 mit Vorschaubildern arbeiten 197 Bildschirmleseprogramme 121 biologische Klassifizierungen 69 blink-Element 296 Block-Elemente Flussverhalten 86 Layout-Eigenschaften und 40 Links, anklickbaren Bereich vergrößern 142 Positionierung 89 stapeln 104 zusammengefasste Außenabstände 83 blockquote-Element 146, 284 body-Element

314

|

Index

Beispiele für Elementbeziehungen 29 Box-Eigenschaften zuweisen 84 Hintergrundbilder 161 mehrspaltige Layouts 95 Orientierungshilfen 71 Schriftgrößen 222 Selektoren, Unterstützung 31 border-bottom-Eigenschaft 137 border-collapse-Eigenschaft 174 border-left-Eigenschaft 158 border-radius-Eigenschaft 162 border-right-Eigenschaft 158 border-top-Eigenschaft 137 bottom-Eigenschaft 39–40 Elemente positionieren 100–101 box-sizing-Eigenschaft 76, 257 Boxmodell siehe CSS-Boxmodell br-Element 290 braille-Medientyp 27 Browser abgerundete Ecken 162 abgestufte Unterstützung 281 Box-Verhalten für html- und body-Elemente 84 Definition XXIII Inhalt parsen 20 Inhalt rendern 20 Krieg der Browser, aktuell 274 Links für Dokumente deaktivieren 67 mit Conditional Comments ansprechen 24 Navigation in Formularen 269 Pseudoklassen und 142 Schriftgrößen 221, 241 Selektoren, Überlegungen 177 Standardstile für Listen 117 URI, maximale Länge 255 URIs, Unterstützung 2 XHTML-Einschränkungen 11 zusammengefasste Außenabstände 83

C canvas-Element 206 CanvasRenderingContext2D-API 206 caption-Element 170 Tabellen, Markup-Beispiel 171 charset-Attribut 227 @charset-Direktive 295 cite-Element 144, 146 Clason, Steve 277 class-Attribut 14

Bilder beschriften 196 Daten anordnen/ausrichten 175 Definitionslisten 129, 131 Einfachheit, Überlegungen 52 falsche Werte 281 Flexibilität, Überlegungen 54 Formular-Markup 252 Geltungsbereich 59 Konsistenz, Überlegungen 57 Links referenzieren 68 Listen, Darstellung als Inline-Elemente 123 mehrspaltige Layouts 95 Navigation und 127 Orientierungshilfen 71 Selektoren, Unterstützung 29 Tabellen gestalten 177 Zugänglichkeit von Formularen 268 clear-Eigenschaft 38, 40, 89 Definitionslisten 131 Definitionslisten gestalten 127 Layoutraster und 111 mehrspaltige Layouts 94, 96 Verwendung 91 Clients siehe Browser Clientseitige Umgebung XXIII Architektur 301 unterstützte Applikationsschichten XXIV clip-Eigenschaft 293 cm (Zentimeter) 34, 36 CMS (Content Management System) Bilder veröffentlichen 192 nicht vorhersagbares Verhalten 80 URIs, Unterstützung 2 code-Element 144, 289 col-Element 169 Daten anordnen/ausrichten 176 Tabellen, Markup-Beispiel 172 colgroup-Element 169 Daten anordnen/ausrichten 176 Tabellen, Markup-Beispiel 172 color-Eigenschaft 147 Elemente für Dateiupload und 256 ColorZilla-Erweiterung (Firefox) 153 colspan-Element Daten anordnen/ausrichten 175 Rollover-Effekte 179 Tabellen, Markup-Beispiel 172 column-span-Eigenschaft (CSS3) 99 Conditional Comments 24 Content Management System (CMS)

Bilder veröffentlichen 192 nicht vorhersagbares Verhalten 80 URIs, Unterstützung 2 content-Eigenschaft Benutzung, Überlegungen 295 Markup von Anführungszeichen und 146 contenteditable-Attribut 16 CREATE TABLE-Anweisung (SQL) 243 CREATE-Anweisung (SQL) 245 CRT (Röhrenmonitor) 150, 153 CRUD-Akronym 244, 247 CSS Zen Angewohnheiten für effektives Gestalten 49 Anwendbarkeit, Prinzip 61 Flexibilität 53 funktionelle Prinzipien 60 KISS-Prinzip 50 Konsistenz 55 Orientierung behalten 58 Trennung, Prinzip 61 Veränderbarkeit, Prinzip 61 Verbindung, Prinzip 61 CSS-Boxmodell ermitteln 12 Größe von Elementen, Steuerung 75 CSS-Layout @-Direktiven 291 Außenabstände 81 auto-Werte für Eigenschaften 76 beliebte Ansätze 108 Block-Elemente, Positionierung 89 Box-Eigenschaften, Überlegungen 84 Darstellungsmodi 76 Dinge verstecken 293 Fluss der Elemente 85, 294 Formulare und 259 fortgeschritten 99 Größe von Elementen, Steuerung 75 Größenbeschränkungen für Elemente 79 häufig unterstützte Eigenschaften 38–39 Inhalt-Eigenschaft und 295 inherit-Wert 292 Innenabstände 84 mehrspaltige Layouts 91 Nachteile von Tabellen 167 Navigation, Überlegungen 105 nicht vorhersagbares Verhalten 80 overflow-Eigenschaft 77, 80 Positionierung, Eigenschaften für 99 Präfixe, herstellerspezifisch 292

Index

|

315

Rahmen 83 Rundungsfehler 291 Unicode, Überlegungen 295 visibility-Eigenschaft 103 z-index-Eigenschaft 103 Zähler 294 CSS3-Module 99 cursor-Eigenschaft 68, 144

D Darstellung CSS, Unterstützung XXIV Formulare und 253 Information und 60 Inline-Elemente 289 style-Attribut, Warnung 26 Trennung, Überlegungen 17 Dateien Definition XXIII hochladen 256 Dateien hochladen 256 Datentabellen siehe Tabellen dd-Element 127 Vorschaubilder und 197 Wörterbuch-Beispiel 129 def-Element 145 Definitionslisten Definition 127 Dialog-Beispiel 130 Stildefinitionen für 127 Wörterbuch-Beispiel 128 del-Element 145, 287 DELETE-Anweisung (SQL) 245 Design-Überlegungen Farbenlehre 150 für Formulare 243, 245, 259 Geltungsbereich von Inhalt ermitteln 235 Hierarchie 235 Schriften unterscheiden 236 Schriftgestaltung 240 sekundärer Inhalt 236 Stildefinitionen für Passagen mit ähnlicher Priorität 239 Überlaufen in andere Elemente vermeiden 238 Dhakar, Lokesh 198 diakritische Zeichen 232 DigitalColor Meter-Programm (Mac OS X) 153 digitaler Schriftsatz 211 dir-Attribut 13

316

|

Index

DirectoryIndex-Verzeichnis 254 disabled-Attribut 265 display-Eigenschaft 38–39 Definitionslisten 129 ersetzte Elemente und 182 FIR considerations 163 Fluss der Elemente ändern 87 Formular-Markup 252, 259 Links, anklickbaren Bereich vergrößern 142 Listen erstellen 118 mehrspaltige Layouts 95, 99 Navigation, Überlegungen 67, 126 verdoppelte Außenabstände und 277 Zugänglichkeit von Formularen 267 div-Element Listen, Darstellung als Inline-Elemente 123 Warnung vor Verwendung 297 zusammengefasste Außenabstände 82 dl-Element 197 DOCTYPE-Deklaration Definition 10 DOCTYPE-Deklarationen Boxmodell, Unterschiede 12 Definition XXIV korrekten Typ wählen 13 Zusatzinformationen 13 Document Object Model siehe DOM Dokumentation als Wegweiser 59 Dokumente Box-Verhalten für html- und body-Elemente 84 Definition XXIII Geltungsbereich 59 Lebensdauer, Überblick 20 Links auf bestimmte Passagen 139 Links deaktivieren 67 Stylesheets einbinden 23 Szenarien ohne Links 2 Dokumentenbäume Definition 28 DOM (Document Object Model) XXIII Definition 42 SWFObject, Unterstützung 200 Dominey, Todd 199 Dreamhost Wiki 203 Drittelregel 109, 113 DROP-Anweisung (SQL) 245 dt-Element 127 Dialog-Beispiel 131 Vorschaubilder und 197

DTD (Dokumenttyp-Definition) XXIV, 11 Dyaden 154

expression-Funktion (JavaScript) 277

F E ECMA-262-Standard 42 Eigenschaft/Wert-Paare Definition XXIII eingebettete Bilder formatieren 195 Faux Columns 159 font-size-Schlüsselwörter 37, 223 Überlegungen zur Vererbung 33 Werte aufheben 90 eingebettete Bilder 195 Elemente als Teile von Tabellen 169 Definition XXIV, 8 ersetzt 181 Fluss der Elemente, Regeln für 294 Flussverhalten ändern 87 für Stildefinition auswählen 28 Größe, Steuerung 75 Größenbeschränkungen 79 Navigation, Gestaltung für 124 Positionierung 99 Seitenstrukur 10 Selektoren, Unterstützung 29 Standard-Flussverhalten 85 stapeln 104, 284 strukturell 73 Überschriften, Gestaltung für 135 universelle Ansatzpunkte 14 veraltet 11 Vererbung von Werten 33 verschachteln 28 Elemente »stapeln« 104 Elemente, Stapelung von 284 em-Einheit 34 background-position-Eigenschaft und 156 Schriftgrößen 221–222 em-Element 144, 289 embed-Element 202 Multimedia-Inhalte einbetten 202–203 object-Element im Vergleich mit 283 embossed-Medientyp 27 enctype-Attribut 256 Eolas 202 erforderliche Formularfelder, Regeln für 245 Erpresserbrief-Effekt 234 ersetzte Elemente 181 Event-Handler-Attribute 298

Facebook-Website 126, 282 Fahrner Image Replacement 158 grafische Überschrifen und 162 Implementierung 125 Layout-Überlegungen 143 Nachteile 164 Sprites, Überlegungen 165 Stylesheet-Regeln 164 Fahrner, Todd 162 Farbenblindheit 148 Farbenlehre 147 additives Farbmodell 149 Anzeigeumgebungen 153 Design-Überlegungen 150 Farben identifizieren 151 HSB-Farbmodell 149 Komplementärfarben 151 Kontrast, Überlegungen 151 RGB-Farbmodell 150–151 Sehfähigkeit und 148 subtraktives Farbmodell 149, 151 Zusatzinformationen 147 Farbpaletten Erstellung 154 websicher 153 Farbprofile 189 Farbtheorie HSB-Farbmodell 263 Farbton-Werte (Hue) 149, 154 Farbwerte 34, 37 Faux Columns 158–159 Fehlermeldungen 246 feste Layouts 108, 143 Fibonacci-Zahlenfolge 109, 113–114 fieldset-Element 250 Eingabefehler ermitteln 264 erforderliche Formularfelder hervorheben 263 Formularlayout und 262 figure-Element 73 Firebug-Erweiterung (Firefox) 111, 153 Firefox-Browser abgerundete Ecken 162 ColorZilla-Erweiterung 153 Navigation in Formularen 269 Pseudoklassen und 142 Selektoren, Überlegungen 177

Index

|

317

Web Developer Toolbar-Erweiterung 111, 153 Fitts’s Law 88 flexible Layouts 108, 143 float-Eigenschaft 38, 40, 89 Benutzungsregeln 89 FIR, Überlegungen 164 Formular-Markup 259 Gestaltung von Navigationselementen 124 mehrspaltige Layouts 94, 96, 98 Navigation und 106, 108, 125 verdoppelte Außenabstände und 277 Verwendung 91 Vorschaubilder und 197 Werte aufheben 90 zweispaltiges Layout konvertieren 92 Flüssigkristall-Anzeige (LCD) 150, 153 :focus-Pseudoklasse 142 font-Eigenschaft 229 font-Element 223 font-family-Eigenschaft Schriftnamen finden 227 Standard-Systemschriften und 229 Verwendungsmöglichkeiten 226 Zeichenkodierung 229 font-size-Eigenschaft 34 Formular-Elemente 257, 261 hasLayout-Parameter und 276 Schriftgrößen 221–222 Standard-Systemschriften und 229 unterstützte Werte 37, 223 Werte angeben 136 font-variant-Eigenschaft 241 font-weight-Eigenschaft 128, 213 Fonts siehe Web-Typografie footer-Element 73 formnovalidate-Attribut 270 Formular-Elemente bearbeiten 256 effektiv, Regeln für 246 enctype-Attribut 256 Links und 137 nach Erscheinungsbild gruppieren 261 name-Attribut 287 Plugins und 284 unterstützt in HTML5 269 Vererbung von Werten und 33 Formulare Abschicken beschränken 262 Darstellung und 253

318

|

Index

effektiv, Erstellung 243 effektiv, Regeln für 245 Elemente nach Funktion ordnen 244 erforderliche Formularfelder hervorheben 263 Erfordernisse feststellen 248 GET-Requests 254 Layout und 259 Markup und 250 prototyping 258 Struktur und 250, 253 Tastatur-Navigation 268 URL-Kodierung 255 Verhalten und 253 zugänglich, Erstellung 265 Zusatzinformationen 247 Formularfelder erforderlich, hervorheben 263 Regeln für 245, 247 Fotos, Kontrast optimieren 187 Fragezeichen (?) 254 frame-Element 285, 287 frameset-Element 285

G Gel-Effekte 158, 162 geordnete Listen Browser-Standardstile 117 erstellen 118 Gliederungen, Unterstützung für 122 list-style-type-Eigenschaft 118 nav-Element 119 Selektoren und 31 Verschachteln 122 Vorschaubilder und 197 Zählbereiche ändern 121 Geschwister-Elemente 29 GET-Methode 254 GetXMLHttpRequest-API XXIV GIF-Format 191 Git RCS 193 Gliederungen 122 Goldener Schnitt 109, 113 Groß- und Kleinschreibung, in HTML-Markup, Unterschied 8 Gutenbergs Druckerpresse 210

H handheld-Medientyp 27, 35

hasLayout-Parameter 276 HCI (Mensch-Computer-Interaktion) 62, 88 header-Element 73 Header-Funktion (PHP) 230 headers-Attribut 172 height-Eigenschaft 38, 40 auto-Wert 76 Bilder beschriften 196 Bildgröße 183 Formular-Elemente 256 Layout-Gitter und 112 Links, anklickbaren Bereich vergrößern 142–143 mehrspaltige Layouts 98 Navigation und 106 Helligkeit, Werte 149 Hewlett-Packard 190 hierarchische Navigation Ausrichtung 66, 106 Definition 64 Hilfslinien siehe Layout-Gitter Hilfstechnologien 167 Hintergrundbilder abgerundete Ecken 158, 162 erstellen 157 Faux Columns 158–159 FIR und 125, 143, 158, 162 Gel-Effekte 158, 162 nicht wiederholte Motive 158, 161 Schattenwürfe 158, 162 Texturen und Muster 158, 160 unterstützte Eigenschaften 155 Werte definieren 156 Hinting (Typografie) 217 Holly Hack 276 :hover-Pseudoklasse 141, 143 hr-Element 290 href-Attribut 137–138 Bilder veröffentlichen 194 effektive Links erstellen, Inhalt 140 Kaufmanns-Und in 254 Links auf bestimmte Passagen 139 HSB-Farbmodell 149, 263 HTML 12 HTML 5-Spezifikation canvas-Element 206 contenteditable-Attribut 16 Formular-Funktionen 269 neue strukturelle Elemente 73 Video-/Audio-Elemente 205

HTML-Dokumente siehe Dokumente html-Element 85 HTML-Markup 11 Bildgröße 183 Formulare und 250 Frames, Überlegungen 285 Groß- und Kleinschreibung, Unterschied 8 HTML-Varianten 11 KISS-Prinzip 50 Links und 137 Rendering-Modi 10 Syntax-Überblick 7 Tabellen, veraltete Elemente vermeiden 172 Trennung, Überlegungen 17 typische Selektor-Schnittstelle 29 universelle Attribute 13 Validierung und Implementierung 280 Validierungsfehler 284 Verwendungsbeispiele 287 HTMLMediaElement-Schnittstelle 205 HTTP (Hypertext Transfer Protocol) 41, 302 Client-Server-Architektur 301 Content-Disposition-Header 204 Content-Language-Header 15, 227 Content-Type-Header 204, 227, 279 MIME-Typen 304 Requests verringern 304 REST, Unterstützung 246 http-equiv-Attribut 299 Hyperlinks auf Teile des gleichen Dokuments 139 contenteditable-Attribut 17 effektiver Inhalt, Erstellung 139 Inline-Links 65 Links für Dokumente deaktivieren 67 Links, anklickbaren Bereich vergrößern 142 Markup, Überlegungen 137 Probleme bei Implementierung 4 Stile für 141 Szenarien ohne Links 1 Umgang mit 3 URIs in 2 Usability verbessern mit 4 Hypertext Transfer Protocol siehe HTTP

I ICC (International Color Consortium) 190 id-Attribut 14 Bilder beschriften 196 Einfachheit, Überlegungen 52

Index

|

319

falsche Werte 281 Flexibilität, Überlegungen 54 Formular-Markup 253 Geltungsbereich 59 Konsistenz, Überlegungen 57 Links auf bestimmte Passagen 139 mehrspaltige Layouts 94–95 Navigation und 106, 127 Orientierungshilfen 71 Tabellen gestalten 177 Tabellen, Markup-Beispiel 172 Zugänglichkeit von Formularen 268 id-Attributselektoren, Unterstützung 29 iframe-Element 12, 287 Formular-Elemente und Plugins 284 name-Attribut 287 Vererbung von Werten und 33 ImageMagick 197 img-Element 182 Bilder veröffentlichen 195 Evolution von 181 Videos einbetten 205 @import-Direktive 25 media-Werte hinzufügen 26 Stylesheets einbinden 23 Verwendungsbeispiele 291 in (Inch, Zoll) 34 ine-height-Eigenschaft Schriftgrößen 241 Information, Darstellung und 60 Informationsarchitektur benutzbare Schnittstellen, Erstellung 66 Besucherstrategien 65 Definition 62 Mehrdimensionalität von Inhalt 62 Szenarien und Benutzertests 68 Taxonomie und Nomenklatur 69 Verwendung von Taxonomie über die Kaskade 70 Website-Navigation 64 Zusatzinformationen 62 Inhalt Definition XXIII effektive Links erstellen 139 Geltungsbereich ermitteln 235 Größe von Elementen, Steuerung 75 Markup, Unterstützung XXIV Mehrdimensionalität von 62 mit Attributen beschreiben 15 Parsing 20

320

|

Index

Plugin 195 progressive Verbesserungen (progressive enhancement) 53 Rendering 20 sekundär 236 Szenarien ohne Links 1 Trennung, Überlegungen 17 Inhalt-Eigenschaft Definitionslisten 129 Inline-Block-Elemente Flussverhalten 87–88 Layout-Eigenschaften und 40 Layouts für Fußteil 123 Links, anklickbaren Bereich vergrößern 142 Vorschaubilder und 198 Inline-Elemente 86 Markup für Links und 137 unterstützt, Tabelle mit 144 Verwendungsbeispiele 289 Inline-Links 65 Innenabstände 84 Größe von Elementen, Steuerung 75 Navigation und 126 input-Element 249 CSS-Interaktionen 256 Formular-Elemente und 257, 260, 262 required-Attribut 270 SQL-Anweisungen und 245 Verwendungsbeispiele 67 ins-Element 145, 299 INSERT-Anweisung (SQL) 245 International Color Consortium (ICC) 190 Internet Explorer 273 ActiveX-Filter/Übergänge 278 Benutzerschnittstelle, proprietäre Eigenschaften für 296 expression-Funktion und 277 hasLayout-Parameter 276 Krieg der Browser 274 mit Conditional Comments ansprechen 24 Navigation in Formularen 269 PNG, Unterstützung 278 Pseudoklassen und 142 Schriftgrößen 221 Selektoren, schlechte Unterstützung für 275 Selektoren, Überlegungen 177 Unterstützung für Eigenschaften 279 URI, maximale Länge 255 verdoppelte Außenabstände 277 Vorschaubilder und 198

XHMTL/XML-Probleme 279 ISO 8859-Standard 42, 231–232

J JavaScript XXIII Eingabefehler ermitteln 264 expression-Funktion 277 SWFObject, Unterstützung 200 Verhalten, Unterstützung XXIV Jessey, Simon 203 JPEG-Format 191, 278 jQuery-Framework 99

K Kaskade Konflikte lösen 31 Taxonomie verwenden 70 ungewollte Veränderungen in 281 Kaufmanns-Und (&) 254 kbd-Element 144 Kind-Elemente auswählen 31 Definition 29 Kind-Selektoren 30, 177 KISS-Prinzip 50 Komplementärfarben 151 Konflikte lösen 31–32 Kontrast in der Farbenlehre 151 optimieren für Fotos 187 Tabellen-Kopf-/Fußteil 178 Kontrollelemente siehe Formular-Elemente Kontrollelemente-Attribut 205

L label-Element erforderliche Formularfelder hervorheben 263 Formular-Markup 246, 252, 260 lang-Attribut 13, 15 Layout siehe CSS-Layout Layoutraster definieren 111 Drittelregel 113 Fibonacci-Zahlenfolge 113 flexibel 114 Goldener Schnitt 113 LCD (Flüssigkristall-Anzeige) 150, 153 Leerraum 84

left-Eigenschaft 39–40 Elemente positionieren 100–101 legend-Element 251 Formular-Markup 252, 262 Lehrer, Tom 151 length-Attribut 252, 257 letter-spacing-Eigenschaft 212, 242 letterforms Aliasing und 216 li-Element Beispiele für Elementbeziehungen 29 Definitionslisten gestalten 127 Eingabefehler ermitteln 264 erforderliche Formularfelder hervorheben 263 Formular-Markup 251–252 Listen erstellen 118 Lightbox-Werkzeug 198 line-height-Eigenschaft 212 Formular-Elemente 256 Schriftgrößen 221 sekundäre Navigation 126 Standard-Systemschriften und 229 Stildefinitionen für Überschriften 136 Überlaufen in andere Elemente vermeiden 238 link-Element media-Attribut 26 Stylesheets einbinden 23 unterstützte Attribute 137 :link-Pseudoklasse 141 Links im Fußteil 123 list-style-image-Eigenschaft 119, 123 list-style-type-Eigenschaft 118, 122, 126 Listen 123

M map-Element 287 margin-bottom-Eigenschaft 82 margin-left-Eigenschaft 117, 127, 146 margin-right-Eigenschaft 94 margin-top-Eigenschaft 82 Markup 7 Definition XXIII Inhalt, Unterstützung XXIV Struktur, Unterstützung XXIV, 7 marquee-Element 296 max-*-Eigenschaft 80 maxlength-Attribut 252 media-Attribut 26

Index

|

321

@media-Direktive Blöcke mit Stildefinitionen 26 Verwendungsbeispiele 291 Medientypen Farbverwaltung 189 spezielle Regeln für 26 mehrspaltige Layouts Faux Columns 160 fortgeschritten 99 Implementierung 91 leere Container-Elemente und 98 Stylesheets und 95 zweispaltig, in dreispaltiges Layout konvertieren 96 zweispaltig, Überblick 94 zweispaltiges Layout konvertieren 92 Mensch-Computer-Interaktion (HCI) 62, 88 meta-Element 230, 287 Meyer, Eric 209 Microsoft Corporation 190, 202, 211, 274 Mikrogitter 111 MIME-Typen 304 Model-View-Controller-Architektur XXIV Modul für mehrspaltige Layouts (CSS3) 99 Morsealfabet 230 Mosaic-Browser 181 Multimedia audiovisuelle Inhalte hinzufügen 200 Einbetten 201 Multimedia-Inhalte einbetten 201

N Nachfahren 29 Nachfahren-Selektoren 30 name-Attribut 254, 287 Name/Wert-Paare 254 nav-Element 119 alternative Navigation 121 Quellcode-Reihenfolge feststellen 124 Zugänglichkeit/Usability 120 Navigation alternative Mittel 121 Besucherstrategien 65 Erstellung benutzbarer Schnittstellen 66 KISS-Prinzip 53 korrekt platzieren 106 primär, Layout 125 sekundär 126 Sprites und 165 Stildefinitionen für Elemente 124

322

|

Index

typische Ansätze 64 Unterstützung für Formulare 268 negative Außenabstände 81 Netscape 202, 274, 281 noframes-Element 288 noscript-Element 288

O object-Element embed-Element im Vergleich mit 283 Evolution von 181 Multimedia-Inhalte einbetten 202, 206 Multimedia-Inhalte veröffentlichen 203 Odeo-Markup 201 öffnende Tags 8 ol-Element Beispiele für Elementbeziehungen 29 Listen erstellen 118 opacity-Eigenschaft 278 OpenType-Format 211 Opera Web Standards Curriculum 251 optgroup-Element 257 Optimierung Bilder 191 Kontrast von Fotos 187 option-Element 257 Orientierung siehe Navigation overflow-Eigenschaft Bilder beschriften 196 Daten anordnen/ausrichten 176 Faux Columns 159 Größe von Überschriften 136 mehrspaltige Layouts 94, 98 Navigation und 125 nicht vorhersagbares Verhalten 80 Überlaufen in andere Elemente vermeiden 238 unterstützte Werte 77 overflow-x-Eigenschaft 81 overflow-y-Eigenschaft 81

P p-Selektor 30 padding-bottom-Eigenschaft 161 padding-left-Eigenschaft 117, 123 padding-top-Eigenschaft 94, 108 Paletten Grauwerte in 151 param-Element 202

Parsing XXIII Inhalt 20 Pixelwerte hasLayout-Parameter und 276 Plattensatz 211 Plugins 195, 284 PNG-Format 191, 278 position-Eigenschaft 38, 40 Einfachheit, Überlegungen 51 Elemente »stapeln« und 104 Elemente für Dateiupload und 256 Elemente positionieren 103 Formularlayout und 262 mehrspaltige Layouts 99 Nachteile von Tabellen 169 Navigation und 108, 125 unterstützte Werte 100 zweispaltiges Layout konvertieren 92 POST-Methode 254, 256 Postel’s Law 202, 281 pre-Element 242, 290 print-Medientyp 27, 36 projection-Medientyp 27, 35 proportionale Layouts 108 % (Prozentwert) 34–35, 85 Pseudoklassen 141 pt (Punkt) 34, 36 px (Pixel) 34 background-position-Eigenschaft und 156 Bildschirmauflösung und 35 Schriftgrößen 221–222

Q q-Element 145–146 Quirks-Modus, Rendering 76, 256

R Rahmen Bild 183 Größe von Elementen, Steuerung 75 Layout-Eigenschaften 83 Tabellenzellen gestalten 173 RCS (System zur Revisionskontrolle) 193 readonly-Attribut 265 Really Simple Syndication (RSS) 199 RealNetworks 283 Regeln Bildgröße/Rahmen 184 CSS-Layout 291

Definition XXIII effektive Web-Formulare/-Applikationen 245 Fluss der Elemente 294 für bestimmte Medien 26 Konflikte lösen 31–32 Spezifität 31 XHTML 8 Regeln für Web-Applikationen 245 rel-Attribut 138 Rendering XXIII Inhalt 20 Tabellen 174 unterstützte Modi 10, 76 required-Attribut 270 reservierte Zeichen 255 Ressourcen Definition XXIII Szenarien ohne Links 1 REST (REpresentational State Transfer) 246 RFC 2396 138 RFC 3986 255 RGB-Farbmodell 150–151 right-Eigenschaft 39–40 Elemente positionieren 100–101 Röhrenmonitor (CRT) 150, 153 Rollover-Effekte 179 rowspan-Element Daten anordnen/ausrichten 175 Rollover-Effekte 179 Selektoren, Überlegungen 177 Tabellen, Markup-Beispiel 172 RSS (Really Simple Syndication) 199 Rundle, Mike 164 Rundungsfehler 291

S Safari-Browser abgerundete Ecken 162 Navigation in Formularen 269 Saint-Exupéry, Antoine de 236 samp-Element 144 Sättigung, Werte 149 Scalable Vector Graphics (SVG) 190–191, 207 Schattenwürfe 158, 162 schließende Tags Definition 8 nicht einfügen, Folgen von 280 Schriften Geschichte 209 scope-Attribut 172

Index

|

323

screen-Medientyp 27 häufig verwendete Längeneinheiten 34–35 px (Pixel), Unterstützung 35 section-Element 73 Sehfähigkeit 148, 266 Seiten Definition XXIII Layoutraster und 111 Rendering XXIII über dem Knick 219 Überlegungen zur Struktur 10 Seitenzoom-Funktion 114 SELECT-Anweisung (SQL) 245 select-Element 249 Formular-Elemente und 257, 262 Plugin-Inhalte und 204 Selektoren 30 Definition XXIII IE-Beschränkungen 275 Konflikte lösen 31–32 Pseudoklassen und 141 schreiben 28 Tabellen gestalten 177 typische Markup-Schnittstelle 29 von CSS unterstützte Typen 30 Selektoren für benachbarte Geschwisterelemente 30 SEO (Suchmaschinenoptimierung) 96, 139, 164 SERP (Suchmaschinen-Ergebnisseite) 63 serverseitige Umgebung XXIII Architektur 301 Shea, Dave 60, 165 Sitemaps 64, 66 size-Attribut 223 Slideshow-Präsentationen Lightbox-Werkzeug 198 mit Vorschaubildern arbeiten 197 SlideShowPro-Werkzeug 199 SlideShowPro-Werkzeug 199 source-Element 205 span-Element Definitionslisten 129, 131 FIR considerations 163 Formular-Markup 252 speech-Medientyp 27 Spezifität von Selektoren 141 Sprites 165 SQL-Datenbanken 243 src-Attribut Bilder veröffentlichen 193–194

324

|

Index

Kaufmanns-Und in 254 Videos einbetten 205 sRGB-Farbraum 190, 278 Standards siehe Webstandards start-Attribut Listen erstellen 118 Zählbereiche in Listen ändern mit 122 Stearns, Geoff 200 Strict-Modus, Rendering 76 strike-Element 287 strong-Element 86, 144, 289 Struktur 62 Formulare und 250, 253 Inhalt verarbeiten 10 Markup, Unterstützung XXIV, 7 neue Elemente in HTML 5 73 Szenarien ohne Links 1 Trennung, Überlegungen 17 style-Attribut 13 Warnung vor Verwendung 26, 297 style-Element media-Attribut 26 Stylesheets einbinden 23 Stylesheets Bildgröße 183 color-Eigenschaft und 148 Definition XXIII Fahrner Image Replacement, Regeln für 164 häufig verwendete Längeneinheiten 34 in Dokumente einbinden 23 mehrspaltige Layouts 95 Pseudoklassen und 141 universelle Ansatzpunkte 14 sub-Element 145 subtraktives Farbmodell 149, 151 Subversion RCS 193 Suchmaschinen-Ergebnisseite (SERP) 63 Suchmaschinenoptimierung (SEO) 96, 139, 164 Suchmöglichkeiten, Navigation und 65–66 summary-Element 172 sup-Element 145 SVG (Scalable Vector Graphics) 190–191, 207 SWFObject 200, 203 System zur Revisionskontrolle (RCS) 193

T Tabellen ausrichten 176 Bestandteile 169 Kontrast für Kopf- und Fußteil verringern 178

Markup-Beispiel 170 Nachteile 167 Rendering 174 Rollover-Effekte hinzufügen 179 Zellen gestalten 173 tabindex-Attribut 268 table-Element Markup-Beispiel 171 mehrspaltige Layouts 95 Zellen anlegen 173 Zugänglichkeit von Formularen 268 Tags Definition XXIV, 8 Navigation und 64, 66 öffnend 8 schließend 8 target-Attribut 138 Taxonomie Definition 69 Verwendung durch Kaskade 70 tbody-Element 170 ungültiges Markup 284 td-Element 169 Daten anordnen/ausrichten 175 Tabellen, Markup-Beispiel 172 Template-Layout-Modul (CSS3) 99 Templates Empfindlichkeit von 280 Flexibilität, Überlegungen 54 Konsistenz erreichen mit 57 Nachteile von Tabellen 168 unterstützte Layout-Typen 108 Testen Prototypen 258 Tests Szenarien 68 Tetraden 154 text-align-Eigenschaft 214 sekundäre Navigation 126 Tabellen gestalten 175–176 text-decoration-Eigenschaft 143 text-indent-Eigenschaft 164 text-transform-Eigenschaft 128, 131, 241 textarea-Element 249 Formular-Elemente 256 required-Attribut 270 Textzoom-Funktion 114 tfoot-Element 170 Kontrast verringern 178 Selektoren, Überlegungen 177

Tabellen, Markup-Beispiel 172 ungültiges Markup 284 th-Element 170 Daten anordnen/ausrichten 175 Tabellen, Markup-Beispiel 172 thead-Element 170 Daten anordnen/ausrichten 175 Kontrast verringern 178 Selektoren, Überlegungen 177 Tabellen, Markup-Beispiel 172 ungültiges Markup 284 title-Attribut 13, 15 Bilder beschriften 195 effektiver Inhalt, Erstellung 140 Hyperlinks und 138 title-Element 134 Rollover-Effekte 180 Tabellen, Markup-Beispiel 172 top-Eigenschaft 39–40 Elemente positionieren 100–101 tote Links 3 tr-Element 169 Triaden 154 tty-Medientyp 27 Turnbull, Angus 279 tv-Medientyp 27 type-Attribut 118 Listen erstellen 118 Zählbereiche in Listen ändern mit 122 Typografie siehe Web-Typografie

U Übererfüllung der Anforderungen 54 Überlaufen in andere Elemente 238, 276 Überschriften Größe, Überlegungen 135 Größen vereinheitlichen 136 optimale Verwendung 135 Regeln definieren für 137 Schrift, Überlegungen 135 Stildefinitionen für 135 unterstützte Hierarchieebenen 133 Verwendung im Druck 134 ul-Element Beispiele für Elementbeziehungen 29 Formular-Markup 251 ungeordnete Listen Browser-Standardstile 117 erstellen 118 list-style-type-Eigenschaft 118

Index

|

325

nav-Element 119 Vorschaubilder und 197 Unicode Transformation Format (UTF) 42 Unicode-Standard 231 CSS, Überlegungen 295 Kodierungsschema wählen 232 nicht-ASCII-Zeichen einfügen 232 Uniform Resource Identifiers siehe URIs universelle Attribute Ansatzpunkte für Stylesheets 14 contenteditable-Attribut 16 Definition 13 Inhalt beschreiben 15 universelle Selektoren 30 Unterstreichungen, grundlos 299 UPDATE-Anweisung (SQL) 245 URIs (Uniform Resource Identifiers) Definition 2 href-Attribut und 138 maximale Länge 255 mit Links arbeiten 3 Probleme bei Implementierung von Hyperlinks 4 reservierte Zeichen 255 Usability verbessern mit 4 UTF (Unicode Transformation Format) 42 UTF-8 Kodierungsschema 231 UTF-8-Kodierungsschema 231

V value-Attribut Zählbereiche in Listen ändern mit 122 var-Element 145 veraltete Elemente 11 verdoppelte Außenabstände 277 Vererbung CSS, Überlegungen 292 Wert 33 Verhalten Formulare und 253 JavaScript, Unterstützung XXIV Trennung, Überlegungen 17 Verkleinern 191 verlustbehaftete Kompression 191 verlustfreie Kompression 191 Verschachteln Elemente 28 geordnete Listen 122 vertical-align-Eigenschaft 175–176 video-Element 205

326

|

Index

Vimeo-Markup 201 visibility-Eigenschaft 103, 267 :visited-Pseudoklasse 141 Vorfahren-Elemente 28–29 Vorschaubilder 197

W W3C-Empfehlungen XXIV, 10 WAI-ARIA 268 WCAG (Web Content Accessibility Guidelines) 267 WCAG (Web Inhalt Accessibility Guidelines) 42 Weakley, Russ 164 Web Content Accessibility Guidelines (WCAG) 42 Web Developer Toolbar (Firefox-Erweiterung) 111, 153 Web Inhalt Accessibility Guidelines (WCAG) 267 Web-Formulare siehe Formulare Web-Typografie Aliasing 215 Anti-Aliasing 215 begrenzte Schriftauswahl 223 Best Practice 242 Blocksatz 234 Erkennbarkeit 219 Geschichte der Schrift 209 Glossar 212 Hinting 217 Lesbarkeit 218 mit Schriften arbeiten 223 Schriftgrößen 221 Schriftstile 218 typografische Eigenschaften 240 Verwendungmöglichkeiten 226 Zeichenkodierung 229 Web-Usability siehe Informationsarchitektur Weblogs 126 websichere Farbpaletten 153–154 Websites Einfachheit und 52 typische Navigationsansätze 64 Webstandards Best Practices 45 debattierte Themen 42 Entwicklungsregeln 46 Interoperabilität 43 Konstruktionismus, strikt 45 Liste 41

Marktkräfte 43 Prioritäten der Browserhersteller 44 Rückwärtskompatibilität 44 Vorteile 46 Vorwärtskompatibilität 43 Zugänglichkeit 43 Webstandards.org 284 Wert-Attribut Formular-Markup 252, 257 Listen erstellen 118 Werte XXIV, 8 berechnet 291 Prozent (%) 85 übliche Längeneinheiten 34 vererben 33, 292 von float-Eigenschaft aufheben 90 white-space-Eigenschaft 242 sekundäre Navigation 127 Stildefinitionen für gute Erkennbarkeit 219 Verwendungsbeispiele 290 width-Eigenschaft 38, 40 auto-Wert 76 Bildgröße 183 Daten anordnen/ausrichten 176 Definitionslisten gestalten 127 Elemente positionieren 103 Formular-Markup 252, 256, 260 Links, anklickbaren Bereich vergrößern 142 mehrspaltige Layouts 94 Navigation und 106 Prozentwert 85 Tabellen, Markup-Beispiel 172 Tabellenzellen gestalten 174 zweispaltiges Layout konvertieren 92 Windows Media Player 202, 283

Windows-1252-Standard 232 word-spacing-Eigenschaft 212, 242

X XHTML 11 Anführungszeichen, Regeln für Verwendung 9 Groß- und Kleinschreibung, Unterschied 8 Internet Explorer, Probleme 279 XML, IE-Probleme 279 xml:lang-Attribut 13, 16 XMLHttpRequest-Objekt 204, 287

Y Yahoo! 282 YouTube-Markup 201

Z z-index-Eigenschaft CSS, Überlegungen 293 Einfachheit, Überlegungen 51 Elemente »stapeln« und 104 Navigation und 106 Zähler 294 Zeichenkodierung 230 Kodierungsschema wählen 231 literale Leerzeichen 255 nicht-ASCII-Zeichen einfügen 232 reservierte Zeichen 255 Standards für 231 Zeitungslayout 219 zusammengefasste Außenabstände 82

Index

|

327

Über den Autor Ben Henick erstellte seine erste Website 1995 im Rahmen eines Uni-Webprojekts. Seitdem hat er in fast allen Bereichen des professionellen Webdesigns gearbeitet und von der HTML-Basisarbeit und der Entwicklung kniffeliger CSS-Lösungen über die Mitarbeit an Content Management-Projekten bis hin zur Konzeption größerer Informationsarchitekturen alle erdenklichen Tätigkeiten eines Webworkers übernommen. Als Autor ist er für A List Apart, The Webstandards Project und zuletzt für das Web Standards Curriculum von Opera in Erscheinung getreten.

Über den Übersetzer Jørgen W. Lang lebt und arbeitet als Übersetzer, Webdesigner und Musiker irgendwo zwischen Frankreich und Dänemark. Wenn er nicht gerade ein Buch für O’Reilly übersetzt oder an einer Website schraubt, ist er vermutlich wieder einmal irgendwo auf Tournee, zum Beispiel mit seinem Trio DÁN (www.danmusic.de) oder mit dem KlangWelten-Festival (www.klangwelten.com). Sie erreichen Jørgen per E-Mail unter [email protected].

Kolophon Das Tier auf dem Cover von Das Beste an HTML & CSS ist ein Katzenfrett (Bassariscus astutus). Der lateinische Name ist mit »geschickter, kleiner Fuchs« zu übersetzen, dabei ist der Katzenfrett weder eine Katze noch ein Fuchs: Als Säugetier gehört er zur Familie der Kleinbären, zu der auch die Waschbären zählen. Der Katzenfrett ist im Südwesten der Vereinigten Staaten und in Mittelamerika beheimatet, wo er felsige, halbtrockene bis wüstenartige Landschaften bevölkert. In Südmexiko und in den Südstaaten der USA hat er aber auch waldreichere Gebiete für sich erobert. Der Schwanz des Katzenfretts ist sein auffälligstes Merkmal: Mit 30 bis 50 Zentimetern ist er mindestens so lang wie der gesamte Körper des Tieres und bildet ein apartes Ringelmuster aus schwarzem und weißem Fell, das mit der dunkelbraunen bis beigen Farbe des restlichen Körpers kontrastiert. Wie man schon an den großen Augen und Ohren erkennen kann, ist der Katzenfrett ein nachtaktives Tier, das in der Dämmerung auf Nahrungssuche geht. Als Allesfresser ernährt er sich sowohl von Früchten und Beeren als auch von kleinen Säugetieren, Eidechsen und Vögeln. Bei der Jagd sind ihm seine äußerst beweglichen Sprunggelenke von großem Nutzen, die er um 180 Grad drehen kann und die ihm das Klettern und Springen sogar auf schmalen Felsvorsprüngen ermöglichen. Die Jungtiere des Katzenfretts lassen sich gut zähmen. In früheren Zeiten dienten sie den nordamerikanischen Siedlern als Helfer gegen lästige Nager im Haus und in den Bergwerken. Aus diesem Grund ist der Katzenfrett auch unter dem Namen »miner’s cat« bekannt. Die Titelillustration zu diesem Buch stammt aus der Riverside Natural History. Die Schrift auf dem Buchumschlag ist die Adobe ITC Garamond. Die Fließtextschrift ist die Linotype Birka; die Schriftart für die Überschriften ist die Adobe Myriad Condensed und, für den Code nutzen wir die LucasFonts TheSansMono Condensed.



---



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

Read more



Das Beste an JavaScript

Read more



Das Beste

Read more



Das Beste

Read more



Das Beste

Read more



Das Beste

Read more



CSS-Praxis - Perfektes Webdesign mit Cascading Stylesheets

Read more



Css-Praxis - Perfektes Webdesign Mit Cascading Stylesheets

Read more



HTML Dog: The Best-Practice Guide to XHTML and CSS

Read more



Best Practices

Read more



CSS-Praxis - Perfektes Webdesign mit Cascading Stylesheets

Read more



Executive Compensation Best Practices (Wiley Best Practices)

Read more



HTML Dog: The Best-Practice Guide to XHTML and CSS

Read more



HTML Dog: The Best-Practice Guide to XHTML and CSS

Read more



HTML Dog: The Best-Practice Guide to XHTML and CSS

Read more



Accounting Control Best Practices (Wiley Best Practices)

Read more



Executive Compensation Best Practices (Wiley Best Practices)

Read more



Das eigene Web mit HTML, CSS und JavaScript

Read more



Organization of R & D: An Evaluation of Best Practices

Read more



Das Beste der Logistik

Read more



Das eigene Web mit HTML, CSS und JavaScript

Read more



Android Apps mit HTML, CSS und JavaScript

Read more



Pro CSS and HTML Design Patterns

Read more



HTML and CSS: Design and Build Websites

Read more



Virtual References Best Practices

Read more



Payroll Best Practices

Read more



Technology Best Practices

Read more



Pro .NET Best Practices

Read more



Das beste Mittel gegen Kopfschmerzen

Read more



HTML Utopia: Designing Without Tables Using CSS

Read more

Recommend Documents



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

Effizientes Design, sauberer Code Das Beste an HTML & CSS Best Practices für standardkonformes Webdesign O’Reilly Ben...

---



Das Beste an JavaScript

he sc e ut ab De usg A Erkunden Sie die Stärken von JavaScript Das Beste an JavaScript Douglas Crockford O’Reilly D...

---



Das Beste

Heinrich Spoerl Das Beste D ie Feuerzangenbowle Der Maulkorb Der Gasmann Zu diesem Buch Die drei berühmtesten Romane...

---



Das Beste

Heinrich Spoerl Das Beste D ie Feuerzangenbowle Der Maulkorb Der Gasmann Zu diesem Buch Die drei berühmtesten Romane...

---



Das Beste

Heinrich Spoerl Das Beste D ie Feuerzangenbowle Der Maulkorb Der Gasmann Zu diesem Buch Die drei berühmtesten Romane...

---



Das Beste

Heinrich Spoerl Das Beste D ie Feuerzangenbowle Der Maulkorb Der Gasmann Zu diesem Buch Die drei berühmtesten Romane...

---



CSS-Praxis - Perfektes Webdesign mit Cascading Stylesheets

Ô·»¾» Ô»-»®·²ô ´·»¾»® Ô»-»®ô Í»·¬ ¼»® »®-¬»² ß«º´¿¹» ¼·»-»- Þ«½¸»- ·-¬ ¹»®¿¼» »·² Ö¿¸® ª»®¹¿²¹»²ò ÝÍÍóÜ»-·¹² ¸¿¬ -»·¬¼»...

---



Css-Praxis - Perfektes Webdesign Mit Cascading Stylesheets

Ô·»¾» Ô»-»®·²ô ´·»¾»® Ô»-»®ô Í»·¬ ¼»® »®-¬»² ß«º´¿¹» ¼·»-»- Þ«½¸»- ·-¬ ¹»®¿¼» »·² Ö¿¸® ª»®¹¿²¹»²ò ÝÍÍóÜ»-·¹² ¸¿¬ -»·¬¼»...

---



HTML Dog: The Best-Practice Guide to XHTML and CSS

The Best-Practice Guide to xHTML&CSS Patrick Griffiths HTML Dog Patrick Griffiths New Riders 1249 Eighth Street Ber...

---



Best Practices

---

×
Report "Das Beste an HTML & CSS - Best Practices für standardkonformes Webdesign"
Your name
Email
Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint
Description
Close Send
×
Sign In
Email
Password
Remember me Forgot password?
Sign In
---
Login with Facebook
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 & close