Comment optimiser les pages web pour l'impression…

Pour optimiser les pages pour l'impression, utilisez des requêtes média CSS avec le type print.

Cacher les éléments inutiles : Cacher les éléments qui ne doivent pas apparaître lors de l'impression (navigation, pieds de page, blocs publicitaires, boutons).
```
/* Cacher à l'impression */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Afficher le contenu caché : Si du contenu est caché à l'écran mais nécessaire pour l'impression (par exemple, URL complètes des liens), il peut être affiché.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Ajoute l'URL après le lien */
  }
}
```

Réinitialiser les styles : Réinitialisation des styles spécifiques à l'écran : images de fond/couleurs, ombres, marges, tailles de police.

@media print {
  body {
    background: none !important; /* Supprime l'image/couleur de fond */
    color: #000; /* Texte noir pour une meilleure lisibilité */
  }
  * {
    box-shadow: none !important; /* Supprime les ombres */
    text-shadow: none !important; /* Supprime les ombres du texte */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Empêche les lignes orphelines en début/fin de page */
    widows: 3; /* Empêche les lignes orphelines dans le paragraphe */
  }
}

Contrôle des sauts de page : Utilisation des propriétés page-break-before, page-break-after, page-break-inside pour contrôler les sauts de page.

@media print {
  article h2 {
    page-break-before: always; /* Commence une nouvelle section sur une nouvelle page */
  }
  ul, ol {
    page-break-inside: avoid; /* Empêche les sauts à l'intérieur des listes */
  }
}

Optimisation des images et des tableaux : Réduction de la taille des images, assurer une affichage correct des tableaux.

@media print {
  img {
    max-width: 100% !important; /* Assure que l'image ne dépasse pas la largeur de la page */
  }
  table {
    width: 100% !important; /* Tableau sur toute la largeur de la page */
    border-collapse: collapse; /* Supprime les espaces entre les cellules */
  }
  th, td {
     border: 1px solid #ccc; /* Ajoute des bordures aux cellules */
  }
}

Styles spéciaux pour l'impression : Il est possible de créer un fichier CSS séparé pour l'impression et de le lier avec une requête média.
```
<link rel="stylesheet" href="styles.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
```
Test : Il est essentiel de tester le résultat en utilisant la fonction "Aperçu avant impression" dans le navigateur.

Comment optimiser les pages web pour l'impression?