Comment contrôler la visibilité du contenu pour l'impression en CSS ?

CSS spécifique à l'impression : affichage du contenu sélectionné

Dans le développement Web, vous pouvez rencontrer des scénarios dans lesquels vous devez contrôler la visibilité d'un contenu spécifique selon que l'utilisateur est imprimer une page. CSS fournit une solution à ce problème grâce à sa fonctionnalité « @media print ».

Prise en charge des navigateurs

La plupart des principaux navigateurs prennent en charge « @media print », garantissant ainsi que vos styles d'impression fonctionnera sur les appareils modernes.

Masquer les éléments non imprimables

Pour afficher uniquement les éléments sélectionnés lors de l'impression, nous pouvons l'aborder de deux manières :

Méthode de marquage direct :

1. Ajoutez une classe "imprimable" aux éléments souhaités à imprimer.
2. Utilisez "@media print" pour masquer tous les éléments sauf ceux avec le "printable" class :

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

Méthode de sélection négative :

1. Au lieu de marquer les éléments imprimables, nous pouvons masquer tous les éléments non imprimables :

@media print {
  body *:not(.printable *) { display: none; }
}

Gestion des liens et Logos

En plus de masquer les éléments non imprimables, vous souhaiterez peut-être également afficher des logos ou des informations en-tête uniquement sur les pages imprimées. Ceci peut être réalisé en utilisant l'approche suivante :

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

<div class="noPrint">
   <a href="links.html">Links</a>
</div>
<div class="onlyPrint">
   <img src="logo.png">
   <img src="letterhead.png">
</div>

Cela masquera les éléments avec la classe "noPrint" en mode impression, tout en affichant les éléments avec la classe "onlyPrint" uniquement sur les pages imprimées.

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!