Hogyan optimalizáljuk a weboldalakat nyomtatáshoz…

A nyomtatásra optimalizált oldalakhoz CSS médiakérdéseket használnak a print típusúak.

Felesleges elemek elrejtése: Elrejtik azokat az elemeket, amelyek nem jelennek meg nyomtatáskor ( navigáció, láblécek, reklámblokkok, gombok).
```
/* Nyomtatáskor elrejtés */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Rejtett tartalom megjelenítése: Ha van olyan tartalom, ami a képernyőn rejtett, de nyomtatáshoz szükséges (pl. teljes URL-ek a linkekhez), akkor megjeleníthető.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* URL hozzáadása a link után */
  }
}
```

Stílusok visszaállítása: A képernyőhöz kötött stílusok visszaállítása: háttérképek/színek, árnyékok, margók, betűméretek.

@media print {
  body {
    background: none !important; /* Háttérkép/szín eltávolítása */
    color: #000; /* Fekete szöveg jobb olvashatóságért */
  }
  * {
    box-shadow: none !important; /* Árnyékok eltávolítása */
    text-shadow: none !important; /* Szöveg árnyék eltávolítása */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Elszigetelt sorok megelőzése a lap elején/végén */
    widows: 3; /* Elszigetelt sorok megelőzése a bekezdésben */
  }
}

Oldalszakadások kezelése: A page-break-before, page-break-after, page-break-inside tulajdonságok használata az oldalszakadások irányítására.

@media print {
  article h2 {
    page-break-before: always; /* Új szakasz kezdése új oldalon */
  }
  ul, ol {
    page-break-inside: avoid; /* Elkerüli a listák közötti szakadásokat */
  }
}

Képek és táblázatok optimalizálása: A képek méretének csökkentése, a táblázatok helyes megjelenítésének biztosítása.

@media print {
  img {
    max-width: 100% !important; /* Biztosítja, hogy a kép ne lépje túl az oldal szélességét */
  }
  table {
    width: 100% !important; /* Táblázat az oldal teljes szélességében */
    border-collapse: collapse; /* A cellák közötti térköz eltávolítása */
  }
  th, td {
     border: 1px solid #ccc; /* Cellák szegélyezése */
  }
}

Speciális nyomtatási stílusok: Külön CSS fájl készítése nyomtatáshoz, és média kéréshez kötése.

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

Tesztelés: A nyomtatási előnézet funkcióval a böngészőben tesztelni kell az eredményt.

Hogyan optimalizáljuk a weboldalakat nyomtatáshoz?