Wie optimiert man Webseiten für den Druck?

Um Seiten für den Druck zu optimieren, werden CSS-Medienabfragen mit dem Typ print verwendet.

1. Unnötige Elemente ausblenden: Elemente, die beim Drucken nicht angezeigt werden sollen (Navigation, Fußzeilen, Werbeblöcke, Buttons), werden ausgeblendet.

   /* Für den Druck ausblenden */
   @media print {
     nav, footer, aside, .ad-block, button {
       display: none;
     }
   }
   

2. Versteckten Inhalt anzeigen: Wenn es Inhalte gibt, die auf dem Bildschirm versteckt sind, aber für den Druck benötigt werden (z.B. vollständige URLs von Links), können diese angezeigt werden.

   @media print {
     a[href]:after {
       content: " (" attr(href) ")"; /* Fügt die URL nach dem Link hinzu */
     }
   }
   

3. Stile zurücksetzen: Spezifische Bildschirmstile zurücksetzen: Hintergrundbilder/-farben, Schatten, Abstände, Schriftgrößen.

   @media print {
     body {
       background: none !important; /* Entfernt Hintergrundbilder/-farben */
       color: #000; /* Schwarzer Text für bessere Lesbarkeit */
     }
     * {
       box-shadow: none !important; /* Entfernt Schatten */
       text-shadow: none !important; /* Entfernt Textschatten */
     }
     p, h1, h2, h3, h4, h5, h6 {
       orphans: 3; /* Verhindert einsame Zeilen am Anfang/Ende der Seite */
       widows: 3; /* Verhindert einsame Zeilen in Absätzen */
     }
   }
   

4. Seitenumbruchkontrolle: Verwendung der Eigenschaften page-break-before, page-break-after, page-break-inside, um Seitenumbrüche zu steuern.

   @media print {
     article h2 {
       page-break-before: always; /* Beginnt einen neuen Abschnitt auf einer neuen Seite */
     }
     ul, ol {
       page-break-inside: avoid; /* Verhindert Seitenumbrüche innerhalb von Listen */
     }
   }
   

5. Optimierung von Bildern und Tabellen: Verkleinerung der Bildgrößen, Sicherstellung der korrekten Darstellung von Tabellen.

   @media print {
     img {
       max-width: 100% !important; /* Stellt sicher, dass das Bild die Seite nicht überschreitet */
     }
     table {
       width: 100% !important; /* Tabelle über die gesamte Seitenbreite */
       border-collapse: collapse; /* Entfernt Abstände zwischen Zellen */
     }
     th, td {
        border: 1px solid #ccc; /* Fügt Zellenränder hinzu */
     }
   }
   

6. Spezielle Druckstile: Es kann eine separate CSS-Datei für den Druck erstellt und mit einer Medienabfrage verknüpft werden.

   <link rel="stylesheet" href="styles.css" media="screen">
   <link rel="stylesheet" href="print.css" media="print">
   

7. Testen: Es ist wichtig, das Ergebnis mit der Funktion "Druckvorschau" im Browser zu testen.