Alternative CSS-Stylesheets

Das Drucken von Webseiten ist sicherlich seit den inzwischen verlässlichen Speichermethoden von HTML-Seiten zur Seltenheit, jedoch nicht zur Ausnahme geworden.

Gerade bei wissenschaftlichen Artikeln, Schritt-für-Schritt-Anleitungen, Rechnungen, elektronischen Tickets und Ähnlichem bietet sich der Druck an, sei es um bequem handschriftliche Anmerkungen machen zu können, sei es zum Archivieren von Belegen und Dokumenten.

Dies ist bei der reinen Bildschirmausgabe nur schwer möglich und birgt bei Drucker-unfreundlichem Layout ein hohes Frustpotenzial.

Zwei Alternativen

Für Besitzer einer Website, welche diesen Dienst anbieten möchten, bleiben zwei Alternativen: Entweder sie pflegen die Inhalte doppelt in einer normalen und einer druckoptimierten Version oder sie schaffen sich auf Basis von CSS eine automatisch optimierte Seite für den Ausdruck.

Letzteres Vorgehen ist sicherlich zu bevorzugen - zwar bedeutet es ein wenig mehr Aufwand bei der Erstellung der Webseite, dafür müssen sie sich im Nachhinein nicht um die doppelte Pflege der Inhalte kümmern und können die entsprechenden CSS-Definitionen vielfältig wiederverwenden.

Als Grundlage für dieses Beispiel wird eines der beiden Beispiele aus der Ausgabe 01/2009 herangezogen. Dieses zeigt eine Webseite mit zwei Spalten, einigen Formatierungen und Überschriften sowie einem grauen und einem schwarzen Hintergrund.

In mehreren Schritten wird diese Webseite so optimiert, dass ein Ausdruck ohne Hintergrundfarben und mit einer optimierten Ausrichtung der Inhalte für den Drucker möglich ist.

Medientypen

Im Beispiel sind zur Vereinfachung alle Stylesheet-Definitionen in das HTML-Dokument eingegliedert und nicht in einer separaten Datei ausgelagert. Deswegen sieht die Definition für das Stylesheet folgendermaßen aus:

Wenn Sie lieber mit einer zusätzlichen Datei für die CSS-Definitionen arbeiten möchten, sieht die Verlinkung wie folgt aus:

In beiden Fällen ist der Medientyp der Bildschirm (media="screen"), die im Folgenden definierten Formatierungen gelten also für die direkte Ausgabe im Browser.

Als Alternativen bietet CSS noch zwei weitere Medientypen an:

• all - diese Definitionen gelten für alle Ausgaben und sind somit immer zutreffend. • print - die Festlegungen gelten nur für die Ausgabe auf dem Drucker.

Die Medientypen bilden die Grundlage für das Aussteuern der unterschiedlichen Ausgaben auf dem Bildschirm und dem Drucker.

Radikale Bereinigung

Für die Erstellung einer Druckansicht sollten Sie Ihren Text als Erstes von allen Formatierungen befreien und sich anschließend schrittweise an die Optimierung machen.

Bei der Zuweisung der Formate zu den Style- sheets ist für jede Definition entscheidend, ob diese für alle Medien gilt oder nur für den Bildschirm oder den Drucker. Entsprechend wird eine Verteilung der Formatierungen angegangen.

Das Zurücksetzen von Außen- und Innenabstand soll für alle Elemente und alle Medientypen gelten.