Sie sind hier: Startseite » CSS-Tutorials » Druckerstylesheets
Viele Internetseiten sind optimiert auf 800*600 und größer, haben Links ein Navigationsmenü, oben einen Seitenkopf und meistens rechts noch ein weiteres Menü. Der eigentliche Inhalt steht in der Mitte. Wenn Sich nun jemand ausgerechnet für diesen Inhalt interessiert, und ihn über die Browserfunktion ausdrucken möchte, gibt es ein Problem. Durch die Aufteilung wird ein Teil vom "wichtigen" Inhalt abgeschnitten und nur zerstückelt ausgedruckt. Zum anderen erfolgt ein Ausdruck der Seitennavigation, der auch nicht wirklich gewünscht ist.
Eine einfache Abhilfe für moderne Browser schafft CSS2. Dazu wird eine eigene Stylesheet-Datei für den Drucker angelegt (im Beispiel: druck.css).
Eingebunden wird die Datei in das Dokument nach der "normalen" Styledefinition mit
in diese Datei (druck.css) kommt folgender Inhalt:
.box3 ist nur ein Beispiel, wie man einen Block besonders formatieren kann. in dem Stylesheet für den Browser sieht .box3 folgendermaßen aus:
Die unterschiedlichen Formatierungen sollten ersichtlich sein. Das Stylesheet für den Printer legt die Breite z.B. auf 17cm fest, einen weißen Hintergrund und keine Umrandungen.
Und so sieht der Quelltext vom HTML-Dokument aus: in den Metatags:
und im Rest: z.B. der Kopf der Seite, (.box1) – wird im Browser angezeigt, aber nicht gedruckt.
und die Navigation links auf der Seite (wird nicht gedruckt):
oder der Inhalt der Seite (wird gedruckt):
Und letztendlich noch der fehlende Parameter in der Datei "druck.css": .unsichtbar
Hier wird im modernen Browser nichts angezeigt, aber auf dem Ausdruck wird das entsprechende Logo mit ausgedruckt.
Autor: Sven Soltmann
