Browser-Einstellungen

Druck-Layout mit CSS

Auch wenn Sie hierzulande davon ausgehen können, dass Webseiten auf A4-Papier ausgedruckt werden, haben Sie trotzdem bei Druck-Stylesheets keine volle Kontrolle über die Ausgabe. Alle Browser haben Default-Einstellungen für den Ausdruck: Das betrifft die Ränder, das Papierformat (quer, hoch) und den Ausdruck von Hintergrundbildern und Farben. Außerdem ergänzen Browser Kopf- und Fußzeilen mit dem URL der Webseite, dem aktuellem Datum, der Seitenzahl et cetera. Diese Einstellungen kann der Benutzer jederzeit anpassen. Für die Gestaltung von Druck-Stylesheets bedeutet das, dass Sie die Ränder auf 0 setzen können, weil die Standardeinstellungen im Browser für einen Rand sorgen. Den durch den Browser für den Ausdruck festgelegten Rand können Sie über CSS nicht kleiner machen.

Tipps für die Erstellung

Wenn Sie ein Druck-Stylesheet erstellen, müssen Sie nicht jeden Schritt durch Ausdrucken austesten, sondern können während der Arbeit am Druck-Stylesheet den Medientyp in media=”screen” ändern: Dann sehen Sie die einzelnen Schritte im Browser als Vorschau. Praktisch ist hier die Webdeveloper-Toolbar, eine Erweiterung für Firefox. Sie bietet über den Menüpunkt CSS, CSS nach Medientypen darstellen, Druck die Option, die Ausgabe des Druck-Stylesheets am Bildschirm anzuzeigen. Damit können Sie sich auch Druck-Stylesheets anderer Webseiten ansehen und sich Ideen holen.

Wollen Sie prüfen, wie die Seite im Ausdruck mit den vom Browser eingefügten Kopf- und Fußzeilen aussieht, wählen Sie die Druckvorschau. Sie finden sie im Internet Explorer 6 und im Firefox unter Datei, Druckvorschau. Im Internet Explorer 7 ist sie beim Druckersymbol untergebracht.

Mehr CSS-Optionen

Eigentlich wäre es praktisch, wenn man bei unterschiedlichen Stylesheets nicht nur grob nach dem allgemeinen Medientyp wie Ausdruck und Bildschirm unterscheiden könnte, sondern Feineinstellungen je nach der Art des Ausgabemediums vornehmen könnte: beispielsweise ein eigenes Stylesheet für den Farbdruck, ein anderes für den Schwarz-Weiß-Druck. Genau das erlauben die in CSS 3 vorgesehenen Media Queries. Und so erstellen Sie Stylesheets je nach Drucker:

Derzeit werden Media Queries nur von Opera unterstützt. Opera bietet auch als einziger Browser eine weitgehende Unterstützung der in CSS 2.1 vorgesehenen speziellen Eigenschaften für den Ausdruck, wie @page für das Seiten-Layout oder size für Quer- oder Hochformat. Für alles weitere bleibt ein sehnsüchtiger Blick in die Zukunft: Wann werden wohl all diese schönen erweiterten Eigenschaften von CSS 2.1 und CSS 3.0 auch in der Browser-Realität ankommen?