Pourquoi mes pages web n'impriment-elles pas ce que je vois dans mon navigateur ?
La raison pour laquelle certaines de vos pages web s'impriment différemment est qu'elles ont une feuille de style d'impression.
Qu'est-ce qu'une feuille de style d'impression ?
Une feuille de style d'impression permet de formater une page web de manière à ce qu'elle s'imprime automatiquement dans un format convivial. Les feuilles de style pour l'impression existent depuis plusieurs années et ont fait l'objet de nombreux écrits. Pourtant, si peu de sites web les mettent en œuvre, ce qui signifie que nous nous retrouvons avec des pages web qui ne s'impriment pas correctement sur le papier, ce qui est frustrant.
Il est remarquable que si peu de sites web utilisent les feuilles de style pour l'impression comme :
- Les feuilles de style pour l'impression améliorent énormément la convivialité, en particulier pour les pages ayant beaucoup de contenu (comme celle-ci !)
- Elles sont incroyablement rapides et faciles à mettre en place
Certains sites web proposent un lien vers une version imprimable de la page, mais cela doit bien sûr être mis en place et maintenu. Il faut également que les utilisateurs remarquent ce lien à l'écran, puis l'utilisent avant d'imprimer régulièrement les pages (par exemple en sélectionnant le bouton d'impression en haut de l'écran). Les versions imprimables sont toutefois utiles lorsqu'il s'agit d'imprimer plusieurs pages web en même temps, par exemple un article qui s'étend sur plusieurs pages web.
Source Désactiver les feuilles de style d'impression (CSS) lors de l'impression d'un site web
Comment désactiver une feuille de style d'impression ?
J'ai récemment eu besoin d'obtenir un instantané d'un site web exactement tel qu'il s'affiche à l'écran. C'est-à-dire que je voulais la couleur de fond, je voulais les publicités, je voulais la mise en page complète.
Une option consiste à prendre des captures d'écran séquentielles en faisant défiler la page, puis à les reconstituer dans Photoshop. Cela prend du temps et vous laisse avec une image à basse résolution (72dpi).
Une autre façon de procéder est d'imprimer la page, puis de l’“enregistrer” en PDF au lieu de l'imprimer. Cela fonctionne assez bien pour les pages qui ne définissent pas une mise en page différente pour l'impression d'une page par rapport à la visualisation de la page.
Malheureusement pour moi, il est devenu de plus en plus populaire d'inclure une feuille de style “d'impression” sur un site web, qui définit de nouveaux styles de page lorsqu'un utilisateur essaie d'imprimer le site. Elle est définie dans l'en-tête et ressemble à ceci :
Je n'ai trouvé qu'une seule option qui réponde vraiment à mes besoins : L'extension “Web Developer” add-on / extension développée par Chris Pederick.
Avec ce plugin, vous pouvez très facilement désactiver TOUS les styles, les styles par défaut, les styles en ligne, les styles intégrés et, vous l'avez deviné, les styles d'impression !
Il est actuellement disponible pour Firefox et Chrome. J'espère vraiment qu'une extension Safari viendra un jour, car j'utilise principalement Safari. La seule option que j'ai trouvée pour Safari est de désactiver TOUS les styles - une fonction qui est fournie par défaut avec la dernière version (5.0.3) du navigateur. Cette fonction est utile pendant le développement pour voir comment votre site sera affiché sur un navigateur en mode texte uniquement, mais sans la possibilité de sélectionner les styles que vous désactivez, elle a une utilité limitée.
Voici un exemple de désactivation des styles d'impression avec l'extension ci-dessus dans Firefox :
Source Feuille de style d'impression - le guide définitif