TUTORIELS 
Utiliser une feuille de style spécifique à l'impression
Comment faire l'économie du sempiternel lien "Imprimer ce document" ? Une méthode pratique grâce à CSS2.  (Décembre 2003)
 
Discutez en sur les forums
"Comment m'y prendre pour avoir une CSS qui gère l'impression, grâce à laquelle le navigateur sait quels éléments utiliser lorsqu'on lui demande d'imprimer une page Web ?"

Un problème, une interrogation ? Adressez vous à la rédaction de JDNet Développeurs

C'est depuis la recommandation CSS2 que cette possibilité est offerte aux développeurs Web : cette nouvelle version de la norme CSS introduit le concept important des types de média. Ils permettent de préciser la manière dont un document doit être présenté selon le média utilisé : screen, tv, handheld, print, mais aussi aural (lecture audio), braille, embossed, projection et tty. Le média qui nous intéresse ici est évidemment print, mais les indications que nous donnons sont applicables pour tous.

Il existe plusieurs méthodes pour attacher une feuille de style à un (ou plusieurs) médias. En voici quelques exemples, en commençant par la plus courante :

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

<style type="text/css">
  @import url(/css/non-voyants.css) braille,embossed;
</style>

<style type="text/css">
  @media print
    {
    a
      {
      font-size: 10pt;
      }
    }
  @media aural
    {
    a
      {
      volume: loud;
      }
    }
</style>

<style type="text/css" media="screen,handheld">
  <!--
    h1 {font-size: 20px;style: bo}
  -->
</style>


Indications
Il faut ensuite écrire chaque feuille de style en ayant soin de
prendre en compte les spécificité de chaque média, et en utilisant les possibilités de CSS (par exemple, display:none pour cacher les éléments de la page inutile). Ainsi, une page imprimée n'aurait probablement pas besoin des "colonnes" habituelles, ni des liens soulignés, mais pourrait certainement profiter d'un fond blanc et de textes en noir.
Appliquer ce principe à vous vous permettra de faire l'économie d'une page "Impression" supplémentaire à écrire... pour peu que les navigateurs de vos lecteurs implémentent correctement les types de média de CSS2, ce qui est aujourd'hui vrai dans la plupart des cas (hors Netscape 4).


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius


 
[ Xavier BorderieJDNet
 
Accueil | Haut de page