CSS Printing: A Comprehensive Guide for Beginners

Hallo da, zukünftige CSS-Meister! Heute tauchen wir ein in die faszinierende Welt des CSS Druckens. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich aufgeregt, euch auf diese Reise mitzunehmen. Keine Sorge, wenn ihr noch nie eine Zeile Code geschrieben habt – wir beginnen bei den ganz Basics und arbeiten uns hoch. Also, holt euch eine Tasse Kaffee (oder Tee, wenn das euer Ding ist) und los geht's!

CSS - Printing

CSS Printing - Using A Print Style Sheet

Habt ihr jemals versucht, eine Webseite auszudrucken, nur um festzustellen, dass sie nichts mit dem auf dem Bildschirm Gesehenen zu tun hat? Genau da kommen Druck-Style-Sheets zur Rettung! Sie sind wie magische Sprüche, die eure Webinhalte in druckerfreundliche Formate verwandeln.

Lassen wir mit einem einfachen Beispiel beginnen:

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

In diesem Snippet sagen wir dem Browser, dass er verschiedene Style-Sheets für Bildschirm und Druck verwenden soll. Das media-Attribut ist hier unser geheimer Trumpf. Wenn ihr die Seite auf dem Bildschirm ansieht, verwendet er screen.css. Aber drückt ihr die Drucktaste, und voilà! print.css übernimmt die Kontrolle.

CSS Printing - Using Media Queries and @page At-Rule

Nun, lassen wir unser Spiel auf das nächste Level heben mit Media Queries und der @page-Regel. Das ist wie das dynamische Duo des CSS-Druckens!

@media print {
body {
font-size: 12pt;
color: #000;
background-color: #fff;
}

@page {
margin: 1in;
}
}

Dieser Code sagt: "Hey Browser, wenn du druckst, mach den Text 12pt, schwarz auf weiß und gib mir 1-Zoll-Ränder ringsum." Der @media print-Teil ist unsere Media Query, und @page stellt unsere Seitenauslage ein.

CSS Printing - Print Requests Detection

Wär's nicht cool, wenn deine Webseite erkennen könnte, wenn jemand versucht, sie auszudrucken? Na, das kann sie! Hier ist, wie:

window.addEventListener('beforeprint', function() {
console.log('Drucken...');
});

window.addEventListener('afterprint', function() {
console.log('Druck abgeschlossen');
});

Dieser JavaScript-Snippet ist wie ein kleiner Spion, der uns flüstert, wenn das Drucken beginnt und endet. Super praktisch für letzte Minuten-Anpassungen!

CSS Printing - Using @page at-rule

Die @page-Regel ist wie eine magische Zauberstab für die Kontrolle deiner gedruckten Seiten. Sehen wir uns das in Aktion an:

@page {
size: A4;
margin: 0;
}

@page :first {
margin-top: 2cm;
}

Hier stellen wir alle Seiten auf A4-Größe ohne Ränder ein, aber geben der ersten Seite einen speziellen 2cm oberen Rand. Es ist, als würde man dem Inhalt einen roten Teppich ausrollen!

CSS Printing - Using @media Query

Wir haben @media bereits gesehen, aber lassen uns tiefer einsteigen:

@media print {
.no-print {
display: none;
}

a[href^="http"]:after {
content: " (" attr(href) ")";
}
}

Dieser Snippet verbirgt Elemente mit der Klasse no-print und fügt nach externen Links die URL ein. Es ist, als hätte man einen persönlichen Assistenten, der die Webseite für den Druck aufräumt!

CSS Printing - Use Of afterprint Event

Erinnert ihr euch an unseren kleinen JavaScript-Spion von früher? Lassen wir ihn arbeiten:

window.addEventListener('afterprint', function() {
document.body.style.backgroundColor = 'lightblue';
alert('Ich hoffe, ihr habt eure Ausdrucke genossen!');
});

Dieser Code ändert die Hintergrundfarbe nach dem Drucken und zeigt eine freundliche Nachricht. Es ist, als würde man für die Nutzer eine kleine Dankesnachricht hinterlassen!

CSS Printing - Link To An External Style Sheet

Last but not least, lassen wir nochmal überprüfen, wie man eine externe Druck-Style-Sheet verlinkt:

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

Diese Zeile ist euer Goldener Schlüssel zu druckerfreundlichen Webseiten. Erstellen sie eine Datei namens print.css, fügt eure Druckstile hinzu, und los geht's!

Methode	Beschreibung	Beispiel
Druck-Style-Sheet	Separates CSS-File für Druckmedien	`<link rel="stylesheet" type="text/css" href="print.css" media="print">`
Media Queries	CSS-Regeln, die nur beim Drucken angewendet werden	`@media print { body { font-size: 12pt; } }`
@page At-Rule	Steuert seiten-spezifische Eigenschaften	`@page { margin: 1in; }`
Druckanforderungs-Erkennung	JavaScript zur Erkennung von Druckversuchen	`window.addEventListener('beforeprint', function() { ... });`
afterprint-Ereignis	JavaScript, das nach dem Drucken ausgeführt wird	`window.addEventListener('afterprint', function() { ... });`

Und da habt ihr es, Leute! Ihr habt die ersten Schritte in die Welt des CSS-Druckens gewagt. Denkt daran, Übung macht den Meister, also fürchtet euch nicht, zu experimentieren. Wer weiß? Vielleicht werdet ihr ja der Picasso der Druck-Style-Sheets! Bis zum nächsten Mal, happy coding!

Credits: Image by storyset