Outils CSS

Gratuit Generateur de styles d'impression CSS

Générez une feuille de style d'impression pour masquer la navigation et afficher les URLs.

Chargement de l'outil...

Qu'est-ce que Generateur de styles d'impression CSS ?

Une feuille de style d'impression est du CSS a l'interieur de @media print qui style la page lorsque quelqu'un imprime ou enregistre au format PDF. Elle doit masquer la navigation, les barres laterales et les pieds de page, afficher les URL completes apres les liens, empecher les sauts de page a l'interieur des blocs importants comme les tableaux et le code, et definir des marges raisonnables. C'est particulierement utile pour la documentation, les recettes, les factures et les articles.

Réponse rapide

Generez un bloc @media print qui masque la navigation, affiche les URL des liens, controle les sauts de page et definit des marges d'impression raisonnables. Essentiel pour que les articles, recettes, documentations et factures s'impriment correctement.

Last updated: 2026-06-11

Limites

  • Les regles de saut de page comme page-break-inside: avoid sont des indications pour le moteur d'impression du navigateur, pas des garanties.
  • Les moteurs d'impression des navigateurs rendent le CSS differemment. Chrome, Firefox et Safari produisent chacun des resultats imprimees legerement différents.
  • Les regles de style d'impression ne s'appliquent que lorsque la page est imprimee ou visualisee en aperçu avant impression.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Selectionnez les elements que vous souhaitez masquer lors de l'impression.
  2. Choisissez si vous souhaitez afficher les URL apres les liens.
  3. Definissez les preferences de marge et de taille de page.
  4. Copiez le bloc @media print dans votre feuille de style et testez avec l'aperçu avant impression.

A quoi il sert

  • Preparer une page de recette pour une impression propre sans navigation ni publicites.
  • Faire en sorte que les pages de documentation s'impriment avec les URL completes des liens pour reference.
  • Styliser les factures et listes de controle pour une sortie imprimee professionnelle.

Cas d'usage

Exemples concrets

Exemple

Styles d'impression pour fiche de recette

Un blog de recettes ajoute des styles d'impression pour que les lecteurs puissent imprimer une fiche de recette propre sans l'en-tete, la barre laterale et les commentaires.

Exemple

Documentation avec URL developpees

Un site de documentation imprime avec les URL des liens developpees pour que les lecteurs puissent suivre les references sur papier.

Erreurs frequentes

  • Masquer toutes les images au lieu de seulement les images decoratives.
  • Utiliser display:none sur tout sans tester le resultat imprime.
  • Ne pas definir page-break-inside: avoid sur les tableaux et les blocs de code.

Vérification

  1. Utilisez l'aperçu avant impression dans Chrome, Firefox et Safari pour vérifier que la page s'imprime sans navigation, avec les URL des liens developpees et avec des sauts de page appropries.
  2. Enregistrez la page au format PDF depuis chaque navigateur et comparez la sortie pour la coherence des marges, tailles de police et placement des sauts de page.

FAQ

Questions sur Generateur de styles d'impression CSS

Comment tester les styles d'impression ?

Utilisez l'aperçu avant impression du navigateur (Ctrl+P) ou l'onglet Rendu de DevTools pour emuler le media d'impression.

Les styles d'impression doivent-ils etre dans un fichier separe ?

Vous pouvez utiliser un print.css separe ou integrer @media print dans votre feuille de style principale. Les deux approches fonctionnent.

Quels elements dois-je masquer dans les styles d'impression ?

Masquez les barres de navigation, les menus lateraux, les widgets de pied de page, les sections de commentaires, les boutons de partage, les formulaires d'inscription a la newsletter et tout element interactif sans utilite sur papier.

Comment gerer les sauts de page dans CSS print ?

Utilisez page-break-before, page-break-after et page-break-inside avec les valeurs auto, always ou avoid. Les equivalents modernes sont break-before, break-after et break-inside de la spec CSS Fragmentation.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi