Kuidas optimeerida veebilehti trükkimiseks?

Lehe optimeerimiseks trükiks kasutatakse CSS meedia päringuid tüüpi print.

Mittevajalikud elemendid peidetakse: Peidetakse elemendid, mis ei peaks trükimisel nähtavad olema (navigeerimine, jalused, reklaamiblokid, nupud).
```
/* Peitmine trükimisel */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Peidetud sisu kuvamine: Kui on sisu, mis on ekraanil peidetud, kuid trükiks vajalik (näiteks täielik URL linkide jaoks), seda saab kuvada.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Lisa URL lingi järel */
  }
}
```

Stiilide lähtestamine: Ekraani spetsiifiliste stiilide lähtestamine: taustapildid/värvid, varjud, vahed, fondi suurused.

@media print {
  body {
    background: none !important; /* Eemaldab taustapildi/värvi */
    color: #000; /* Must tekst parema loetavuse jaoks */
  }
  * {
    box-shadow: none !important; /* Eemaldab varjud */
    text-shadow: none !important; /* Eemaldab teksti varjud */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Ennetab üksikuid ridu lehekülje alguses/lõpus */
    widows: 3; /* Ennetab üksikuid ridu lõpus */
  }
}

Lehekülgede katkestuste juhtimine: Kasutades omadusi page-break-before, page-break-after, page-break-inside, saab kontrollida lehekülgede katkestusi.

@media print {
  article h2 {
    page-break-before: always; /* Alustab uut jaotist uuel lehel */
  }
  ul, ol {
    page-break-inside: avoid; /* Vältida loendi katkestusi */
  }
}

Piltide ja tabelite optimeerimine: Piltide suuruse vähendamine, tabelite korrektne kuvamine.

@media print {
  img {
    max-width: 100% !important; /* Tagab, et pilt ei ületa lehte */
  }
  table {
    width: 100% !important; /* Tabel kogu lehe laiuses */
    border-collapse: collapse; /* Eemaldab vahed tabeli lahtrite vahel */
  }
  th, td {
     border: 1px solid #ccc; /* Lisa piirid lahtritele */
  }
}

Spetsiaalsed stiilid trükiks: Võite luua eraldi CSS faili trükiks ja ühendada selle meedia päringuga.

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

Testimine: Tuleb kindlasti testida tulemust brauseri "Eelvaade" funktsiooni abil.