Mit ein paar CSS-Tricks stellen Sie eine druckerfreundliche Variante Ihrer Website bereit. Der Artikel verrät, was Sie hinsichtlich Browsern und Benutzereinstellungen beachten müssen.
Anzeige
Stylesheet für den Druck
Druck-Layout mit CSS
Bildschirm und Papier sind zwei Medien mit unterschiedlichen Layout-Anforderungen. Deswegen sollten Sie Vorkehrungen treffen, dass Ihre Webseiten auch ausgedruckt gut aussehen und benutzbar sind. Hat man früher noch häufig eine Extraversion der HTML-Seite für den Ausdruck erstellt, die serverseitig generiert oder händisch erstellt wurde, ist das heute dank der verbesserten CSS-Unterstützung durch die Browser nicht mehr notwendig: Ein Stylesheet für den Druck erledigt die Aufgabe ganz nach Wunsch.
Einbindung
Um anzugeben, für welches Ausgabemedium das jeweilige Stylesheet gelten soll, ist seit CSS 2 das media-Attribut vorgesehen. Es kann unter anderem die Werte print (Ausdruck), screen (Bildschirm), projection (Vorführmodus), handheld (Handheld) oder all (alle Ausgabemedien) annehmen. Geben Sie nichts an, gelten die Stylesheet-Angaben für alle Ausgabemedien. Im link-Element zur Einbindung eines externen Stylesheets lautet die Syntax:
Übrigens brauchen Sie den Slash vor der spitzen schließenden Klammer nur, wenn Sie XHTML einsetzen, bei HTML sollten Sie ihn weglassen. Wenn Sie @import zum Einbinden externer Stylesheets benutzen, geben Sie das Ausgabemedium am Schluss direkt an:
@import 'druck.css' print;
Auch bei im HTML-Kopf eingebetteten Stylesheets können Sie festlegen, dass sie für den Druck gelten sollen:
Wenn Sie nicht ein eigenes Stylesheet für den Ausdruck erstellen möchten, sondern einzelne spezielle Formatierungen für den Druck innerhalb eines allgemeinen Stylesheets machen wollen, steht Ihnen die vierte Möglichkeit offen – eine @-Regel innerhalb eines Stylesheets:
@media print {
/* CSS-Angaben für den Ausdruck */
Von den vier verschiedenen Möglichkeiten unterstützen die Browser am besten das media-Attribut im link-Element. Damit können alle modernen Browser umgehen, allein der uralte Netscape 4.x ignoriert hier andere Angaben als media=”screen”.
Vorsicht hingegen bei @import-Anweisungen mit Angabe des Ausgabemediums: Diese werden von allen Internet-Explorer-Versionen ignoriert, selbst der neue Internet Explorer 7 streicht hier die Segel. Dass alte Browser wie Netscape 4.x andere Angaben als media=”screen” im link-Element ignorieren, ist natürlich nicht unbedingt ein Nachteil, sondern kann gezielt eingesetzt werden, um Stylesheet-Angaben vor diesen Internet-Dinosauriern zu verbergen. Wer mit so einem alten Browser surft, erhält immerhin eine benutzbare, aber ungestylte Webseite.
Aufteilung
Sie können auch eine Liste von Ausgabemedien angeben, die durch Kommas getrennt werden. Wenn Sie ein eigenes Stylesheet für den Ausdruck erstellen, werden Sie meist auch gesonderte Angaben für den Bildschirm machen. Hier sollten Sie nicht nur media=”screen” angeben, sondern media=”screen, projection” schreiben, und zwar Opera zuliebe: Der norwegische Browser Opera hat einen Vollbild- oder Vorführmodus, den Sie in Opera über das Menü Ansicht oder die Taste [F11] ein- und ausschalten. Wenn Sie media=”screen, projection” schreiben, ist sichergestellt, dass Opera kleiner als Version 9 auch in diesem Vollbildmodus die Angaben im screen-Stylesheet verwendet. Und die anderen Browser stören sich nicht daran. Bei der Aufteilung der einzelnen Formatierungen auf die Stylesheets für den Bildschirm und für den Ausdruck gibt es prinzipiell zwei Herangehensweisen. Sie können ein allgemeines Stylesheet erstellen, das Angaben für alle Ausgabemedien enthält, und dieses, wo notwendig, durch speziellere Stylesheets überschreiben:
Bei dieser Methode müssen Sie aufpassen, dass Sie wirklich alle Angaben der allgemeinen CSS-Datei auch im Druck-Stylesheet überschreiben.
Alternativ dazu können Sie für jedes Ausgabemedium ein eigenes Stylesheet erstellen, das Sie sozusagen von Null beginnen müssen:
