Leider eigenen sich viele Seiten nicht sonderlich zum Druck: zu viele Grafiken, zahlreiche Navigations–Elemente und zu kleine oder farbige Schrift. Mit Hilfe von Cascading Style Sheets kommt man dem Besucher entgegen.

Eine der Stärken von CSS ist es, verschiedene Darstellungen für verschiedene Ausgabemedien bereitstellen zu können, ohne das jeweils spezielle Seiten angelegt werden müssen. Seiten für den Ausdruck zu optimieren, das klappt am besten mit den teuren Content Management Systemen: diese trennen den Inhalt von der Struktur und Form. Dank CSS gibt es auch eine Lösung für den kleinen Geldbeutel, die mit allen aktuellen Browsern funktioniert.

Was geht?

Für die Druckausgabe legen Sie ein zweites externes Style Sheet an. Diese Datei könnte beispielsweise druck.css heißen und wird im HTML–Head aufgerufen:

17. <link rel="alternate stylesheet"
19. media="print"
20. title="Druckansicht"
21. href="/css/druck.css">

Diese Datei enthält folgende Zeile:

1. #navigation {
2. display: none;
3. }

Das genügt noch nicht ganz, denn jetzt müssen innerhalb der HTML-Seite die Bereiche markiert werden, die zwar auf dem Monitor angezeigt werden sollen, aber nicht für den Ausdruck bestimmt sind:

91. <div id="navigation">
92. Hier die Navigation, die im Ausdruck natürlich keinen Sinn macht
93. </div>

Das war's auch schon – was in das <div>–Tag mit der id="navigation" eingeschlossen ist, wird nicht mit ausgedruckt. Auf diese Weise lassen sich riesige Logos, Menüleisten und andere weniger wichtige Dinge unterdrücken. Der Ausdruck wird übersichtlicher und wirkt aufgeräumter.

Sie können innerhalb des Style Sheets natürlich auch anderen Schriften, Größen oder Farben speziell für den Ausdruck festlegen. Dann offenbart sich die ganze Eleganz dieses Ansatzes. Das Style Sheet für die Monitordarstellung dieser Site bestimmt die Positionierung, das Aussehen und das Verhalten aller Elemente einer Seite, von der Navigation bis zu den Fußnoten. Ein weiteres Style Sheet kümmert sich um die Druckdarstellung und ersetzt beim Klick auf den Link »Druckansicht« einfach das Monitor-CSS, die HTML–Seite bleibt nach wie vor die gleiche.

In dieser Formatvorlage sind nun alle Elemente für die Druckausgabe optimiert:

• Serifenschrift statt serifenlosen Typen bringt im Allgemeinen eine bessere Lesbarkeit auf Papier.
• Abmessungen und Positionen werden in Zentimetern und typografischen Punkten statt Pixel definiert. Sogar an die Möglichkeit, die gedruckten Seiten abzuheften, wurde gedacht: body { margin-left: 2.5cm;} bestimmt den Rand zum Lochen.
• Die Farben sind schwarz auf weiss, da die Farbinformationen nun nicht mehr zur Gliederung und Strukturierung zwischen Navigation und Inhalt gebraucht werden.
• Überschriften werden mit den dazugehörigen Inhalten auch bei Seitenumbrüchen zusammengehalten.

Offen für alle die kommen

Von hier aus ist es dann nur noch ein kleiner Schritt, die Inhalte für alle nur denkbaren Ausgabeformen optimiert anzubieten: separate Style Sheets für PDAs und Smartphones, Sprachausgaben, … Die Liste ist beliebig fortführbar, da mittlerweile immer mehr Zugriffe auf das Web eben nicht mehr mit den klassischen Desktop–PCs geschehen. Als zusätzliche Hilfe für Benutzergruppen mit bestimmten Bedürfnissen haben Sie Ihre Seiten auch gleichzeitig zugänglicher gestaltet.