Jak zoptymalizować strony internetowe do druku…

Aby zoptymalizować strony do druku, używa się zapytań mediów CSS typu print.

Ukryj niepotrzebne elementy: Ukrywa się elementy, które nie powinny być wyświetlane na wydruku (nawigacja, stopki, bloki reklamowe, przyciski).
```
/* Ukryj na wydruku */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Wyświetl ukryte treści: Jeśli na ekranie jest ukryta treść, ale potrzebna do druku (np. pełne URL linków), można ją wyświetlić.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Dodaje URL po linku */
  }
}
```

Reset stylów: Resetuje style specyficzne dla ekranu: obrazy tła/kolory, cienie, marginesy, rozmiary czcionek.

@media print {
  body {
    background: none !important; /* Usuwa tło obrazu/koloru */
    color: #000; /* Czarny tekst dla lepszej czytelności */
  }
  * {
    box-shadow: none !important; /* Usuwa cienie */
    text-shadow: none !important; /* Usuwa cienie tekstu */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Zapobiega samotnym liniom na początku/końcu strony */
    widows: 3; /* Zapobiega samotnym liniom w akapicie */
  }
}

Kontrola przerw stron: Użycie właściwości page-break-before, page-break-after, page-break-inside do kontroli przerw stron.

@media print {
  article h2 {
    page-break-before: always; /* Rozpoczyna nowy rozdział od nowej strony */
  }
  ul, ol {
    page-break-inside: avoid; /* Zapobiega przerwom wewnątrz list */
  }
}

Optymalizacja obrazów i tabel: Zmniejszenie rozmiarów obrazów, zapewnienie poprawnego wyświetlania tabel.

@media print {
  img {
    max-width: 100% !important; /* Zapewnia, że obraz nie wyjdzie poza stronę */
  }
  table {
    width: 100% !important; /* Tabela na całą szerokość strony */
    border-collapse: collapse; /* Usuwa odstępy między komórkami */
  }
  th, td {
     border: 1px solid #ccc; /* Dodaje obramowania komórek */
  }
}

Specjalne style do druku: Można utworzyć osobny plik CSS do druku i podłączyć go za pomocą zapytania mediów.

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

Testowanie: Konieczne jest przetestowanie efektu za pomocą funkcji "Podgląd wydruku" w przeglądarce.

Jak zoptymalizować strony internetowe do druku?