Theme-CSS für den Druck vorbereiten

Ja ich weiß, Print-CSS klingt nach etwas schrecklich veraltetem und viele moderne Websites (von dem meisten WordPress-Themes ganz zu schweigen) verzichten heute bewusst oder unbewusst auf ein gesondertes Styling. Tatsächlich gibt es aber einige Vorteile, die ein paar kleine Designoptimierungen für den Druck durchaus rechtfertigen.

Print-CSS?

Fangen wir ganz von vorne an. Wenn wir CSS schreiben, dann beschäftigt uns dieser Tage vor allem die Ausgabe auf Displays. CSS versteht sich jedoch auf verschiedenen sogernannte Media Types. Neben dem bereits erwähnten screen für Displays auch noch projection, speech, braille und eben print für den Druck. Wenn wir CSS für den Druck bereitstellen wollen, gibt es grundsätzlich zwei Möglichkeiten, dies zu tun:

Das Auslagern in eine gesonderte CSS-Datei ist vor allem bei komplexeren Print-Designs ein guter Weg. Die verschiedenen Styles können sauber getrennt werden und es wird einfacher, den Überblick zu bewahren. Eine externe CSS-Datei lässt sich einfach in HTML aufrufen:

<link rel="stylesheet" href="css/print.css" media="print">Code-Sprache: HTML, XML (xml)

Wenn wir eine externe Print-Datei in einem WordPress-Theme einsetzen möchten, müssen wir die folgende Funktion in der functions.php unseres Child-Themes platzieren und eine entsprechende CSS-Datei anlegen.

function kp_styles() {
	wp_enqueue_style( 'print', get_theme_file_uri() . '/print.css', '', '1612131441', 'print' );
}
add_action( 'wp_enqueue_scripts', 'kp_styles' );Code-Sprache: PHP (php)

wp_enqueue_style(); übergeben wir dabei ganz zum Schluss einen Parameter, der dem Browser mitteilt, dass es sich hier um einen Print-Stylesheet handelt. Siehe auch developer.wordpress.org

Wenn unsere Anpassungen aber nur klein sind, oder wir kein eigenes Child-Theme anlegen möchten, können wir sie auch wunderbar direkt über den neuen CSS-Editor im Theme-Customizer anlegen. Dort genügt es, folgendes einzugeben und allen Code, der die Druck-Version betreffen soll anschließend zwischen den beiden Klammern zu platzieren.

@media print {

}Code-Sprache: CSS (css)

Print-CSS!

Jetzt wo wir den Grundstein für unser CSS gelegt haben, wird es Zeit für einen ersten Versuch: der Probedruck. Wenn wir im Folgenden das Print-CSS auf die Probe stellen, tun wir der Umwelt vermutlich einen Gefallen, wenn wir nicht wirklich jedes Mal drucken. Am Mac nutze ich daher die Möglichkeit, eine Druckvorschau als PDF zu generieren. Auch Windows-User können hier auf die Vorschaufunktion ihres Betriebsystems zurückgreifen.

Welche Elemente der Seite jetzt im Detail zu bearbeiten sind, hängt vom jeweiligen Theme ab. In meinem Fall wurde zum Beispiel der mobile Menü-Knopf auf jeder Seite angezeigt. Dieses Verhalten habe ich mit meinem Print-CSS unterbunden:

.menu-toggle {
	display: none;
}Code-Sprache: CSS (css)

Auch die Antwort-Buttons im Kommentarbereich mit der Klasse .reply, das Kommentarformular mit der Klasse .comment-respond sowie die Buttons zum Wechseln zwischen Artikeln – Klasse .post-navigation habe ich ausgeblendet. Diese interaktiven Seitenelemente ergeben gedruckt keinen Sinn mehr.

.menu-toggle,
.comment-respond,
.comment-reply-link {
	display: none;
}Code-Sprache: CSS (css)

Weil wir auf KrautPress.de sowieso ein recht aufgeräumtes Theme verwenden, gibt es hier erstmal nicht mehr zu tun. Bei anderen Themes kann das ganz anders aussehen. Manchmal werden Menüleisten, Widgetbereiche oder andere Elemente angezeigt, die in einer Druck-Version nur unnötig Platz wegnehmen und keinen Mehrwert bieten.

Im Gegenzug können wir es mit unserem CSS aber noch etwas weiter treiben und die Benutzbarkeit unserer ausgedruckten Website noch etwas verbessern.

So geht eine der Grundfunktionen des Internets beim Drucken verloren: Verlinkungen. Im Web ist es ganz normal, auf einen Link zu klicken um anschließend auf der verknüpften Seite zu landen. Drucken wir eine Seite aus, ist mit etwas „Glück“ an den Unterstreichungen zwar noch erkennbar, wo sich einmal Links befunden haben wohin verlinkt wurde ist aber nicht mehr erkennbar. Tatsächlich können wir auch hier mit CSS Abhilfe schaffen.
Mit dem folgenden Code-Schnipsel wird allen Link-Elementen innerhalb des Content-Bereichs .entry-content (das sollte bei vielen WordPress-Themes einer der Container sein, die den Inhalt eines Beitrag umschließen) das Linkziel angehängt.

.entry-content a:link::after,
.entry-content a:visited::after {
	content: " [" attr(href) "] ";
}Code-Sprache: CSS (css)

Benutzt ihr Print-CSS? Wenn ja: welche Anpassungen haben es euch besonders angetan?