Cascading Style Sheets (CSS)

Die Cascading Stylesheets werden für die Gestaltung der Webseite verwendet. Wie im HTML-Teil erwähnt werden Gestaltung und Struktur getrennt. Für Sehbehinderte hat das den Vorteil, dass sie eigene Stylesheets erstellen können, um eigene Farbschemata einzusetzen.

Unsichtbare Elemente

CSS wird auch verwendet, um Elemente zu verstecken, die Blinden helfen sollen, das sind vor allem die Sprunganker und Bereichsüberschriften.
Andere Elemente werden via CSS umformatiert, zum Beispiel verfügen Listen standardmäßig über einen Listenpunkt und brechen um. Mit CSS wird der Listenpunkt entfernt und bei einer horizontalen Navigation kann der automatische Zeilenumbruch versteckt werden.

Formatierung

Ansonsten spielt CSS natürlich bei der Formatierung von Texten oder der Positionierung von Elementen eine große Rolle. Ich schrieb an anderer Stelle über Textformatierung. Mittels CSS kann der Schriftgrad von Überschriften, der Buchstabenabstand von Fließtext und vieles mehr formatiert werden.

Farben

Auch die Farben werden überwiegend über CSS festgelegt. Das aktuelle CSS 2.1 ist ein recht alter Standard, deshalb werden viele moderne Anforderungen nicht erfüllt: es gibt z.B. keine Filter oder Farbverläufe, wie sie von SVG unterstützt werden. Deshalb werden für aufwendigere Grafik-Aufgaben Hintergrundbilder oder gar JavaScript verwendet. Beides hat Nachteile: einige Menschen haben JavaScript standardmäßig abgestellt und bei Hintergrundbildern können z.B. Sehbehinderte die Farben und den Kontrast nicht anpassen.

Es ist sinnvoll, möglichst alle Gestaltungsaufgaben über CSS vorzunehmen. Das vereinfacht die Anpassbarkeit. CSS hat den Vorteil, dass verschiedene Stile für unterschiedliche Ausgabegeräte festgelegt werden können. Ein mobiles Endgerät mit kleinem Display kriegt zum Beispiel eine andere Webseite zu sehen als ein großes TFT-Display.

Fokus

Ein wichtiges Element für Tastaturnutzer ist der Fokus. Der Tastaturnutzer benutzt hauptsächlich die tabulator-Taste, um ein Element auf der Webseite anzuspringen. Der Fokus zeigt, welches Element aktuell angetabbt wurde. Der Fokus zeigt sich meistens als Rahmen, Unterstreichung oder Farbänderung oder in Formularfeldern als Cursor. Auch Mauszeiger sehen den Fokus hauptsächlich beim Überfahren. Es ist möglich, unterschiedliche Änderungen bei Mausberührung und bei Tastatur-Fokus festzulegen, mir ist aber kein Falll bekannt, wo das sinnvoll wäre, es spricht aus meiner Sicht aber auch nichts dagegen.

CSS soll auch eingesetzt werden, um Schlampereien beim Design zu vermeiden. Wir kennen das alle, wenn wir es mal wieder eilig haben und Einrückungen mit Tabulator, Leerzeichen und der Return-Taste vornehmen. Aus Erfahrung kann ich sagen, dass man damit selten Zeit spart. Die zwei Minuten, die man benötigt, um eine CSS-Klasse dafür zu schreiben stehen einer aufwendigen Suche nach Fehlerquellen und einer aufwendigen und nervtötenden Korrektur gegenüber, die zudem wesentlich länger dauert.

Übungen

  • Zunächst einmal sollst du ein Gefühl dafür bekommen, welche Rolle CSS für die Webseiten-Darstellung spielt. Rufe dazu eine Seite wie Amazon oder eBay auf und schalte CSS in den Browser-Darstellungsoptionen ab. Auf dem gleichen Weg schaltest du CSS wieder ein.
  • Als nächstes kannst du die Darstellung der Webseite ändern. Stelle eine eigene Schriftart ein, eine eigene Schriftgröße, einen eigenen Farbstil. Jetzt rufe ein paar deiner bevorzugten Webseiten auf und schaue dir an, wie sich die einzelnen Änderungen auf die Darstellung der Webseite auswirkt.
  • Wenn du dich schon mit CSS auskennst, arbeite die in der Lektüreempfehlung genannten Artikel durch, um barrierefreies CSS erstellen zu können.

Lektüreempfehlungen

Wenn Du es nicht machst, macht es keiner