Hoe optimaliseer je webpagina's voor afdrukken…

Om pagina's te optimaliseren voor printen, worden CSS media queries met het type print gebruikt.

Verberg onnodige elementen: Elementen die niet op de print moeten verschijnen (navigatie, voetteksten, advertentieblokken, knoppen) worden verborgen.
```
/* Verberg bij printen */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Toon verborgen inhoud: Als er inhoud is die op het scherm verborgen is maar voor print nodig is (bijvoorbeeld volledige URL's van links), kan deze worden weergegeven.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Voegt de URL toe na de link */
  }
}
```

Stijlen resetten: Reset van stijlen die specifiek voor het scherm zijn: achtergrondafbeeldingen/-kleuren, schaduwen, marges, lettergroottes.

@media print {
  body {
    background: none !important; /* Verwijdert achtergrondafbeeldingen/-kleuren */
    color: #000; /* Zwarte tekst voor betere leesbaarheid */
  }
  * {
    box-shadow: none !important; /* Verwijdert schaduwen */
    text-shadow: none !important; /* Verwijdert tekstschaduwen */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Voorkomt eenzame regels aan het begin/einde van de pagina */
    widows: 3; /* Voorkomt eenzame regels in alinea's */
  }
}

Controle van pagina-einden: Gebruik van de eigenschappen page-break-before, page-break-after, page-break-inside om pagina-einden te controleren.

@media print {
  article h2 {
    page-break-before: always; /* Begint een nieuwe sectie op een nieuwe pagina */
  }
  ul, ol {
    page-break-inside: avoid; /* Voorkomt pagina-einden binnen lijsten */
  }
}

Optimalisatie van afbeeldingen en tabellen: Vermindering van de grootte van afbeeldingen, correcte weergave van tabellen.

@media print {
  img {
    max-width: 100% !important; /* Zorgt dat de afbeelding niet buiten de pagina komt */
  }
  table {
    width: 100% !important; /* Tabel over de volledige breedte van de pagina */
    border-collapse: collapse; /* Verwijdert tussenruimtes tussen cellen */
  }
  th, td {
     border: 1px solid #ccc; /* Voegt randen toe aan cellen */
  }
}

Specifieke stijlen voor printen: Een aparte CSS-bestand voor printen kan worden gemaakt en gekoppeld met een media query.

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

Testen: Het resultaat moet worden getest met de functie "Afdrukvoorbeeld" in de browser.

Hoe optimaliseer je webpagina's voor afdrukken?