CSS @media print peut-il être utilisé pour imprimer des éléments personnalisés ?

Impression d'éléments personnalisés avec CSS

Face à la nécessité de créer une version imprimable d'une page riche en contenu, CSS fournit un mécanisme puissant grâce à la règle d'impression @media. Cependant, la solution fournie soulève des questions sur sa faisabilité et sa compatibilité avec les navigateurs.

Prise en charge du navigateur pour @media print

La règle d'impression @media est prise en charge par tous les principaux navigateurs modernes. , notamment Chrome, Firefox, Safari et Edge. Cela garantit que les styles d'impression peuvent être appliqués de manière cohérente sur différentes plates-formes.

Masquer et révéler des éléments avec CSS

Pour afficher de manière sélective des éléments pendant l'impression, vous pouvez utiliser CSS pour masquer tout sauf ceux marqués d'une classe spécifique. L'extrait CSS suivant y parvient :

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

Dans cette approche, tous les éléments avec la classe "printable" et leurs enfants seront visibles lors de l'impression, tandis que tout le reste sera masqué.

Sélecteur négatif et compatibilité du navigateur

Bien que l'utilisation du sélecteur « non » pour exclure des éléments semble logique, elle peut ne pas fonctionner comme prévu dans certains navigateurs. Pour résoudre ce problème, une approche complémentaire peut être utilisée :

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

Cette règle CSS masque tous les éléments du corps, à l'exception des descendants des éléments de classe "printable".

Affichage des éléments dans le navigateur et l'imprimante

Pour afficher certains éléments dans le navigateur mais les masquer à l'impression, vous pouvez utiliser le CSS suivant technique :

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

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

Cette approche permet d'inclure des éléments (par exemple, des liens ou des logos) qui ne sont pertinents que pour le navigateur ou la sortie d'impression, respectivement.

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!