Kā optimizēt tīmekļa lapas drukāšanai?

Lapas lapu drukāšanai optimizēšanai tiek izmantotas CSS mediju vaicājumi ar print tipu.

1. Nepieciešamo elementu slēpšana: Slēpj elementus, kas nedrīkst tikt rādīti drukāšanā (navigācija, kājenes, reklāmas bloki, pogas).

   /* Slēpt drukāšanu */
   @media print {
     nav, footer, aside, .ad-block, button {
       display: none;
     }
   }
   

2. Slēptā satura parādīšana: Ja ir saturs, kas ir slēpts ekrānā, bet nepieciešams drukāšanai (piemēram, pilns URL saite), to var parādīt.

   @media print {
     a[href]:after {
       content: " (" attr(href) ")"; /* Pievieno URL pēc saites */
     }
   }
   

3. Stilu atiestatīšana: Ekrāna specifisko stilu atiestatīšana: fona attēli/krāsas, ēnas, atstarpes, fontu izmēri.

   @media print {
     body {
       background: none !important; /* Noņem fona attēlu/krāsu */
       color: #000; /* Melns teksts labākai lasāmībai */
     }
     * {
       box-shadow: none !important; /* Noņem ēnas */
       text-shadow: none !important; /* Noņem teksta ēnas */
     }
     p, h1, h2, h3, h4, h5, h6 {
       orphans: 3; /* Novērš vientuļas rindas sākumā/beigās */
       widows: 3; /* Novērš vientuļas rindas sākumā/beigās */
     }
   }
   

4. Lapu pārtraukumu pārvaldība: Izmantojot page-break-before, page-break-after, page-break-inside īpašības, kontrolēt lapu pārtraukumus.

   @media print {
     article h2 {
       page-break-before: always; /* Sāk jaunu sadaļu jaunā lapā */
     }
     ul, ol {
       page-break-inside: avoid; /* Novērst saraksta pārtraukumu iekšpusē */
     }
   }
   

5. Attēlu un tabulu optimizācija: Samazināt attēlu izmērus, nodrošināt pareizu tabulu attēlošanu.

   @media print {
     img {
       max-width: 100% !important; /* Nodrošina, ka attēls neiznāk ārpus lapas */
     }
     table {
       width: 100% !important; /* Tabula visā lapas platumā */
       border-collapse: collapse; /* Noņem starpību starp šūnām */
     }
     th, td {
        border: 1px solid #ccc; /* Pievieno robežas šūnām */
     }
   }
   

6. Īpaši stili drukāšanai: Var izveidot atsevišķu CSS failu drukāšanai un pievienot to ar mediju vaicājumu.

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

7. Testēšana: Noteikti pārbaudiet rezultātu, izmantojot "Priekšskatījuma drukāšana" funkciju pārlūkā.