Come ottimizzare le pagine web per la stampa…

Per ottimizzare le pagine per la stampa, si utilizzano le query media CSS di tipo print.

Nascondere elementi non necessari: Si nascondono gli elementi che non devono essere visualizzati in stampa (navigazione, piè di pagina, blocchi pubblicitari, pulsanti).
```
/* Nascondi in stampa */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Mostrare contenuto nascosto: Se ci sono contenuti nascosti sullo schermo ma necessari per la stampa (ad esempio, URL completi dei link), possono essere mostrati.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Aggiunge l'URL dopo il link */
  }
}
```

Ripristinare gli stili: Ripristino degli stili specifici per lo schermo: immagini di sfondo/colori, ombre, margini, dimensioni dei caratteri.

@media print {
  body {
    background: none !important; /* Rimuove immagini/colori di sfondo */
    color: #000; /* Testo nero per migliore leggibilità */
  }
  * {
    box-shadow: none !important; /* Rimuove ombre */
    text-shadow: none !important; /* Rimuove ombre del testo */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Previene righe orfane all'inizio/fine della pagina */
    widows: 3; /* Previene righe orfane all'inizio/fine del paragrafo */
  }
}

Controllo delle interruzioni di pagina: Uso delle proprietà page-break-before, page-break-after, page-break-inside per controllare le interruzioni di pagina.

@media print {
  article h2 {
    page-break-before: always; /* Inizia una nuova sezione su una nuova pagina */
  }
  ul, ol {
    page-break-inside: avoid; /* Previene interruzioni all'interno delle liste */
  }
}

Ottimizzazione di immagini e tabelle: Riduzione delle dimensioni delle immagini, assicurando la corretta visualizzazione delle tabelle.

@media print {
  img {
    max-width: 100% !important; /* Garantisce che l'immagine non superi la larghezza della pagina */
  }
  table {
    width: 100% !important; /* Tabella a tutta larghezza della pagina */
    border-collapse: collapse; /* Rimuove gli spazi tra le celle */
  }
  th, td {
     border: 1px solid #ccc; /* Aggiunge bordi alle celle */
  }
}

Stili speciali per la stampa: È possibile creare un file CSS separato per la stampa e collegarlo con una query media.

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

Test: È fondamentale testare il risultato utilizzando la funzione "Anteprima di stampa" nel browser.

Come ottimizzare le pagine web per la stampa?