Πώς να βελτιστοποιήσετε τις ιστοσελίδες για εκτύπωση…

Για τη βελτιστοποίηση των σελίδων για εκτύπωση, χρησιμοποιούνται ερωτήματα μέσων CSS με τύπο print.

Απόκρυψη περιττών στοιχείων: Απόκρυψη στοιχείων που δεν πρέπει να εμφανίζονται στην εκτύπωση (πλοήγηση, υποσέλιδα, μπλοκ διαφημίσεων, κουμπιά).
```
/* Απόκρυψη στην εκτύπωση */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Εμφάνιση κρυφού περιεχομένου: Αν υπάρχει περιεχόμενο που είναι κρυφό στην οθόνη αλλά χρειάζεται για την εκτύπωση (π.χ. πλήρεις URL συνδέσμων), μπορεί να εμφανιστεί.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Προσθέτει το URL μετά το σύνδεσμο */
  }
}
```

Επαναφορά στυλ: Επαναφορά ειδικών στυλ για την οθόνη: εικόνες φόντου/χρώματα, σκιές, περιθώρια, μεγέθη γραμματοσειρών.

@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; /* Αποτρέπει απομονωμένες γραμμές σε παράγραφους */
  }
}

Έλεγχος διακοπών σελίδας: Χρήση των ιδιοτήτων page-break-before, page-break-after, page-break-inside για έλεγχο διακοπών σελίδας.

@media print {
  article h2 {
    page-break-before: always; /* Ξεκινά νέο τμήμα σε νέα σελίδα */
  }
  ul, ol {
    page-break-inside: avoid; /* Αποτρέπει διακοπές μέσα σε λίστες */
  }
}

Βελτιστοποίηση εικόνων και πινάκων: Μείωση μεγέθους εικόνων, διασφάλιση σωστής εμφάνισης πινάκων.

@media print {
  img {
    max-width: 100% !important; /* Διασφαλίζει ότι η εικόνα δεν θα ξεπεράσει το πλάτος της σελίδας */
  }
  table {
    width: 100% !important; /* Πίνακας σε όλο το πλάτος της σελίδας */
    border-collapse: collapse; /* Αφαιρεί τα κενά μεταξύ κελιών */
  }
  th, td {
     border: 1px solid #ccc; /* Προσθέτει περιγράμματα στα κελιά */
  }
}

Ειδικά στυλ για εκτύπωση: Μπορεί να δημιουργηθεί ξεχωριστό αρχείο CSS για εκτύπωση και να συνδεθεί με ερώτημα μέσων.
```
<link rel="stylesheet" href="styles.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
```
Δοκιμή: Είναι σημαντικό να δοκιμάσετε το αποτέλεσμα χρησιμοποιώντας τη λειτουργία "Προεπισκόπηση εκτύπωσης" στον browser.

Πώς να βελτιστοποιήσετε τις ιστοσελίδες για εκτύπωση;