Cum să optimizezi paginile web pentru imprimare…

Pentru a optimiza paginile pentru imprimare, se utilizează interogări media CSS de tip print.

Ascunde elementele inutile: Elementele care nu trebuie afișate la imprimare (navigație, subsoluri, blocuri publicitare, butoane) sunt ascunse.
```
/* Ascunde la imprimare */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Afișează conținutul ascuns: Dacă există conținut ascuns pe ecran, dar necesar pentru imprimare (de exemplu, URL-uri complete ale linkurilor), acesta poate fi afișat.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Adaugă URL după link */
  }
}
```

Resetează stilurile: Resetează stilurile specifice pentru ecran: imagini de fundal/culoare, umbre, margini, dimensiuni ale fonturilor.

@media print {
  body {
    background: none !important; /* Elimină imaginea/culoarea de fundal */
    color: #000; /* Text negru pentru o mai bună lizibilitate */
  }
  * {
    box-shadow: none !important; /* Elimină umbrele */
    text-shadow: none !important; /* Elimină umbrele textului */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Previne linii orfane la începutul/sfârșitul paginii */
    widows: 3; /* Previne linii orfane în paragrafe */
  }
}

Controlul întreruperilor de pagină: Utilizarea proprietăților page-break-before, page-break-after, page-break-inside pentru controlul întreruperilor de pagină.

@media print {
  article h2 {
    page-break-before: always; /* Începe o nouă secțiune pe o pagină nouă */
  }
  ul, ol {
    page-break-inside: avoid; /* Previne întreruperile în interiorul listelor */
  }
}

Optimizarea imaginilor și tabelelor: Reducerea dimensiunilor imaginilor, asigurarea afișării corecte a tabelelor.

@media print {
  img {
    max-width: 100% !important; /* Asigură că imaginea nu depășește lățimea paginii */
  }
  table {
    width: 100% !important; /* Tabel pe întreaga lățime a paginii */
    border-collapse: collapse; /* Elimină spațiile între celule */
  }
  th, td {
     border: 1px solid #ccc; /* Adaugă borduri celulelor */
  }
}

Stiluri speciale pentru imprimare: Se poate crea un fișier CSS separat pentru imprimare și se poate conecta cu o interogare media.
```
<link rel="stylesheet" href="styles.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
```
Testare: Este esențial să testați rezultatul folosind funcția "Previzualizare imprimare" în browser.

Cum să optimizezi paginile web pentru imprimare?