Veb səhifələrini çap üçün necə optimallaşdırmaq olar…

Yazdırmaq üçün səhifələri optimallaşdırmaq üçün CSS media sorğuları print tipi ilə istifadə olunur.

Lazımsız elementləri gizlət: Nəzarət, ayaq altlığı, reklam blokları, düymələr kimi çap üçün göstərilməməli olan elementlər gizlədilir.
```
/* Çap üçün gizlət */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Gizli məzmunu göstərin: Əgər ekranda gizli olan, lakin çap üçün lazım olan məzmun (məsələn, linklərin tam URL-ləri) varsa, onu göstərə bilərsiniz.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Linkdən sonra URL əlavə edir */
  }
}
```

Stilləri sıfırlayın: Ekrana xas stil: fon şəkilləri/rənglər, kölgələr, kənar boşluqlar, şrift ölçüləri.

@media print {
  body {
    background: none !important; /* Fon şəkli/rəngini silir */
    color: #000; /* Daha yaxşı oxunaqlıq üçün qara mətn */
  }
  * {
    box-shadow: none !important; /* Kölgələri silir */
    text-shadow: none !important; /* Mətn kölgələrini silir */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Səhifənin başlanğıcında/sonunda tək sətirləri qarşısını alır */
    widows: 3; /* Paraqrafın başlanğıcında/sonunda tək sətirləri qarşısını alır */
  }
}

Səhifə kəsimlərini idarə edin: page-break-before, page-break-after, page-break-inside xüsusiyyətlərindən istifadə edərək səhifə kəsimlərini idarə edin.

@media print {
  article h2 {
    page-break-before: always; /* Yeni bölməyə yeni səhifədə başlayır */
  }
  ul, ol {
    page-break-inside: avoid; /* Siyahı daxilində kəsimləri qarşısını alır */
  }
}

Şəkil və cədvəllərin optimallaşdırılması: Şəkillərin ölçüsünü kiçiltmək, cədvəllərin düzgün göstərilməsini təmin etmək.

@media print {
  img {
    max-width: 100% !important; /* Şəkilin səhifədən çıxmamasını təmin edir */
  }
  table {
    width: 100% !important; /* Cədvəl bütün səhifə eni boyunca */
    border-collapse: collapse; /* Hüceyrələr arasında boşluqları aradan qaldırır */
  }
  th, td {
     border: 1px solid #ccc; /* Hüceyrələrə sərhəd əlavə edir */
  }
}

Xüsusi çap stilləri: Çap üçün ayrıca CSS faylı yarada və media sorğusu ilə qoşula bilər.

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

Test: Nəticəni brauzerdə "Çap önizləmə" funksiyası ilə sınaqdan keçirmək vacibdir.

Veb səhifələrini çap üçün necə optimallaşdırmaq olar?