Impression CSS - Règle @media

Vous pouvez utiliser CSS pour modifier l'apparence de votre page Web lorsqu'elle est imprimée sur du papier. Vous pouvez spécifier une police pour la version écran et une autre pour la version imprimée.

Vous avez vu la règle @media dans les chapitres précédents. Cette règle vous permet de spécifier un style différent pour différents supports. Ainsi, vous pouvez définir différentes règles pour l'écran et une imprimante.

L'exemple ci-dessous spécifie différentes familles de polices pour l'écran et l'impression. Le CSS suivant utilise la même taille de police pour l'écran et l'imprimante.

<style type = "text/css">
   <!--
      @media screen {
         p.bodyText {font-family:verdana, arial, sans-serif;}
      }

      @media print {
         p.bodyText {font-family:georgia, times, serif;}
      }
      @media screen, print {
         p.bodyText {font-size:10pt}
      }
   -->
</style>

Si vous définissez votre feuille de style dans un fichier séparé, vous pouvez également utiliser l'attribut media lors de la liaison à une feuille de style externe -

<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">