Une feuille de style CSS impression : le media print

Pourquoi créer une feuille de style CSS impression ?

Rien de plus énervant que de chercher à imprimer une page web et d’imprimer 5 pages au lieu d’une. Bien entendu, sur la première page figurera en bonne place le menu, les liens, la publicité, sans que soit abordé le sujet. Avec de la chance, vous imprimerez aussi trois pages blanches. Cerise sur le gâteau, des problèmes de mise en page vous empêcheront de lire les derniers mots de chaque ligne. Ennuyeux n’est-ce pas ?

Parmi les fonctionnalités offertes par les feuilles de style CSS, il en existe une très intéressante qui vous permet de traiter différemment votre contenu selon les médias.

Vous souhaitez faciliter la vie à vos utilisateurs ? Faites donc référence dans vos pages web à

Le même contenu apparaîtra sous deux formes différentes.

Comment appeler la feuille de style CSS impression ?

Pour que l'imprimante se réfère à la feuille de style CSS spécifiquement dédiée à l'impression, il est nécessaire d'insérer dans l'en-tête de votre page web le lien suivant :

<link rel="stylesheet" href="style_general.css" type="text/css"
 media="screen" />
<link rel="stylesheet" href="style_imprimante.css" type="text/css"
 media="print" />

Bien entendu, il vous reviendra de désigner les feuilles de style CSS (ici style_general.css et style_imprimante.css) par leur nom réel.

Rédiger une feuille de style CSS impression

  1. Sélectionner ce qui dans votre page web doit figurer à l’impression

    L’impression de tous les éléments de la page web n’étant pas forcément opportune, interrogez-vous sur l’utilité à l’impression :

    • de la bannière,
    • du menu de navigation,
    • des boutons,
    • des bordures,
    • des images (d’arrière-plan ou non),
    • du footer,
    • des liens de publicité,

    À ce stade, vous pourrez masquer certains sélecteurs <div> à l’impression en utilisant la propriété CSS {display : none ;}.

    À vous de distinguer entre le contenu pertinent et celui superflu à l’impression.

  2. Adapter votre police au format papier
    • Choisir une police avec empattement (serif),
    • Remplacer vos em ou px par des pt,
    • Préférez l’impression de noir sur fond blanc,
    • Éviter les couleurs.
  3. Adapter la taille des blocs
    • préférer les % au px,
    • répartir ces % en gardant à l’esprit que certains blocs ne s’afficheront plus,
    • changer les marges.
  4. Fixer vos éléments flottants

Il existe bien d’autres possibilités, comme par exemple prévoir les sauts de page, gérer les veuves et les orphelines avec les propriétés CSS page-break-before, page-break-after et page-break-inside. Essayez de faire simple, car toutes ces fonctionnalités ne sont pas, pour le moment, intégralement supportées par tous les navigateurs.

Pour aller plus loin :