Offrir plusieurs options d'impression CSS ?

En fait, la question se résume à proposer à l'utilisateur le choix entre au moins :

• Ses propres préférences d'impression ;
• L'impression limité à ce que l'on considère comme le contenu utile, c'est à dire sans menus et éléments décoratifs propres à l'écran ;
• L'impression de la page avec tous ses éléments graphiques, mis autant que possible à l'échelle du format papier.

Le premier point est le plus évident : les préférences d'impression de l'utilisateur, définies dans sa propre CSS print, s'imposeront dès lors qu'il désactive le style auteur de la page, ou qu'il utilise systématiquement !important.

Les deux possibilités suivantes devraient pouvoir être gérées simplement par le biais des styles alternatifs, plus habituellement utilisés pour le media screen.

Mise en oeuvre à tester

Créons tout d'abord une simple page-test :

<h1>Test Plusieurs <abbr>CSS</abbr> print</h1>
<p id="style1">Paragraphe imprimé avec le style n°1</p>
<p id="style2">Paragraphe imprimé avec le style n°2</p>

Nous écrivons deux feuilles de style print :

• print1.css n'imprime que le premier paragraphe :

  #style2 {
  display: none;
  }
  

• print2.css n'imprime que le second paragraphe :

  #style1 {
  display: none;
  }
  

Nous lions chaque CSS print à notre document à l'aide d'un link, en les différenciant par leur rel et leur title respectifs (rappel : c'est la combinaison de ces valeurs d'attributs qui rend une feuille de style alternative ou préférée, et non plus permanente) :

• print1.css sera notre style d'impression par défaut :

  <link
      rel="stylesheet"
      type="text/css"
      href="print1.css"
      media="print"
      title="style 1">

• print2.css sera la feuille de style alternative :

  <link
      rel="alternate stylesheet"
      type="text/css"
      href="print2.css"
      media="print"
      title="style 2">

Pour permettre à l'utilisateur de choisir entre style 1 et style 2, nous devons les associer chacun à un style screen (ou all) : seuls ceux-ci sont en effet retenus par les styles switchers natifs des navigateurs actuels (Opera, Mozilla, Firefox, etc.) Créons donc les deux styles correspondants pour l'écran :

• screen1.css (style par défaut), lié au document par :

  <link
      rel="stylesheet"
      type="text/css"
      href="style1.css"
      media="all"
      title="style 1">

• screen2.css, lié au document par :

  <link
      rel="alternate stylesheet"
      type="text/css"
      href="style2.css"
      media="all"
      title="style 2">

screen2.css n'est là que pour permettre aux navigateurs de proposer le lien alternatif vers style 2 : cette feuille peut très bien être vide, voire même tout simplement inexistante. Il suffit qu'elle soit déclarée.

Résultats

Affichons à présent notre page-test dans un navigateur supportant les styles alternatifs, et testons l'aperçu avant impression pour style 1 et style 2 : nous obtenons bien deux impressions différentes de la même page (Testé dans Opera, FireFox et Mozilla Windows).

Il sera facile, sur ce principe, de proposer une impression limitée au contenu utile, et autant de modes d'impression diversement stylés qu'on le voudra...