როგორ შეგიძლიათ ოპტიმიზაცია გვერდებს ბეჭდვისთვის?

ბეჭდვის გვერდების ოპტიმიზაციისთვის ვიყენებ CSS-ში @media print. მასში ვმალავ ბეჭდვისას საჭირო არ მქონე ელემენტებს (ნავიგაცია, ფუტერები, გვერდითი პანელები), ვცვლი სტილებს უკეთესად წასაკითხად (ფონტის ზომა, ინტერვალები), ვაშორებ ფონის სურათებს და ჩრდილებს. ასევე ვამატებ გვერდის გაყოფას break-before, break-after გამოყენებით და განლაგებას @page-ის საშუალებით. შეიძლება გამოვიყენო სპეციალური კლასები, მაგალითად .no-print, სწრაფი დამალვისთვის.

მოდელი მაგალითები:

/* ელემენტების დამალვა, რომლებიც არ არის საჭირო ბეჭდვისას */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* ვიზუალის შეცვლა უკეთესი წასაკითხად */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* შავი ტექსტი უკეთესი კონტრასტისთვის */
  }
  a {
    color: #000; /* ლინკების ლურჯი ფერის გამორთვა */
    text-decoration: none;
  }
  /* URL-ების დამატება ტექსტის შემდეგ */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* ფონის სურათების დამალვა */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* გვერდის გაყოფის მართვა */
@media print {
  h2 {
    break-before: page; /* ახალი გვერდის დაწყება h2-ის წინ */
  }
}

/* გვერდის განლაგების განსაზღვრა */
@page {
  size: A4 portrait; /* ან landscape */
  margin: 1cm; /* მარკერები */
}

მეტი რთული კასტომიზაციის ან ინფორმაციის დამატებისთვის (მაგალითად, გვერდის ნომრები, კოლონიტულები) გამოიყენეთ @page დირექტივა. ასევე უნდა გაითვალისწინოთ, რომ ზოგიერთი სპეციფიკური სტილი (მაგალითად, position: fixed) შეიძლება არასწორად იმოქმედოს ბეჭდვისას და საჭირო გახდეს დამატებითი წესები @media print-ში. მნიშვნელოვანია ტესტირება სხვადასხვა ბრაუზერში ბეჭდვის შედეგის მისაღებად.