Comment pouvez-vous optimiser les pages pour…

Pour optimiser les pages pour l'impression, j'utilise @media print en CSS. J'y cache les éléments inutiles lors de l'impression (navigation, pieds de page, panneaux latéraux), modifie les styles pour améliorer la lisibilité (taille de police, espacements), supprime les images de fond et les ombres. J'ajoute également des sauts de page avec break-before, break-after et contrôle l'orientation avec @page. Je peux utiliser des classes spéciales, comme .no-print, pour masquer rapidement des éléments.

Voici quelques exemples :

/* Cacher les éléments non nécessaires à l'impression */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Améliorer l'apparence pour une meilleure lisibilité */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Texte noir pour un meilleur contraste */
  }
  a {
    color: #000; /* Supprimer la couleur bleue des liens */
    text-decoration: none;
  }
  /* Ajouter l'URL des liens après le texte */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Cacher les images de fond */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Contrôler les sauts de page */
@media print {
  h2 {
    break-before: page; /* Commencer une nouvelle page avant chaque h2 */
  }
}

/* Définir l'orientation de la page */
@page {
  size: A4 portrait; /* Ou paysage */
  margin: 1cm; /* Définir les marges */
}

Pour une personnalisation plus avancée ou l'ajout d'informations (numéros de page, en-têtes et pieds de page), on peut utiliser la directive @page. De plus, certains styles spécifiques (comme position: fixed) peuvent se comporter de manière imprévisible lors de l'impression et nécessiter des règles séparées pour @media print.

Il est important de tester le rendu dans différents navigateurs.

Comment pouvez-vous optimiser les pages pour l'impression?