Comment puis-je utiliser CSS pour contrôler quels éléments sont affichés lors de l'impression d'une page Web ?

Affichage du contenu sélectif lors de l'impression avec CSS

De nombreuses pages Web contiennent des données, des mises en page et du contenu étendus. Pour optimiser l'impression, vous souhaiterez peut-être afficher uniquement des éléments spécifiques. Bien que la création d'une page séparée pour l'impression puisse être une solution, CSS offre une alternative puissante avec sa fonctionnalité "@media print".

Prise en charge du navigateur pour "@media print"

La fonctionnalité « @media print » est largement prise en charge par les navigateurs modernes. Il vous permet d'appliquer des règles CSS spécifiquement lors de l'impression de la page. Les navigateurs prenant en charge "@media print" incluent :

• Chrome
• Firefox
• Safari
• Edge

Ciblage des éléments pour l'impression

Pour masquer tous les éléments sauf ceux que vous souhaitez imprimer, vous pouvez utiliser la propriété "display:none". Ensuite, ajoutez une classe "printable" aux éléments que vous souhaitez afficher lors de l'impression et appliquez "display:block" à ces éléments dans le bloc "@media print".

CSS :

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

Cependant, si vous souhaitez afficher les éléments uniquement lors de l'impression et les masquer dans le navigateur, pensez à utiliser une approche inverse :

CSS :

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

Cette technique masquerait tout sauf les éléments avec la classe "imprimable" lors de l'impression.

Considérations supplémentaires

• Pour éviter d'afficher le contenu lié lors de l'impression lors de l'impression, ajoutez la classe "noPrint" aux éléments ou liens appropriés.
• Pour afficher des logos, du papier à en-tête ou d'autres éléments qui ne doivent apparaître que lors de l'impression, créez des sections avec la classe "onlyPrint".

CSS :

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

HTML :

<div class="noPrint">

En suivant ces méthodes, vous pouvez facilement contrôler la visibilité d'éléments spécifiques lors de l'impression de pages Web, réduisant ainsi l'encombrement et optimisant l'efficacité 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!