CSS-Druckstile

Mit CSS-Druckstilen können wir das Erscheinungsbild einer Website optimieren, wenn ein Benutzer sie ausdruckt. Mit der Regel @media print können wir spezielle Stile für den Druck festlegen, z. B. überflüssige Elemente ausblenden oder andere Schriftgrößen einstellen.

Grundlegende Druckstile

Die im @media print-Block festgelegten Regeln gelten nur, wenn das Dokument gedruckt wird. Dies ist besonders nützlich, um z. B. Navigationsmenüs, Werbung oder Footer aus der Druckversion zu entfernen.

In diesem Beispiel werden Navigations- und Fußzeilenelemente beim Drucken ausgeblendet, und der Text erscheint größer und in schwarzer Schrift.

Seitengröße und Umbrüche

Mit CSS-Druckregeln können wir mit der Regel @page Seitengrößen und Ränder festlegen sowie Seitenumbrüche (page-break) hinzufügen, um den Inhalt besser zu strukturieren.

In diesem Beispiel beträgt der Seitenrand 2 cm, und jede neue Kapitelüberschrift beginnt auf einer neuen Seite.

Tipps für Druckstile

Beim Erstellen von Druckstilen ist es wichtig, dass der Inhalt gut lesbar ist und nur die wirklich notwendigen Elemente auf Papier erscheinen.

• Entferne Menüs, Werbung und andere irrelevante Elemente aus der Druckansicht.
• Verwende kontrastreiche Farben und angemessene Schriftgrößen für bessere Lesbarkeit.
• Füge Seitenumbrüche zur logischen Strukturierung des Inhalts hinzu, z. B. vor Kapiteln.