Wenn Links in Webseiten als ordentlicher Text in a-Tags gesetzt werden, können wir sie zwar am Rechner anklicken, aber wenn Besucher die Seite ausdrucken, ist der Link verloren.
Fachartikel und Kochrezepte habe ich lieber auf altmodischem Papier. Die Wegbeschreibung und Adresse des Hotels drucke ich, auch wenn das Tablett in meiner Handtasche steckt. Etwas CSS für den Drucker sorgt dafür, dass ich unterwegs und in unterversorgter Umgebung eine Seite gut lesen kann. Manchmal ist es auch einfacher, dem Kollegen eine DIN A4-Seite in die Hand zu drücken. Chefs sind sowieso immer für das Schwarz-auf-Weiß.
CSS für den Drucker
Ans Ende der CSS-Datei kommt eine Media Query für den Druck:
@media print {
…
}
Alle anderen CSS-Regeln gehen in die Media Query für den Monitor
@media screen {
…
}
Natürlich könnten auch zwei CSS-Dateien – eine für den Monitor und eine für den Druck mit media=“screen“ und media=“print“ gelinkt werden. Das ist übersichtlicher, aber das Laden einer weiteren Datei verzögert den Aufbau der Seite.
Ohne Drucker-CSS sind es unübersichtliche 7 Seiten. Nachher mit nur 20 Zeilen CSS für den Print bleiben noch 3 kompakte und übersichtliche Seiten.
Drucker-Stylesheets testen
CSS für den Print kommt mit einem Bruchteil des Aufwands hin wie das Stylesheet für responsive Webseiten. Die Tests fallen allerdings aufwändig aus, wenn die Seiten tatsächlich gedruckt werden. Zum Glück bieten die Browser die Vorschau als PDF – so sind es nur zwei Klicks mehr: Drucken / Vorschau als PDF.
Chrome zeigt die Vorschau sofort in aussagekräftiger Größe: noch ein Klick weniger.
Das Drucker-Stylesheet
Der Ausgangspunkt für das Drucker-Stylesheet ist die Browser-Darstellung, bevor das CSS für Handy, Tablett und Monitor zuschlägt. Als erstes werden alle Elemente unterdrückt, die auf dem Papier stören oder keinen Sinn machen: Die Navigationsmenüs, Footer und Slideshows bringen auf dem Papier nur selten Informationen an den Leser.
nav, footer { display: none; }
Formulare und selbst das Feld „Suchen“ werden auf dem Papier nicht gebraucht. Sie fallen ebenfalls unter display:none.
Die großen Bilder der Slideshows kosten Zeit und Tinte. Wenn die gedruckte Seite nicht ganz ohne Bilder auskommen soll, können sie auf dem Papier verkleinert werden.
img { max-width: 12cm; }
Link-Adressen beim Druck sichtbar machen
Mit dem :after-Selektor und CSS content schließt CSS für den Druck die Lücke:
a:after {
content: " (" attr(href) ") ";
color: red; font-size: smaller;
}
Die Regel setzt den Inhalt des href-Attributs in runde Klammern hinter den Text des Links und hebt den so generierten Inhalt durch eine kleinere rote Schrift vom Text ab. Die Url erscheint also in Klammern hinter dem Link-Text.
