Si vous avez déjà imprimé des réservations de billets ou des directions vers un hôtel à partir du Web, vous n'avez probablement pas été impressionné par les résultats. Par conséquent, vous ne savez peut-être pas que les documents imprimés peuvent être stylisés de la même manière qu'ils peuvent l'être à l'écran, à l'aide de feuilles de style en cascade (CSS).
Un avantage clé de CSS est la séparation du contenu de la présentation. Dans les termes les plus simples, cela signifie au lieu d'un balisage stylistique très démodé tel que :
Titre
Nous utilisons le balisage sémantique :
Titre
Non seulement cela est beaucoup plus propre, mais cela signifie également que notre présentation est séparée de notre contenu. Les navigateurs affichent h1 éléments en gros caractères gras par défaut, mais nous pouvons changer ce style à tout moment avec une feuille de style :
h1 { font-weight :normal ; }
En rassemblant ces déclarations de style dans un fichier séparé et en référençant ce fichier à partir de notre document HTML, nous pouvons encore mieux utiliser la séparation. La feuille de style peut être réutilisée et nous pouvons modifier ce fichier unique à tout moment pour mettre à jour la mise en forme dans chaque document qui l'utilise.
De la même manière que pour inclure une feuille de style d'écran, nous pouvons spécifier une feuille de style pour l'impression. Une feuille de style d'écran est généralement incluse comme suit :
Cependant, un attribut supplémentaire, media , permet un ciblage basé sur le contexte dans lequel le document est rendu. Par défaut, l'élément précédent équivaut à :
Cela signifie que la feuille de style sera appliquée pour tout support dans lequel le document est rendu. Cependant, l'attribut media peut également prendre les valeurs print et screen :
Dans cet exemple, le print.css la feuille de style ne sera utilisée que lorsque le document sera imprimé. C'est un mécanisme très utile. Nous pouvons rassembler tous les styles courants (peut-être la famille de polices ou l'espacement des lignes) dans une feuille de style qui s'applique à tous les médias, et le formatage spécifique au média dans des feuilles de style individuelles. Encore une fois, c'est une autre utilisation de la séparation des préoccupations.
Vous ne voulez certainement pas gaspiller de l'encre en imprimant un arrière-plan coloré ou une image d'arrière-plan. Commencez par réinitialiser les valeurs par défaut pour ces valeurs qui peuvent avoir été définies dans votre document :
corps {
fond :blanc;
la couleur noire;
}
Vous pouvez également empêcher l'impression des images d'arrière-plan. Celles-ci doivent être décoratives et, par conséquent, ne pas faire obligatoirement partie de votre contenu :
* {
image d'arrière-plan :aucune !important ;
}
Un autre point évident à prendre en compte concernant l'impression est la marge de la page. Bien que CSS fournisse un moyen de définir la taille de la marge, vous devez garder à l'esprit que votre navigateur et votre imprimante peuvent également influencer eux-mêmes les paramètres de marge.
Par exemple, dans la boîte de dialogue d'impression de Chrome, il existe un paramètre de marge qui a des valeurs telles que aucun et personnalisé qui remplacera tout ce qui est spécifié via CSS :
Pour cette raison, il est recommandé de laisser les décisions de marge au lecteur sur les pages Web publiques. Cependant, pour un usage personnel ou pour créer une mise en page par défaut, la définition des marges d'impression via CSS peut être appropriée. La @page permet de définir des marges et doit être utilisée comme suit :
@page {
marge :2 cm;
}
CSS permet également des mises en page d'impression plus sophistiquées, telles que la variation de la marge selon que la page est impaire (à droite), paire (à gauche) ou la page de garde.
Malheureusement, cette option est mal prise en charge, en particulier l'option de page de garde, mais elle peut être utilisée dans une mesure minimale. Les styles suivants produisent des pages avec des marges inférieures légèrement plus grandes que celles du haut et des marges légèrement plus grandes sur le bord extérieur de la page que le dos :
@page {
marge gauche :20 mm;
marge droite :20 mm;
marge supérieure :40 mm;
marge inférieure :50 mm;
}
@page :gauche {
marge gauche :30 mm;
}
@page :droit {
marge droite :30 mm;
}
Tout le contenu ne conviendra pas à une version imprimée de votre document. Si votre page comprend des bannières de navigation, des publicités ou une barre latérale, vous souhaiterez peut-être empêcher ces détails d'apparaître dans la version imprimée, par exemple :
#contents, div.ad { display :none ; }
Les hyperliens ne sont évidemment pas pertinents dans les documents imprimés, vous voudrez donc probablement supprimer tous les styles qui les différencient du texte environnant :
a { text-decoration :none ; couleur :hériter ; }
Cependant, vous souhaiterez peut-être toujours que les lecteurs aient accès aux URL d'origine, et une solution simple consiste à les insérer automatiquement après le texte lié :
a[href] :après {
contenu :" (" attr(href) ")" ;
taille de police :90 % ;
couleur :#333;
}
Ce CSS donne des résultats tels que :
a[href] :après cible spécifiquement la position après (:after ) chaque élément de lien (un ) qui a en fait une URL ([href] ). Le contenu déclaration ici insère la valeur de href attribut entre parenthèses. Notez que d'autres règles de style peuvent être appliquées pour contrôler l'affichage du contenu généré.
Pour éviter que les sauts de page ne laissent un contenu isolé ou ne le cassent maladroitement au milieu, utilisez les propriétés de saut de page :page-break-before , saut de page après et page-break-inside . Par exemple :
table { page-break-inside :éviter ; }
Cela devrait aider à empêcher les tableaux de s'étendre sur plusieurs pages, à condition qu'aucun ne dépasse une seule page. De même :
h1, h2 { page-break-before :toujours ; }
Cela signifie que ces titres commencent toujours une nouvelle page. Cela pourrait causer des problèmes si vous suivez immédiatement le h1 de votre page avec un h2, car le h1 se retrouvera tout seul sur une page. Pour éviter cela, annulez simplement le saut de page à l'aide d'un sélecteur qui cible cette instance spécifique, par exemple :
h1 + h2 { page-break-before :éviter ; }
Dans tous les cas, votre navigateur et votre système d'exploitation doivent fournir une fonction d'aperçu avant impression, souvent dans le cadre de la boîte de dialogue d'impression standard.
Le navigateur Chrome facilite la vérification et même le débogage de vos styles d'impression via les outils de développement, comme le montre cet exemple montrant un CV avec une feuille de style d'impression. Tout d'abord, ouvrez le menu principal et sélectionnez Plus d'outils suivi des outils de développement choix :
Dans le nouveau panneau qui s'affiche, sélectionnez Menu , puis Plus d'outils , suivi de Rendu :
Ensuite, faites défiler jusqu'à Emuler le type de média CSS réglage. Le menu déroulant vous permet de basculer entre les vues d'impression et d'écran de votre document :
Lors de l'émulation de la feuille de style d'impression, le navigateur de styles standard est disponible pour inspecter et modifier les règles de style en direct. Gardez à l'esprit que l'émulation de la sortie d'impression sur un écran n'est toujours pas précise à 100 %. Le navigateur ne sait rien de la taille du papier et la @page la règle ne peut pas être émulée.
Une fonctionnalité pratique des systèmes d'exploitation modernes est la possibilité d'imprimer dans un fichier PDF. En effet, tout ce que vous pouvez imprimer peut, à la place, être envoyé dans un fichier PDF, ce qui n'est pas vraiment une surprise puisqu'un fichier PDF est censé représenter un document imprimé, après tout.
Cela fait du HTML, en combinaison avec une feuille de style d'impression, un excellent moyen de créer un document de haute qualité qui peut être envoyé en pièce jointe, ainsi qu'imprimé.
Vous pouvez utiliser une feuille de style d'impression pour créer des documents de qualité, qu'il s'agisse de votre CV, de recettes ou d'annonces d'événements. Les pages Web ont généralement un aspect laid et contiennent des détails indésirables lors de l'impression, mais un petit nombre d'ajustements de style peut considérablement améliorer les résultats d'impression. L'enregistrement des résultats finaux au format PDF est un moyen rapide de créer des documents attrayants et professionnels.