როგორ დავტვირთოთ ვებგვერდები ბეჭდვისთვის?

ბეჭდვისთვის გვერდების ოპტიმიზაციისთვის გამოიყენება CSS მედია კითხვები print ტიპით.

1. არასაჭირო ელემენტების დამალვა: დამალულია ელემენტები, რომლებიც არ უნდა გამოჩნდეს ბეჭდვისას (ნავიგაცია, ფუტერი, რეკლამა, ღილაკები).

   /* დამალვა ბეჭდვის დროს */
   @media print {
     nav, footer, aside, .ad-block, button {
       display: none;
     }
   }
   

2. დამალული შინაარსის ჩვენება: თუ შინაარსი დამალულია ეკრანზე, მაგრამ ბეჭდვისთვის საჭიროა (მაგალითად, ლინკების სრული URL), მას შეიძლება გამოაჩენთ.

   @media print {
     a[href]:after {
       content: " (" attr(href) ")"; /* URL-ის დამატება ლინკის შემდეგ */
     }
   }
   

3. სტილების განულება: ეკრანისთვის სპეციფიკური სტილების განულება: ფონური სურათები/ფერები, ჩრდილები, დაშორებები, ფონტის ზომები.

   @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; /* ერთგვარი ხაზი აბზაცის დასაწყისში/სასრულში */
     }
   }
   

4. გვერდის გაწყვეტის მართვა: page-break-before, page-break-after, page-break-inside თვისებების გამოყენება გვერდის გაწყვეტის კონტროლისთვის.

   @media print {
     article h2 {
       page-break-before: always; /* ახალი განყოფილების დაწყება ახალი გვერდიდან */
     }
     ul, ol {
       page-break-inside: avoid; /* სიების გაწყვეტის თავიდან აცილება */
     }
   }
   

5. სურათებისა და სქემების ოპტიმიზაცია: სურათების ზომის შემცირება, სქემების სწორად ჩვენება.

   @media print {
     img {
       max-width: 100% !important; /* სურათის ზომის შეზღუდვა გვერდის ფარგლებში */
     }
     table {
       width: 100% !important; /* სქემა მთელ გვერდზე */
       border-collapse: collapse; /* სვეტების შორის დაშორებების წაშლა */
     }
     th, td {
        border: 1px solid #ccc; /* სვეტების საზღვრების დამატება */
     }
   }
   

6. სპეციალური სტილები ბეჭდვისთვის: შეგიძლიათ შექმნათ ცალკე CSS ფაილი ბეჭდვისთვის და მიერთოთ იგი მედია კითხვით.

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

7. ტესტირება: აუცილებელია შედეგის შემოწმება ბრაუზერის "ბეჭდვის წინასწარი ჩვენების" ფუნქციის გამოყენებით.