Eine Seite, mehrere Styles

05.06.2004 Mit CSS ist es nicht nur möglich, für mehrere Seiten ein Style zentral anzufertigen, sondern für eine oder mehrere Seiten auch mehrere Styles für verschiedene Ausgabemedien. Statt z.B. eine Extra Seite für den Ausdruck bereitzustellen, wird ein Style Sheet für das Druck-Layout angelegt, das dann im head der HTML-Datei(en) eingebunden wird:

<link href="druck.css" rel="stylesheet" type="text/css" media="print">

Das Attribut media="print" zeigt dem Browser an, dass es sich hierbei um das Druckstyle handelt, welches bei der Druckvorschau zur Anwendung kommt.

Für ein Drucklayout eignet sich eine Serifen-Schrift wie Times New Roman, die für die Bildschirmanzeige eher ungeeignet ist, die Größe der Zeichen werden in pt angegeben, statt in px; für Links muss man extra angeben, dass sie nicht unterstrichen und blau wiedergegeben werden, wie es im Web Standard ist:

a:link { text-decoration:none; color:#000000; }

Die Navigation schließlich wird im Druck-Stylesheet ganz ausgeblendet, da es auf einem Blatt Papier ja nichts zu navigieren gibt:

div.navi { display:none; }

Neben einem oder mehreren Styles für weitere Ausgabemedien können auch Alternativ-Styles in HTML-Dateien eingebunden werden, eine Benennung erfolgt über das Attribut title:

<link href="alternativ.css" title="Alternatives Layout" rel="alternate stylesheet" type="text/css" media="screen" />

Die Styles werden dann in modernen Browsern wie Mozilla, einem neueren Netscape oder Opera über die Menüpunkte Ansicht und Styles ausgewählt. Da der Internet Explorer diese Möglichkeit nicht bietet, sind Seiten mit Alternivstyles eher eine Rarität, ein Beispiel ist die Site CSS fractatulum.net mit einem blue und einem orange style.

Für den Umbau meiner Hauptdomain www.joergkrusesweb.de habe ich mehrere verschiedene Styles entwickelt, von denen ich am Ende natürlich nur eines als Standard-Style einbinden konnte. Aber "wegwerfen" wollte ich die anderen nicht, als Alternativstyles lassen sie sich jetzt noch auf der Seite Gestaltung meiner Website aufrufen. Auch auf dieser Seite habe ich zur Demonstration zwei zusätzliche Styles eingebunden. Der Einsatz Alternativer Styles wird im allgemeinen wohl aber leider weiterhin beschränkt bleiben; zum einen wegen der fehlenden Unterstützung durch den Internet Explorer, zum anderen weil auch die anderen Browser die Styles nicht so unterstützen, wie man sich das wünschen würde: beim Wechsel zu einer weiteren Seite kehren sie automatisch zum Standard-Style zurück - das gewählte Style muss für jede Seite neu aufgerufen werden.