Как да оптимизираме уеб страниците за печат?

За оптимизиране на страниците за печат се използват CSS медиазапитвания с тип print.

Скриване на ненужните елементи: Скриват се елементи, които не трябва да се показват при печат (навигация, футъри, рекламни блокове, бутони).
```
/* Скриване при печат */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Показване на скрито съдържание: Ако има съдържание, скрито на екрана, но необходимо за печат (например пълния URL на линковете), може да се покаже.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Добавя URL след линка */
  }
}
```

Нулиране на стиловете: Нулиране на стилове, специфични за екрана: фонови изображения/цветове, сенки, отстояния, размери на шрифтовете.

@media print {
  body {
    background: none !important; /* Премахва фоново изображение/цвят */
    color: #000; /* Черен текст за по-добра четливост */
  }
  * {
    box-shadow: none !important; /* Премахва сенки */
    text-shadow: none !important; /* Премахва сенки на текста */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Предотвратява единични редове в началото/края на страницата */
    widows: 3; /* Предотвратява единични редове в началото/края на абзаца */
  }
}

Управление на разрывите на страниците: Използване на свойствата page-break-before, page-break-after, page-break-inside за контрол на разрывите.

@media print {
  article h2 {
    page-break-before: always; /* Започва нов раздел на нова страница */
  }
  ul, ol {
    page-break-inside: avoid; /* Предотвратява разкъсване на списъка вътре */
  }
}

Оптимизация на изображения и таблици: Намаляване на размерите на изображенията, осигуряване на правилно показване на таблиците.

@media print {
  img {
    max-width: 100% !important; /* Осигурява, че изображението няма да излезе извън страницата */
  }
  table {
    width: 100% !important; /* Таблицата за цялата ширина на страницата */
    border-collapse: collapse; /* Премахва разстоянията между клетките */
  }
  th, td {
     border: 1px solid #ccc; /* Добавя граници към клетките */
  }
}

Специални стилове за печат: Може да създадете отделен CSS файл за печат и да го включите с медиен тип.
```
<link rel="stylesheet" href="styles.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
```
Тестване: Задължително тествайте резултата с помощта на функцията "Предварителен преглед на печат" в браузъра.