Das Web 2.0 unter dem Aspekt der Barrierefreiheit. Untersuchung der Webanwendung XING

Kapitel 4.2, CSS

Neben dem Internet entwickelte Tim Berners-Lee zudem die Sprache Hyper Text Markup Language (im Folgenden HTML), die seinerzeit noch ohne Formatvorlagen ausreichen musste, da HTML nicht für Präsentationszwecke ausgelegt war, sondern um Struktur und Inhalt einer Website zu beschreiben. Damals gelang es einem Webdesigner lediglich durch überladenen Quellcode das Layout einer Seite zu beeinflussen.

Um derartige Überfüllung der Dokumente mit semantisch und strukturell irrelevanten Tags und damit der übermäßigen Menge an Quellcode zu umgehen, lag die Lösung in der Trennung von Information und Darstellung: dem Cascading Stylesheet (im Folgenden CSS).

Die Idee hatte das W3C bereits 1996 zu Zeiten von HTML 3.2 aufgebracht. Doch die Webdesigner strebten sich dagegen auf ihre inzwischen vertrauten Präsentationselemente zu verzichten. Auch die Browserhersteller taten sich schwer mit der Unterstützung von CSS.

Dennoch schien der Zeitpunkt für CSS gerade günstig, da der Präsentationssprache jetzt in Form von HTML 4.0 strict eine reine Struktursprache gegenüber stand (in Kapitel 4.3 (X)HTML 54ff. näher beschrieben).

Die Spezifikation CSS 1.0 wurde daher 1999 in überarbeiteter Version erneut publiziert. Im neuen Web gewinnt CSS besondere Popularität, da sie ein hohes Maß an Flexibilität in Bezug auf die Kreativität und Gestaltung von Webseiten liefern. Die essentielle Aufgabe des CSS liegt in der Entlastung aller Formatierungsbefehle des (X)HTML-Codes einer Website, welche getrennt davon in einem Stylesheet ausgelagert werden. Das W3C veröffentlichte sodann im Dezember 1996 die erste Spezifikation von Cascading Style Sheets (CSS Level 1 Specification), welche noch sehr überschaubar war und lediglich Farben und Text gestaltete. Äußerst problematisch erwiesen sich die Ausrichtung der Elemente sowie die Darstellung der damals benutzten Browser.

Im Mai 1998 verabschiedete das W3C die zweite Version von Stylesheets (CSS Level 2 Specification). Jene ist hierbei enorm angewachsen und beschreibt ihre Erscheinung auch in alternativen Medienformaten wie bspw. dem Screenreader (eine detailierte Erläuterung folgt in Kapitel 4.2.1 Einbindung von CSS Seite 51ff.). Im Gegensatz zur ersten Version, die seither von nahezu allen gängigen Browsern vollständig umgesetzt wurde, hat sich die zweite Spezifikation, zwar verbesserte Version des ursprünglichen Standards, jedoch bisher nicht durchsetzten können. Die aktualisierte Version 2.1 entgegen zählt bereits zu einem unermesslichen Gestaltungsinstrument von (X)HTML-Dokumenten und wird von allen zeitgemäßen Browsern unterstützt.

Die CSS Level 3 Specification befindet sich bereits in Bearbeitung, wobei weitere Verbesserungen bei der Einbindung zusätzlicher Medien und fortgeschrittene Layouttechniken unterstützt werden sollen. Im Unterschied zu CSS1 und CSS2, wird CSS3 kein einziger Block sein, sondern modular aufgebaut sein, also auf separaten Teiltechniken basieren und noch flexibler werden. Ausgabegeräte sind sodann fähig nur diverse Module zu implementieren und können trotzdem dem Standard folgen. Gegenwärtig befindet sich diese Entwicklung im Zustand Working-Draft resp. Candidate Recommendation.

Da lediglich beschreibend festgelegt wird, welche Elemente auf welche Weise dargestellt werden und in welchem Kontext welche der definierten Stil-Anweisungen einzusetzen ist, stellt CSS keine Programmiersprache, sondern eine Präsentationssprache dar.

Einbindung von CSS:

Es existieren vier Möglichkeiten, Darstellungsanweisungen mit HTML-Dateien zu verbinden.

Bei der verlinkten Stylesheet-Methode, wird das ganze CSS in eine externe Datei ausgelagert und mit dem Dokument durch das Element verknüpft. Somit können mehrere HTML-Seiten (beispielsweise alle Seiten einer Website) auf ein einziges CSS zugreifen. Da eine Gegebenheit jetzt für die gesamte Website an nur noch einem einzigen Ort hinterlegt ist, reduzieren sich Komplikationen seitens Design-Änderungen auf das Minimum. Des Weiteren können mehrere Stylesheets mit einzelnen LINK-Befehlen eingebunden werden. Infolgedessen besteht die Möglichkeit, bei einer umfangreichen Seite mit mehreren Abschnitten ein CSS mit Anweisungen zu notieren, die für die gesamte Seite gelten, sowie für die jeweiligen Abschnitte spezifische zusätzliche Stile bereitstellen. Dabei stehen die Inhalte beider Stylesheets in Kombination, wobei das zuletzt eingebundene CSS, im Falle einer unterschiedlichen Definition die Angaben des vorherigen überschreibt.

