CSS Paged Media: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, ambitionierte Web-Entwickler! Heute tauchen wir in die faszinierende Welt der CSS Paged Media ein. Keine Sorge, wenn du noch nie von ihr gehört hast – wir beginnen bei den ganz Basics und arbeiten uns hoch. Bis zum Ende dieses Tutorials wirst du in der Lage sein, beeindruckende Drucklayouts mit CSS zu erstellen. Also, los geht's!

Was ist CSS Paged Media?

CSS Paged Media ist ein Satz von CSS-Funktionen, die es dir ermöglichen, zu kontrollieren, wie dein Webinhalt aussieht, wenn er gedruckt oder in einem gepagten Format (wie einer PDF) angezeigt wird. Es ist so, als würde deine Website eine Überarbeitung für den Drucker erhalten!

Stelle dir vor, du hast eine wunderschöne Website erstellt, aber wenn du sie drucken möchtest, sieht alles schmutzig und durcheinander aus. Genau hier kommt CSS Paged Media zur Rettung! Es hilft dir, Kontrolle über dein Layout zu behalten, auch wenn es nicht auf einem Bildschirm ist.

CSS Paged Media - Verwandte Eigenschaften

Schauen wir uns einige der wichtigsten Eigenschaften an, die CSS Paged Media zaubern lassen:

Eigenschaft	Beschreibung	Beispiel
@page	Definiert die Abmessungen und Ränder einer Seite	@page { size: A4; margin: 2cm; }
size	Setzt die Größe der Seitenbox	size: 8.5in 11in;
marks	Fügt Schnitt- und/oder Kreuzmarken zum Dokument hinzu	marks: crop cross;
bleed	Gibt den Überlaufbereich für gedruckte Inhalte an	bleed: 0.5cm;
page-break-before	Steuert Seitenumbrüche vor einem Element	page-break-before: always;
page-break-after	Steuert Seitenumbrüche nach einem Element	page-break-after: avoid;
page-break-inside	Steuert Seitenumbrüche innerhalb eines Elements	page-break-inside: avoid;

Sehen wir uns einige davon in Aktion an:

@page {
size: A4;
margin: 2cm;
@top-center {
content: "Mein cooler Dokument";
}
@bottom-right {
content: counter(page);
}
}

h1 {
page-break-before: always;
}

table {
page-break-inside: avoid;
}

In diesem Beispiel richten wir eine A4-Seite mit 2cm Rändern ein. Wir fügen eine Kopfzeile in der Mitte jeder Seite und Seitenzahlen in der unteren rechten Ecke hinzu. Wir stellen auch sicher, dass jedes h1 auf einer neuen Seite beginnt und Tabellen nicht über Seiten hinweg geteilt werden.

CSS At-Rules

CSS At-Rules sind Anweisungen, die CSS darüber informieren, wie es sich verhalten soll. Sie beginnen mit einem At-Zeichen (@) gefolgt von einem Bezeichner. Schauen wir uns einige At-Rules an, die spezifisch für Paged Media sind:

At-Rule	Beschreibung	Beispiel
@page	Definiert eine Seitenbox für gepagte Medien	@page :first { margin-top: 10cm; }
@top-left	Definiert Inhalte für die obere linke Ecke der Seite	@top-left { content: "Kapitel 1"; }
@top-center	Definiert Inhalte für die mittlere obere Seite	@top-center { content: "Mein Buch"; }
@top-right	Definiert Inhalte für die obere rechte Ecke der Seite	@top-right { content: date("yyyy-mm-dd"); }
@bottom-left	Definiert Inhalte für die untere linke Ecke der Seite	@bottom-left { content: "Vertraulich"; }
@bottom-center	Definiert Inhalte für die mittlere untere Seite	@bottom-center { content: "Copyright 2023"; }
@bottom-right	Definiert Inhalte für die untere rechte Ecke der Seite	@bottom-right { content: counter(page); }

Hier ist ein Beispiel, wie du diese verwenden könntest:

@page {
@top-center {
content: "Alices Abenteuer im Wunderland";
font-family: "Times New Roman", serif;
font-size: 12pt;
}
@bottom-right {
content: "Seite " counter(page);
}
}

@page :first {
@top-center { content: none; }
@bottom-right { content: none; }
}

In diesem Beispiel fügen wir eine Kopfzeile zu jeder Seite mit dem Buchtitel hinzu und Seitenzahlen in der unteren rechten Ecke. Wir entfernen diese Elemente auch von der ersten Seite für ein sauberes Aussehen der Titelseite.

CSS Pseudo-Klassen

Pseudo-Klassen werden verwendet, um einen besonderen Zustand eines Elements zu definieren. Im Kontext von Paged Media gibt es mehrere nützliche Pseudo-Klassen:

Pseudo-Klasse	Beschreibung	Beispiel
:first	Wählt die erste Seite aus	@page :first { margin-top: 10cm; }
:left	Wählt alle linken Seiten aus	@page :left { margin-left: 4cm; }
:right	Wählt alle rechten Seiten aus	@page :right { margin-right: 4cm; }
:blank	Wählt alle leeren Seiten aus	@page :blank { @top-center { content: none; } }

Sehen wir uns an, wie wir diese verwenden können:

@page :first {
margin-top: 10cm;
@top-center { content: none; }
@bottom-right { content: none; }
}

@page :left {
margin-left: 4cm;
margin-right: 3cm;
@top-left {
content: "Alices Abenteuer im Wunderland";
}
}

@page :right {
margin-left: 3cm;
margin-right: 4cm;
@top-right {
content: "Kapitel " counter(chapter);
}
}

In diesem Beispiel erstellen wir ein anderes Layout für die erste Seite, linke Seiten und rechte Seiten. Die erste Seite hat einen größeren oberen Rand und keine Kopf- oder Fußzeile. Linke Seiten haben den Buchtitel in der oberen linken Ecke, während rechte Seiten die Kapitelnummer in der oberen rechten Ecke haben.

Schlussfolgerung

Und da habt ihr es, Leute! Wir haben die wunderbare Welt der CSS Paged Media bereist. Von der Einstellung der Seitengrößen und Ränder bis hin zur Steuerung von Seitenumbrüchen und dem Hinzufügen von Kopf- und Fußzeilen habt ihr nun die Werkzeuge, um mit CSS beautiful gedruckte Layouts zu erstellen.

Denkt daran, Übung macht den Meister. Versucht, diese Eigenschaften und At-Rules in euren eigenen Projekten auszuprobieren. Ihr könnt überrascht sein, wie viel Kontrolle ihr über eure gedruckten Layouts haben könnt!

Frohes Coden und möge eure Ausdrucke immer scharf und beautiful sein!

Credits: Image by storyset