Sélectionner les parties imprimables d’une page web avec CSS

Vidéo pas à pas

Comment imprimer une page web

Nous avons parfois besoin d’imprimer le contenu d’une page web pour l’avoir sur papier. Les navigateurs (Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari et Opera) incluent une fonction à cet effet qui facilite cette tâche. Nous pouvons appeler cette fonction depuis le navigateur lui-même, mais aussi depuis Elementor ; nous allons donc voir avant tout comment imprimer une page web.

Le raccourci clavier pour imprimer la page active dans n’importe lequel des navigateurs précédents est CTRL+P (Windows) et Commande+P (Mac).

Comment imprimer une page web avec Google Chrome ?

Google Chrome est de loin le navigateur internet le plus populaire, avec une part de 70 % d’utilisateurs qui préfèrent l’utiliser. Pour imprimer la page active, suivez ces étapes.

1. Ouvrez la page que vous souhaitez imprimer.
2. Cliquez sur le menu de personnalisation de Google Chrome et, dans le menu contextuel, cliquez sur Imprimer…
3. La fenêtre de configuration de l’impression s’ouvrira ; il ne vous restera plus qu’à cliquer sur le bouton Imprimer.

Comment imprimer une page web avec Edge ?

Microsoft Edge est le successeur de Microsoft Internet Explorer qui fut en son temps le plus utilisé, principalement parce qu’il était intégré au système d’exploitation Windows. Microsoft Edge reste le navigateur par défaut sur les ordinateurs fonctionnant sous Windows 10 et versions ultérieures, et il est actuellement le deuxième navigateur le plus utilisé avec une part de 8 %.

Microsoft Edge présente un avantage de performance significatif par rapport à Google Chrome en ce qui concerne l’utilisation de la mémoire. En résumé, Edge utilise moins de ressources. Chrome était autrefois connu pour le peu de RAM qu’il utilisait, mais ces derniers temps, cette consommation a considérablement augmenté.

Tout comme Google Chrome, il inclut une fonction pour imprimer une page web de manière extrêmement simple ; voyons comment faire.

1. Ouvrez la page que vous souhaitez imprimer.
2. Cliquez sur le menu Paramètres et plus d’Edge … et, dans le menu contextuel, cliquez sur Imprimer.
3. La fenêtre de configuration de l’impression s’ouvrira ; il ne vous restera plus qu’à cliquer sur le bouton Imprimer.

Comment imprimer une page web avec Firefox ?

Mozilla Firefox est un navigateur robuste qui se distingue des autres par sa sécurité et sa rapidité. C’est mon navigateur préféré car j’apprécie davantage ses outils pour développeurs web que ceux de Chrome ou Edge. Voici comment nous pouvons imprimer une page web.

1. Ouvrez la page que vous souhaitez imprimer.
2. Cliquez sur le menu de l’application et, dans le menu contextuel, cliquez sur Imprimer…
3. La fenêtre de configuration de l’impression s’ouvrira ; il ne vous restera plus qu’à cliquer sur le bouton Imprimer.

Ajouter un bouton pour imprimer la page active

Nous pouvons ajouter un bouton pour imprimer la page active, par exemple dans le modèle Article unique ou sur n’importe quelle page, afin que l’utilisateur puisse appeler la fonction d’impression du navigateur en appuyant sur ce bouton. Voyons comment faire.

1. Dans le constructeur Elementor, cliquez sur , recherchez le widget Boutons de partage et faites-le glisser vers la partie du document où vous souhaitez l’insérer.
2. Dans l’onglet Contenu, cliquez sur le bouton + Ajouter un élément et, dans Réseau, sélectionnez Print.
3. Vous pouvez maintenant personnaliser le texte et les styles du bouton à votre guise.

Créer une classe CSS pour masquer les parties que nous ne voulons pas imprimer

Les styles de la page pour l’impression ne doivent pas nécessairement être les mêmes que ceux utilisés pour la visualisation sur écran (ordinateur, tablette ou téléphone mobile). Il se peut qu’au moment de l’imprimer, nous souhaitions masquer certaines parties (en-tête, pied de page, barre latérale, …), modifier les marges, les couleurs, les typographies, etc. Nous pouvons faire tout cela en incluant la règle @media print dans nos styles CSS personnalisés.

Nous pouvons modifier de nombreux styles, mais nous n’allons pas nous étendre et nous allons simplement voir comment masquer les parties de notre page ou modèle que nous ne voulons pas imprimer. Voici un exemple :

@media print {
     header {display: none !important;}
     footer {display: none !important;}
     .noimprimir {display: none !important;}
     body {background: #fff !important;}     
}

Dans l’exemple ci-dessus, nous voyons comment nous avons créé, à l’intérieur de la règle @media print, une série de classes CSS qui ne seront utilisées que lors de l’impression du document et n’affecteront donc pas la manière dont nous le visualisons à l’écran. Voyons comment ajouter ce code à notre CSS personnalisé dans les Réglages du site :

1. Lancez le constructeur Elementor en accédant à n’importe quelle page ou modèle.
2. Cliquez sur le menu « Hamburger » dans le coin supérieur gauche.
3. Cliquez sur Réglages du site.
4. Dans le panneau d’options, cliquez sur CSS personnalisé.
5. Dans le champ Ajoutez ici votre propre CSS personnalisé, insérez le code dont vous avez besoin.

Essentiellement, nous avons masqué pour l’impression tout ce qui se trouve à l’intérieur du header et du footer. De plus, nous avons inclus une classe .noimprimir pour pouvoir l’assigner aux éléments que nous ne souhaitons pas imprimer, comme par exemple le bouton d’impression lui-même, les commentaires, etc. Enfin, j’ai inclus une classe body pour configurer le fond blanc ; cela n’est nécessaire que si nous avons configuré le fond avec une couleur.

La règle !important est utilisée pour donner plus d’importance à une propriété/valeur que la normale. En fait, si vous utilisez la règle !important, vous annulerez TOUTES les règles de style précédentes pour cette propriété spécifique sur cet élément.

Nous devons tenir compte du fait que pour que les classes header et footer fonctionnent, nous devons avoir assigné ces balises HTML aux modèles d’En-tête et de Pied de page. Voyons comment faire :

Liens d’intérêt

• CSS Media Queries | W3 Schools