Webdesign mit Cascading Style Sheets
Wie man mit Stil Websites einkleidet
Die Cascading Style Sheets (CSS) sind der Schlüssel für solides Webdesign. Doch viele Webdesigner haben das noch nicht gemerkt. Die Entwickler von Layout-Werkzeugen fürs Internet genauso wenig.
MATTHIAS SCHÜSSLER Die Webdesigner können sich wahrlich nicht über fehlende Auswahl an Werkzeugen beklagen. Wer Internetseiten gestaltet, kann aus einer Vielzahl von Technologien wählen: JavaScript, ActiveX, Dynamisches HTML, Flash, Quicktime, das Scalable-Vector-Format sind nur einige der als unverzichtbar oder hip propagierten Möglichkeiten. Bei dieser Vielfalt ist es nicht eben einfach, die Spreu vom Weizen zu trennen.
Wer sich ernsthaft mit der Materie auseinander setzt, merkt bald, dass eine solid gestaltete Website in aller Regel ohne Flash auskommt, dass JavaScript in vielen Fällen überflüssig ist und es sich lohnt, das Augenmerk auf einen anderen Standard zu richten: Cascading Style Sheets oder kurz CSS.
CSS ist eine offizielle, d. h. eine vom World Wide Web Consortium (W3C) abgesegnete Technologie für die Webseitengestaltung. Der Hintergedanke bei der Entwicklung der kaskadierenden Stilvorlagen war, den Webdesignern die Möglichkeit zu geben, die eigentlichen Textseiten möglichst weit gehend von gestalterischen Elementen zu befreien. Die Webseite selbst enthält den Inhalt, die Angaben zum Aussehen der Seite stecken hingegen in der Stilvorlage. Dies hat gleich mehrere Vorteile:
- Die Webseiten selbst können schlank gehalten werden und laden daher schnell.
- Die Gestaltung der Website ist dank einer zentralen Vorlage konsistent.
- Änderungen an der Gestaltung können sehr einfach vollzogen werden, da nicht die einzelnen Seiten angepasst werden müssen. Es reicht, die zentrale Stilvorlage zu modifizieren.
- Die Gestaltung einer Site lässt sich über alternative Stilvorlagen anpassen, sodass eine Website auch auf Handys, PDAs oder anderen Geräten gut ausschaut. Auch die Bedürfnisse von sehbehinderten Webbenützern können über ein spezielles Style Sheet ohne weiteres berücksichtigt werden.
In der Praxis zeigt sich, dass vom konsequenten Einsatz der Stilvorlagen sowohl die Besucher einer Site als auch deren Webmaster profitieren. Das «Tabellenbeispiel» vermag das zu verdeutlichen: Viele Designer haben es sich zur Gewohnheit gemacht, Tabellen für die Seiteneinteilung zu verwenden. Diese haben den Nachteil, dass Browser die Seite erst dann anzeigen, nachdem das abschliessende </table>-Tag geladen wurde, d. h. die Seite in aller Regel vollständig übertragen wurde – denn vorher kann der Browser nicht wissen, wie Spalten und Zeilen auf der Seite anzuordnen sind. Dank CSS lässt sich diese Zweckentfremdung der Tabellen vermeiden, denn die Seiteneinteilung lässt sich genauso gut über Style-Elemente erzielen. Der Vorteil für den Surfer: Der Browser ist in der Lage, den Inhalt anzuzeigen, wie er per Internet eintrifft. Dadurch reduziert sich die Wartezeit massiv, gerade bei einer langsamen Verbindung oder bei längeren Texten. Für den Gestalter hat den Verzicht auf Tables den Vorteil, dass die Seiten übersichticher werden und sich leichter warten lassen.
Die neue Browsergeneration
Bislang stand der konsequenten Verwendung von Stilvorlagen die ungenügende Unterstützung durch ältere Browser im Weg. Namentlich Netscape 4.x setzt die Stilvorlagen unzulänglich um. Bei Seiten, die auf diesem Browser gut aussehen sollen, können die Styles mit gutem Gewissen nur für die Textformatierung verwendet werden. Freilich rechtfertigt die inzwischen nur noch marginale Verbreitung des Netscape-Oldies nicht weiter, auf die Vorteile von CSS zu verzichten. Die neuen Browser ihrerseits unterstützen die kaskadierenden Stilvorlagen: Mozilla 1, Netscape 7, Internet Explorer in den aktuellen Versionen für Windows und Mac, Safari und Opera 7 rendern die Seiten weitgehend korrekt, allenfalls mit Detailunterschieden.
Natürlich kann der nachfolgende Publisher-Artikel die Funktionsweise nur oberflächlich beschreiben. Die vorgestellten Eigenschaften sollen eine Ahnung geben, wie leistungsfähig die Stilvorlagen bezüglich Formatierung und Seitengestaltung sind, und einen Eindruck vermitteln, wie die Gestaltung einer Website per CSS konstruiert sein könnte. Zur vertieften Information empfehlen wir die unten aufgeführten Websites.
Menschen-optimiert: In dieser Vorlage wurden typografische Absatzformate von Hand nach Gemeinsamkeiten gegliedert.
Maschinenlesbar: So sieht die gleiche Stilvorlage aus, wenn sie mit GoLive zusammengeschustert wird. Auch farbliche Auszeichnung macht die Sache nicht wesentlich übersichtlicher.
Das Boxmodell: Mit ihm wird Seitengestaltung äusserst einfach.
Das Boxmodell in der Praxis: Rechtsstehender Code ergibt die Darstellung, wie sie oben im Screenshot des Browsers zu sehen ist.
Konturenführung per Stilvorlage: Die blau hinterlegte Box wird über das Attribut «float» mit Konturenführung ausgestattet. Der unten stehende Text wird über «clear:left» angewiesen, wieder dem normalen Textfluss zu folgen.
Ein hübsches Layout, aus dem Ärmel geschüttelt: Diese Seite arbeitet mit zwei Klassen, «leftbox» für das links stehende hellblaue Navigationsböxchen und «mainbox» für den Hauptteil; «mainbox» definiert auch die rote Trennlinie zwischen Navigation und Fliesstext.
Das ist der Quellcode der oben stehenden Seite. Für die Positionierung der Navigation am linken Seitenrand sorgt das Argument «left» zusammen mit «position: absolute» bei der Klasse «leftbox».