"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
|