Ähnlich wie das verlinkte Stylesheet funktioniert auch das importierte Stylesheet. Hierbei sind die Stilanweisungen ebenfalls in einer externen Datei angeordnet, die jedoch nicht in das Dokument verlinkt sondern importiert werden. Das bedeutet, dass die extern liegenden Anweisungen gelesen und so behandelt werden, als stünden sie physisch an Stelle der Importanweisung. Falls mehrere Anweisungen nacheinander stehen, dominiert im Konfliktfall die zuletzt erfolgte. Der Stilcontainer style kann sowohl direkt Stilanweisungen beinhalten als auch eine oder mehrere Importanweisungen. Nur unter der @import –Zeile besteht die Möglichkeit weitere Anweisungen hinzuzufügen, darunter nicht. Zudem ist es möglich ein anderes Stylesheet aufrufen zu lassen, was zu einer verbesserten Ordnung führt sowie zu einigen hilfreichen Tricks, mit denen sich gezielte Stylesheets für bestimmte Browser verwenden lassen.

Zudem ist es möglich, zwischen verschiedenen Ausgabegeräten zu unterscheiden und jedem ein eigenes Stylesheet zuzuweisen. Die Darstellung auf dem Computerbildschirm kann so beliebig von der Anzeige auf einem mobilen Endgerät, Screenreader oder der Ausgabe auf einem Drucker abweichen. Das Medium wird dabei mit Hilfe des media-Attributs definiert. Durch Kommata getrennt, lassen sich auch mehrere Medien in einem Stylesheet zuweisen. Somit sind komfortables Drucken sowie individuelle Ansichten gewährleistet.

Eine weitere Methode ist es, die komplette Stilanweisung direkt im HTML-Dokumentenkopf einzubinden (Dokumentstyle). Der style- Tag benötigt ein type- Attribut für den MIME-Typ der Anweisung, um die Interpretation der Daten durch den Browser zu steuern. In (X)HTML muss der Containerinhalt als CDATA- Bereich definiert werden.

Die einfachste Variante besteht darin, die Stil- Anweisung direkt als Attribut in einen HTML-Tag des zu formatierenden Elements einzubinden, also inline. Dieser sogenannte Inlinestyle ist allgemein umstritten, wenn auch in manchen Fällen durchaus praktisch. Im Einzelfall ist die Methode beispielsweise bei der Formatierung eines einzigen Bereiches einer HTML-Seite sinnvoll. Der Inlinestyle bedeutet die Ranghöchste Anweisung und ist somit für das punktuelle Einsetzen sinnvoll. Folglich ist es einem Webdesigner möglich die Darstellung einzelner Elemente schnell festzulegen, ohne sich Gedanken um gegebenenfalls andere existierende CSS-Anweisungen zu machen. Jedoch sind die externen Einbindungsmethoden zumeist vorteilhafter, da dadurch der Quelltext nicht zunimmt und die Stil-Anweisungen lediglich ein einmaliges Laden erfordert. Des Weiteren, wie schon besprochen, sollten Präsentations-anweisungen extern lagern und nicht im Dokument selbst.

Werden alle vier Methoden gleichzeitig auf ein Dokument angewendet, so wirkt die Summe der CSS-Anweisungen auf das Dokument. Die Reihenfolge der vorangegangen vorgestellten Einbindungs- Methoden beansprucht auch eine Art von Rangordnung. Ist beispielsweise in einem extern verlinkten Stylesheet die Schriftfarbe blau und eine Anweisung für die Schriftfarbe innerhalb des Dokumentstyles für das gleiche Element schwarz hinterlegt, so wird im Endeffekt die Schriftfarbe schwarz angezeigt, da dieser gewichtiger ist. Ebenso unterliegen dem Rang des Dokumentenstyles importierte Anweisungen, welche andererseits höherrangig als extern verlinkte Anweisungen sind. Durch die Nähe zum gestylten Element ist der ranghöchste und damit unanfechtbare Style der Inlinestyle. Jedoch besteht dabei der Nachteil, dass er sich auf gleicher Höhe zum Dokumentinhalt befindet, was eine Vermischung von Präsentation und Struktur zur Folge hat.

Bei der Kaskadierung werden markierte, spezifischere, später definierte oder Benutzeranweisungen höherwertig ausgegeben (Rangfolge). Durch die Zuweisung class=„hinweis“ können Elemente anhaltend entsprechend formatiert werden.

Eine Demonstration für die vielfältigen Möglichkeiten, die sich durch CSS ergeben, bietet ein Projekt des Webdesigners David Shae, der CSS Zen Garden.

Eine vorgegebene und immer gleich bleibende inhaltliche Struktur wird von verschiedenen Designern mittels CSS auf unterschiedlichste Art und Weise gestaltet. Die Ergebnisse und die daraus ersichtlich zahlreichen Gestaltungs-möglichkeiten der gleichen HTML-Struktur demonstrieren eindrucksvoll die erreichbare Flexibilität beim professionellen und konsequenten Einsatz von Cascading Style Sheets.

Accessible CSS:

Durch den Einsatz des CSS ist der Grundstein für eine barrierearme Website bereits gelegt. Die Dokumentenstruktur ist im HTML-Code gegeben, Design- und Layout-Informationen im Stylesheet. Nur mittels dieser Trennung ist es Geräten, die die visuelle Ansicht nicht tangieren möglich, den Inhalt zur Präsentation zu verwenden.