Comment CSS peut-il améliorer l'efficacité de l'impression en contrôlant le comportement d'impression ?

CSS pour l'impression sélective

L'impression de pages Web volumineuses peut être fastidieuse, nécessitant l'inclusion d'éléments inutiles. CSS apporte une solution grâce à sa fonctionnalité "@media print". Comprendre son fonctionnement peut vous aider à rationaliser votre processus d'impression.

Prise en charge des navigateurs

La plupart des navigateurs modernes prennent en charge « @media print ». Il est largement adopté dans les navigateurs populaires comme Chrome, Firefox, Safari et Edge. Cette fonctionnalité est devenue une norme fiable pour contrôler le comportement d'impression.

Affichage d'éléments spécifiques

Pour afficher de manière sélective des éléments pendant l'impression, vous pouvez utiliser l'une des deux approches suivantes :

1. Approche de liste blanche (affichage : block):

   • Créez une classe CSS (par exemple, "printable").
   • Appliquez "display: none" à tous les éléments de la requête d'impression multimédia, à l'exception de ceux avec la classe "printable".
   • Cela garantira que seuls les éléments avec la classe "printable" restent visibles pendant impression.

2. Approche de liste noire (non) :

   • Appliquer « affichage : aucun » à tous les éléments du média requête d'impression.
   • Utilisez le sélecteur "non" pour exclure les éléments avec la classe "imprimable" de "affichage : aucun" règle.
   • Bien que cette approche semble logique, elle peut ne pas fonctionner dans tous les navigateurs en raison des limitations de la prise en charge CSS.

Exemple de code

Utiliser la liste blanche approche :

@media print {
    * {display:none;}
    .printable, .printable > * {display:block;}
}

Masquer des éléments lors de la navigation

Pour masquer des éléments spécifiques lors de la navigation mais les afficher lors de l'impression, vous pouvez utiliser le code suivant :

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

Ce code masquera les éléments avec la classe "noPrint" lors de la navigation et affichera les éléments avec la classe "onlyPrint" lors de l'impression.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!