Kako optimizovati veb stranice za štampu?

Да оптимизујете странице за штампање, користе се 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">
```
Тестирање: Обавезно тестирајте резултат помоћу функције "Преглед штампе" у прегледачу.