ghi at c'tGerald Himmelein @ c't
Material zu Artikeln | deutsch | English | Bork Bork

CSS2 - Stylesheet-Beispiele, Erläuterungen

Begleitmaterial zu:

Alexander Oberdörster: So schick wie möglich, HTML 4.0: Cascading Style Sheets, Level 2 mit Media Types, c't 09/99, S. 162; Kasten: "CSS2-Medientypen am Beispiel"

Dieses Beispiel demonstriert einige der Neuerungen in CSS2, vor allem die Media Types. Die HTML-Seite existiert in vier Fassungen, eine für die Bildschirmdarstellung auf einem Computerbildschirm, eine für den Ausdruck, gewöhnlich auf Papier, und zwei für Handheld-Computer mit kleinen Bildschirmen.

Die teilweise beträchtlichen Veränderungen im Layout der Seite sind vollständig mit Style Sheets realisiert: Es gibt ein grundlegendes Style-Sheet, das für sich das Layout des Mediums "screen" vollständig beschreibt (general.css) und für jedes andere Medium jeweils ein zusätzliches Sheet. Das Medium "handheld" ist mit zwei Style-Sheets vertreten, eines für sehr kleine Schwarzweiß-Displays (handheld1.css), eines für etwas größere (Auflösung mindestens 320*200) mit Graustufen- oder Farbdarstellung (handheld2.css). Die Auswahl muß der Leser selbst vornehmen, da im Medien-Modell von CSS solche Daten nicht vorkommen.

general.css in HTML-Dokument

general.css als Style Sheet

Simulierte Browser-Darstellung

Das Sheet "general.css" ist ein sogenanntes "Persistent Style Sheet"; der fehlende Titel im <LINK>-Tag macht es dazu. Unabhängig von anderen geladenen Style Sheets wird es immer geladen, trotzdem können andere Style Sheets natürlich einzelne oder alle darin gesetzten Attribute überschreiben. In den anderen <LINK>-Tags ist der Titel gesetzt, damit sind sie "preferred Style Sheets". Nur eine dieser Vorlagen kann zur gleichen Zeit aktiv sein; ist das Medium "print", dann ist es print.css, bei einem PDA zunächst "handheld1.css". Das Sheet "handheld2.css" kann ein PDA-Benutzer alternativ auswählen.

Die Papierversion der Seite verzichtet auf jegliche Menüs, weil die nach dem Ausdruck statisch und damit sinnlos wären. Statt dessen wird nur die ausgewählte Kategorie als Untertitel gedruckt. Die Hintergrundfarbe ist weiß, nicht türkis, um den Toner-/Tintenverbrauch etwas im Rahmen zu halten. Das gesamte Layout trägt der Tatsache rechnung, daß die meisten Drucker nicht bis an den Rand der Seite drucken können, sondern etwa einen Zentimeter Rand lassen. Da Lesbarkeit auf dem Bildschirm -- mit kleinen Pixelzahlen -- nicht mehr wichtig ist, ist der Fließtext nicht mehr in der Spezialschrift Verdana, sondern in einer ordentlichen Werkschrift gesetzt, der Gil Sans. Da die Wahrscheinlichkeit aber recht gering ist, diesen Font auf dem Rechner des Lesers anzutreffen, ist als Alternative die Arial/Helvetica angegeben. Farben, Abstände und Schriftgrößen wurden entsprechend angepaßt.

print.css in HTML-Dokument

print.css als Style Sheet

Simulierte Drucker-Darstellung

Die "große" Fassung für PDAs (handheld2.css) ist der normalen Bildschirmversion sehr ähnlich, generell aber etwas dichter gepackt. Das bedeuted kleinere Abstände und geringere Schriftgrößen, zusätzlich hat die ausgewählte Kategorie jetzt die gleiche Größe wie die anderen Kategorien. Sie ist nur noch durch die weiße Farbe hervorgehoben.

handheld2.css in HTML-Dokument

handheld2.css als Style Sheet

Simulierte PDA-Darstellung

In der winzigen Ausgabe, speziell für PDAs vom Kaliber eines PalmPilot gedacht, macht deutlich mehr Abstriche: Die Seite ist jetzt schwarzweiß, das Menü ist völlig umgebaut. Aus Platzgründen kommt nur noch die standardmäßige serifenlose Schrift zum Einsatz, die hoffentlich auch am besten lesbar ist. Das Untermenü verschwand ebenfalls wegen Platznot.

handheld1.css in HTML-Dokument

handheld1.css als Style Sheet

Simulierte PDA-Darstellung

Die Seite ist so aufgebaut, daß auch völlig ohne Style Sheets der logische Aufbau erhalten bleibt. Dagegen haben wir keine Rücksicht auf Fehler in der CSS-Implementierung beliebter Browser genommen, sondern uns nur an den Standard gehalten. In der Konsequenz gibt es im Augenblick keinen Browser, der die Seiten wie geplant darstellen kann, die Abbildungen wurden daher mit Freehand und PhotoShop von Hand zusammengebaut.

Text ©1999 Verlag Heinz Heise. Autor: Alexander Oberdörster.

zurück zur CSS2-Seite