Wenn ihr auf eurer Webseite Tutorials oder andere wichtige Texte anbietet, die eure Besucher vielleicht ausdrucken möchten, bietet es sich an einen extra Stylesheet für diese Druckvorschau zu machen.

Was ich damit meine seht ihr, wenn ihr euch auf einer beliebigen Seite die Druckvorschau anseht (oder druckt euch die Seite mal zum Test aus.

Mit Firefox: Datei -> Druckvorschau
Mit Internet Explorer: Drucken -> Druckvorschau

Bei aufwändigen Layouts werdet ihr merken, dass sämtliche Bilder, Hintergrundbilder und meist auch die Navigation mit angezeigt/gedruckt werden. Das kann den Druck extrem in die Länge ziehen und bedeutet meistens auch einen größeren Farbverbrauch.

Um unseren Besuchern das zu ersparen, erstellen wir deshalb einen extra Stylesheet für diese Druckvorschau.

Wir erstellen nun eine Datei namens screen.css für die gewohnte normale Ansicht und eine Datei namens print.css für die Druckvorschau. Die bindet ihr dann folgendermaßen in den Header eurer Webseite ein:

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

Das Attribut "media" sagt dem Browser für welchen Zweck das entsprechende Stylesheet benutzt werden soll. Also "screen" für die normale Ansicht auf dem BIldschirm und "print" für die Druckvorschau bzw. den Ausdruck.

In die "screen.css" kommt der normale Stylesheet für eure Webseite. Dabei müsst ihr auch auf nichts Besonderes achten.

In die "print.css" packt ihr dann erstmal den gleichen Inhalt, der auch in eurer "screen.css" steht.

Nun geht es darum, die "print.css" auf das Wichtigste zu reduzieren. Das heißt, dass ihr alle Elemente die störend für den Ausdruck sind auf "display:none;" setzt. Der Hintergrund sollte hier immer weiß sein, also setzt ihn auf "background: #ffffff;". Die Schrift darauf sollte gut leserlich sein. Ihr müsst nich unbedingt schwarz nehmen, aber es sollte auch nicht zu hell sein. Bilder sind, sofern sie nicht zu einem Tutorial oder Ähnlichem gehören, auch nicht nötig, also blendet sie ebenfalls aus.

Wenn ihr keinen extra Stylesheet für eure Druckvorschau wollt gebt im Header eurer Webseite einfach nur Folgendes an:

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

Für den Ausdruck wird dann garkein Stylesheet verwendet. Mag zwar teilweise ein wenig durcheinander sein, wenn ihr viele verschachtelte Layer und viele Bilder habt, aber die Schrift sollte dann gut leserlich sein.

Ich hoffe, dass es euch was nützt. ;)