Comment afficher ou cacher un élément HTML à l'impression ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-07-07 18:16:16

Question

Comment puis-je faire pour que certains éléments de ma page HTML se cachent lors de l'impression, et que d'autre à l’inverse s'affichent uniquement quand on imprime ?

Réponse

Pour afficher ou cacher un élément HTML à l'impression, vous devez utiliser la règle CSS @media et la propriété display.

Le paramètre print de la règle CSS @media définit des propriétés CSS qui ne s'applique que lors de l'impression.

Les valeurs none ou block de la propriété display, respectivement affichent ou n'affichent pas le contenu HTML.

Voici un exemple pour afficher ou cacher un élément HTML lors de l'impression :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment afficher ou cacher un élément HTML à l'impression ?</title>
<style>
.defaut_invisible{display:none}
@media print 
{
.impression_invisible{display:none}
.impression_visible{display:block}
}
</style>
</head>
<body>
<p class="impression_invisible">Un texte visible par défaut, et invisible à l'impression</p>
<p class="defaut_invisible impression_visible">Un texte visible uniquement à l'impression</p>
</body>
</html>