Traduction
Tutoriel CSS3 - sommaire
Tutoriel CSS3 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Certains internautes en particulier les plus âgés, veulent souvent imprimer une ou des pages d'un site.
Cette opération ne doit pas se traduire par l'impression d'un nombre élevé de feuilles et une consommation importante d'encre.
Beaucoup de sites proposent une version imprimable de certaines pages sous forme d'un fichier pdf.
C'est une solution dépassée car le CSS est désormais capable de gérer une mise en page de qualité en vue de l'impression.
Il suffit désormais de prévoir une feuille de style pour l'impression !
Vous pouvez donner à votre feuille de style externe la structure interne suivante :
@media all
{
*{...}
body {...}
...
}
@media screen
{
*{...}
body {...}
...
}
@media print
{
*{...}
body {...}
...
}
On utilise les media queries pour créer des styles conditionnels.
Plutôt que de regrouper toutes les règles de style en une seule feuille on peut créer une feuille de style par média. Donc la page web peut contenir différentes instructions link comme l'exemple ci-dessous :
Dans l'exemple ci-dessus il y a des liens vers trois feuilles de style externes spécialisées.
Notez le nouvel attribut de la balise link : media. La valeur par défaut de cet attribut est all.
Eventuellement le fichier ecran.css doit gérer les différents types d'écrans (de l'écran d'ordinateur de bureau à l'écran de smartphone).
C'est ce qu'on appelle le responsive web design. La technique la plus répandue consiste à utiliser CSS et plus précisément les media queries.
Pour plus d'explications sur un site "responsive" via les media queries : les requêtes de média
Ce document HTML se nomme "impression.htm".
Mais revenons à une feuille de style multimédia.
@media all
{
*{font-family :serif ;}
h1,h2{text-align : center ; }
h1{font-size : 1.5em; }
h2{font-size : 1.2em ; }
p {text-align : justify; }
}
@media screen
{
*{font-size : 18px ; color : navy ; background : aqua ;
margin : 0px ; padding : 0px ; }
body{width : 900px ; margin : 20px auto ; }
h1 {margin : 20px auto ; }
h2 {margin : 10px auto ; }
img {width : 300px ; float : left ; margin : 10px ; }
a {display : block ; margin : 10px 0px ; }
}
@media print
{
*{font-size : 14pt ; color : black ; }
p{widows :3 ; orphans : 3 ; }
@page {margin : 3cm 2cm ;}
h1 {margin : 0.5cm auto ; }
h2 {margin : 0.2cm auto ; }
img,a {display : none ; }
/* numérotation automatique des titres h1 et h2 */
body {counter-reset : niveau1 ; }
h1 {counter-reset : niveau2 ; }
h1 {counter-increment: niveau1; }
h2 {counter-increment: niveau2 ; }
h1:before {content: counter(niveau1) ".";}
h2:before
{content: counter(niveau1) "." counter(niveau2 ) ". "; }
}
Dans la première partie (@media all) de la feuille de style on trouve toutes les règles communes aux différents médias telles la justification du texte pour les paragraphes, la majoration de taille pour les titres.
La deuxième partie contient toutes les règles de style pour l'affichage écran : @media screen
Remarquez que l'on raisonne en pixels ; taille de référence du texte = 18 pixels.
Dans la troisième partie on retrouve les règles de style pour l'impression : @media print
Notez le sélecteur @page qui signifie "pour toutes les pages".
On ne raisonne plus en pixels (ça n'a aucun sens pour une feuille de papier) mais en pt et en cm.
pt veut dire "point". Il n'est pas inutile de rappeler qu'un pt = 1/72 de pouce et un pouce (in) vaut 2,54 cm.
Donc 14pt équivaut à 1/2 cm environ.
Dans le cadre d'une impression les images et les liens sont masqués : img,a {display : none ; } afin d'économiser de l'encre et du papier.
Dans cette troisième partie il existe une règle étrange.
p {widows :3 ; orphans : 3 ; } : c'est la gestion des veuves et orphelines.
Les utilisateurs chevronnés d'un traitement de textes connaissent cette notion. Dans le cadre d'une impression il
faut éviter que seule la dernière ligne d'un paragraphe se retrouve en haut d'une page : veuve (widow).
Il faut aussi éviter que seule la première ligne d'un paragraphe se retrouve en bas d'une page : orpheline (orphan).
Grâce à la règle de style citée il y aura toujours au moins trois lignes de paragraphes en bas ou en haut d'une page.
table {page-break-inside :avoid; } : cette règle de style vise à éviter un saut de page en plein milieu d'un tableau de données.
Par ailleurs dans la version papier il y a numérotation automatique des titres.
Je n'en dis pas plus sur cette fonctionnalité de CSS ; je vous renvoie au chapitre précédent :
Numérotation automatique des titres
Dans cet onglet utilisez la commande "menu/imprimer" du navigateur et observez l'aperçu avant impression ...
Le texte est en noir sur fond blanc ; les images et le liens ont disparu ; les titres sont numérotés hiérarchiquement ; de belles marges.