Button und CSS für Website Druckversion einbinden

Möchte man eine CSS-Datei für eine Website Druckversion einbinden geschieht dies wie bereits beschrieben über das Link-Tag. Das media Attribut bestimmt, für welche Situationen die verlinkte CSS-Datei zur Verfügung stehen soll.


<link rel="stylesheet" type="text/css" href="/css/style.css"
media=”all” />

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


media="all" bedeutet, dass die Styles immer geladen werden sollen. Alle Abweichungen davon, die es beim Druckvorgang geben soll, müssen in der print.css deklariert werden. Diese überschreiben dann die zuvor in der style.css gemachten Befehle.
Es muss natürlich aber nur das überschrieben werden, was auch für die Druckversion angepasst werden soll. Alle anderen Elemente, IDs und Klassen brauchen in der print.css nicht mehr angesprochen werden. Dennoch muss besonders darauf geachtet werden, dass mittels der Druckversion absolute Positionierungen aufgehoben werden sollten. Gleiches gilt für Hintergründe (Bilder und Farben), die zwar standardmäßig von den meisten Browsern nicht gedruckt werden, dennoch sollte man hier auf Nummer sicher gehen.

Dies sind die wichtigsten Aspekte, auf die geachtet werden muss. Alle weiteren Anpassungen für die Druckversion (Querverweis) sind optional, können dem User allerdings zeigen, dass auch auf die gedruckte Version Wert gelegt wurde. So lassen sich beispielsweise spezielle Hinweise nur für die Druckversion einrichten oder Logos, Schriften und vieles mehr für den Ausdruck anpassen. Mehr dazu in einem weiteren Artikel. (Querverweis)

Button oder Link zum Drucken der Seite
Nachdem die CSS-Datei eingebunden ist und beim Drucken Anwendung findet, kann dem User ein zusätzlicher Service angeboten werden. Zwar stellt sich die Frage, warum man einen Button oder Link erstellen soll, wo es doch auch andere Wege gibt den Druckvorgang zu starten, allerdings lassen sich auch Vorteile finden.
Nicht jeder Nutzer kennt beispielsweise den Shortcut STRG + P (Windows) beziehungsweise Cmd + P (Mac) um das Druckmenü schnell aufzurufen. Oder die Druckoption ist durch ihre Position im Menü (Datei > Drucken …) nicht allgegenwärtig genug. In beiden Fällen kann ein dezenter aber prominenter Hinweis dazu führen, dass ein User die angezeigte Seite ausdruckt und sich noch länger mit dem Inhalt beschäftigt.

Es bieten sich zwei Varianten an, diese Druckoption anzubieten. Eine wäre in Form eines Buttons:


<input type="button" onclick="window.print()" value="Diese Seite drucken" />


Eine weitere Variante ist ein Standard-Link, realisiert mit dem Anker-Tag:

Diese Seite drucken

<a href="javascript:window.print()">Diese Seite drucken</a>


Letzteres lässt in der Gestaltung deutlich mehr Spielraum. Ob hier mit einem Text wie im gezeigten Beispiel oder lieber mit einem Druckersymbol gearbeitet wird ist Geschmackssache und jedem selbst überlassen.