Səhifələri çap üçün necə optimallaşdıra bilərsiniz?

Yazdırmaq üçün səhifələri optimallaşdırmaq üçün CSS-də @media print istifadə edirəm. Bu blokda, çap zamanı lazım olmayan elementləri (naviqasiya, ayaq hissələri, yan panellər) gizləyirəm, oxumağı yaxşılaşdırmaq üçün stilləri dəyişirəm (şrift ölçüsü, aralıqlar), fon şəkillərini və kölgələri silirəm. Həmçinin, break-before, break-after istifadə edərək səhifə bölmələrini əlavə edir və @page ilə istiqaməti idarə edirəm. Tez-tez istifadə olunan elementləri gizlətmək üçün .no-print kimi xüsusi sinflərdən istifadə edə bilərəm.

Budur bəzi nümunələr:

/* Çap üçün lazım olmayan elementləri gizlət */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Oxumağı yaxşılaşdırmaq üçün görünüşü dəyişdir */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Daha yaxşı kontrast üçün qara mətn */
  }
  a {
    color: #000; /* Linklərin mavi rəngini sil */
    text-decoration: none;
  }
  /* Link URL-lərini mətnin ardınca əlavə et */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Fon şəkillərini gizlət */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Səhifə bölmələrini idarə et */
@media print {
  h2 {
    break-before: page; /* Hər h2-dən əvvəl yeni səhifə başlat */
  }
}

/* Səhifənin istiqamətini təyin et */
@page {
  size: A4 portrait; /* və ya landscape */
  margin: 1cm; /* Sərhəd boşluqları */
}

Daha mürəkkəb özelleştirmələr və ya məlumatların (məsələn, səhifə nömrələri, başlıqlar və ayaq hissələri) əlavə edilməsi üçün @page direktivindən istifadə edilə bilər. Həmçinin, bəzi xüsusi stillər (position: fixed) çap zamanı gözlənilməz davranış göstərə bilər və @media print üçün ayrıca qaydalar tələb edə bilər.

Çap nəticəsini müxtəlif brauzerlərdə sınaqdan keçirmək vacibdir.