Convertir les pages CSS XHTML en pages d'imprimante_HTML/Xhtml_Production de pages Web

Dans le passé, créer une version imprimable d'une page Web signifiait concevoir une page distincte avec une mise en page et un formatage modifiés afin qu'elle soit belle une fois imprimée. Désormais, en utilisant du XHTML et du CSS structurés, vous pouvez obtenir le même effet avec beaucoup moins d'effort.
De l'affichage à l'écran à l'effet d'impression
La plupart des pages Web sont conçues pour être consultées sur un écran d'ordinateur. Cependant, les utilisateurs doivent parfois imprimer certaines pages, peut-être pour conserver un enregistrement à long terme ou pour les utiliser comme référence hors ligne pratique.
Le problème maintenant est que bon nombre des fonctionnalités qui rendent les pages Web attrayantes et colorées sur un écran d'ordinateur couleur n'ont pas le même effet sur une version imprimée d'une page Web, surtout si l'imprimante est noire et blanc. . Lors d'une rétrogradation vers l'impression en niveaux de gris, les combinaisons de couleurs perdront leur contraste ; les graphiques apparaîtront déformés et prendront trop de temps à s'imprimer ; les boutons de navigation qui jouent un rôle important sur les pages Web ne s'imprimeront pas correctement non plus.
Afin de surmonter ces problèmes, les créateurs Web conçoivent souvent une version imprimable de la page afin que les visiteurs aient envie d'imprimer. Les versions imprimables contiennent généralement le même contenu que la page Web principale, mais omettent la plupart des éléments graphiques, d'arrière-plan et de navigation. La page convertit également la couleur sous une forme quelconque pour produire une image en niveaux de gris acceptable.
Solution CSS
L'un des avantages de l'utilisation du balisage XHTML structuré et du formatage CSS pour séparer le contenu et la présentation est que vous pouvez facilement reformater le contenu en modifiant le style CSS. Par conséquent, créer une page imprimable consiste à lier un fichier CSS différent à la même page XHTML.
Vous pouvez lier à la fois la feuille de style d'écran et la feuille de style d'impression dans le même fichier XHTML, il n'est donc pas nécessaire de créer une page imprimable distincte, juste une feuille de style imprimable. Lorsque vous incluez un fichier de type multimédia dans le code du lien, vous indiquez au navigateur quelles règles CSS suivre ou ignorer pour la sortie à l'écran et quelles règles utiliser pour la sortie imprimée.
Voici un exemple de lien vers une paire de fichiers CSS :
Voici le contenu cité :


Si vous devez prendre en charge des navigateurs plus anciens, vous devez vous en tenir à l'écran et à l'impression des descripteurs de média CSS1. Ils s'excluent mutuellement, de sorte que les navigateurs ignorent les feuilles de style d'impression lors de la génération de pages à afficher à l'écran, et vice versa. Par conséquent, chaque feuille de style doit contenir le même sélecteur de style, mais avoir des déclarations de règles différentes pour générer des styles de page séparément pour différents périphériques de sortie.
　Simplifiez CSS
Si vous êtes prêt à renoncer à vous occuper des anciennes versions de navigateur et à supposer que vos utilisateurs utilisent des navigateurs prenant en charge CSS2 (tels que IE5 et supérieur ou Netscape6 et supérieur), vous pouvez utiliser le nouveau descripteur tous médias pour simplifier considérablement le code CSS.
Voici un exemple de lien utilisant des descripteurs de média CSS2 :
Voici le contenu cité :


Ces liens sont quasiment identiques aux précédents ; la différence est que le fichier CSS contient les styles pour le support d'impression.
Les styles associés à media="all" dans un fichier CSS peuvent être appliqués à l'affichage à l'écran, à l'impression et à tous les autres médias, vous pouvez donc mettre tous les styles que vous créez dans ce fichier. Le fichier CSS associé à media="print" seul peut être beaucoup plus petit car la page hérite de tous les styles de tous les fichiers multimédias, il n'est donc pas nécessaire de dupliquer ces styles dans les fichiers multimédias d'impression.
Les seuls styles requis dans le fichier CSS du support d'impression sont ceux qui modifient ou ajoutent des styles de page pour la sortie imprimée. D'une manière générale, il ne s'agit que de styles qui suppriment l'affichage des divs contenant des graphiques et du contenu de navigation, et remplacent les paramètres de largeur et de marge de la balise body et du div principal par des paramètres adaptés à l'impression.
Cette astuce fonctionne car tous les fichiers CSS de médias et les fichiers CSS de médias d'impression sont combinés dans les mêmes règles de style en cascade. Par conséquent, l’ordre dans lequel ces fichiers CSS sont liés est très important. Tous les liens vers des fichiers multimédias doivent être placés avant le lien vers des fichiers multimédias imprimés.
Voici quelques conseils pour utiliser les fichiers CSS des médias imprimés :
Si vous souhaitez désactiver l'affichage d'un div, utilisez display:none au lieu de visible:hidden.
Ni les points (pt) ni les pouces (in) ne sont des unités de mesure correctes pour l'affichage à l'écran, mais ce sont des unités de mesure correctes pour la sortie imprimée.
Les sélecteurs que vous utilisez dans les fichiers multimédias d'impression doivent être exactement les mêmes que ceux que vous utilisez dans tous les fichiers multimédias. Par exemple, si vous utilisez div#sidenav pour sélectionner le div avec l'identifiant sidenav dans tous les fichiers multimédias, l'utilisation de #sidenav dans les fichiers multimédias imprimés risque de ne pas atteindre votre objectif.
N'oubliez pas de forcer explicitement les déclarations de règles de remplacement qui changent d'un fichier à l'autre. Par exemple, si vous définissez un remplissage pour un élément dans tous les fichiers multimédias et que vous souhaitez supprimer le remplissage dans la sortie d'impression, il ne suffit pas d'ajouter un style qui ignore la déclaration de remplissage dans le fichier multimédia d'impression - vous devez le définir explicitement. :0pt pour remplacer le paramètre précédent.
Si vous utilisez un éditeur graphique tel que Dreamweaver, vous pouvez prévisualiser la page générée à l'écran plutôt que sous forme imprimée. Pour prévisualiser les styles d'impression dans la fenêtre d'affichage Création de Dreamweaver, remplacez le lien vers le fichier CSS du support d'impression par media="screen". Cela vous permet de prévisualiser les styles CSS dans les fichiers multimédias d'impression. N'oubliez pas de redéfinir le descripteur de média en media="print" avant de publier votre page.
Lorsque vous devez fournir une page Web imprimable à vos visiteurs, vous n'avez plus besoin de créer une version distincte de la page originale. N'importe quelle page XHTML/CSS peut être convertie en une page imprimable en ajoutant un lien vers une feuille de style CSS avec le descripteur de média media="print".