Si vous avez déjà imprimé des réservations de billets ou des itinéraires 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 le peuvent à l'écran, en utilisant les feuilles de style en cascade (CSS).

Séparation des préoccupations

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. Rendu des navigateurs h1 éléments comme du texte gros et gras par défaut, mais nous pouvons changer ce style à tout moment avec une feuille de style:

h1 {poids de la police: 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 à tout moment pour mettre à jour la mise en forme de chaque document qui l'utilise.

Inclure une feuille de style d'impression

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, médias, permet le ciblage en fonction du 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 à tout support sur lequel le document est rendu. Cependant, l'attribut media peut également prendre des valeurs d'impression et d'écran:

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 la mise en forme spécifique aux médias dans des feuilles de style individuelles. Encore une fois, c'est une autre utilisation de la séparation des préoccupations.

Quelques exemples de déclarations de style

Un fond propre

Vous ne voulez certainement pas gaspiller d’encre en imprimant un arrière-plan coloré ou une image d’arrière-plan. Commencez par réinitialiser les valeurs par défaut de ces valeurs qui peuvent avoir été définies dans votre document:

corps {
fond: blanc;
la couleur noire;
}

Vous souhaiterez peut-être également empêcher l'impression des images d'arrière-plan. Elles doivent être décoratives et, par conséquent, ne pas faire partie intégrante de votre contenu:

* {
image de fond: aucun! important;
}

En rapport: Comment définir une image d'arrière-plan dans CSS

Comment définir une image d'arrière-plan dans CSS

CSS est un outil puissant pour styliser les pages Web. Apprendre à placer une image d'arrière-plan vous apprend beaucoup de bases CSS.

Contrôle des marges

Un autre point évident à considérer concernant l'impression est la marge de la page. Bien que CSS offre un moyen de définir la taille de la marge, vous devez garder à l'esprit que votre navigateur et votre imprimante peuvent également influencer les paramètres de marge eux-mêmes.

Par exemple, dans la boîte de dialogue d'impression de Chrome, il existe un paramètre de marge dont les valeurs incluent rien et Douane 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. Le @page règle permet de définir des marges et doit être utilisée comme suit:

@page {
marge: 2 cm;
}

CSS a également la capacité pour 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 couverture.

Malheureusement, cette option est mal prise en charge, en particulier l'option de page de garde, mais elle ne peut être utilisée que 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 sur 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: droite {
marge droite: 30 mm;
}

Masquer le contenu non pertinent

Tout le contenu ne conviendra pas à une version imprimée de votre document. Si votre page comprend une navigation par bannière, 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 {affichage: aucun; }

Les hyperliens ne sont évidemment pas pertinents dans les documents imprimés, vous souhaiterez donc probablement supprimer tous les styles qui les différencient du texte environnant:

a {texte-décoration: aucun; couleur: hériter; }

Cependant, vous voudrez 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 la police: 90%;
couleur: # 333;
}

Ce CSS donne des résultats tels que les suivants:

a [href]: après cible spécifiquement la position après (:après) chaque élément de lien (une) qui a en fait une URL ([href]). Le teneur déclaration insère ici la valeur de la 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é.

Gestion des sauts de page

Pour éviter que les sauts de page ne laissent un contenu isolé ou ne le brisent maladroitement au milieu, utilisez les propriétés de saut de page: saut de page avant, saut de page après et saut de page à l'intérieur. 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 en-têtes commencent toujours une nouvelle page. Cependant, cela pourrait poser des problèmes si vous suivez immédiatement le h1 de votre page avec un h2, car le h1 se retrouvera sur une page tout seul. 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; }

Affichage des styles d'impression

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 du Outils de développement option:

Dans le nouveau panneau qui apparaît, sélectionnez Menu, alors Plus d'outils, suivie par Le rendu:

Puis faites défiler vers le bas Émuler le type de média CSS réglage. La liste déroulante 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, la norme Navigateur de styles 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 le @page la règle ne peut pas être émulée.

Impression vers un PDF

Une fonctionnalité pratique des systèmes d'exploitation modernes est la possibilité d'imprimer dans un fichier PDF. En fait, tout ce que vous pouvez imprimer peut, à la place, être envoyé dans un fichier PDF - ce n'est pas vraiment une surprise car 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 et imprimé.

Imprimez une variété de documents

Vous pouvez utiliser une feuille de style d'impression pour créer des documents de qualité, y compris tout ce qui va de votre CV aux recettes ou aux annonces d'événements. Les pages Web semblent généralement laides et contiennent des détails indésirables lors de l'impression, mais un petit nombre de modifications 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 professionnels attrayants.

Comment imprimer des pages Web au format PDF avec Microsoft Edge

Avez-vous déjà rencontré un article intéressant que vous souhaitiez conserver pour plus tard? Eh bien, vous pouvez enregistrer au format PDF avec Edge en trois étapes faciles.

A propos de l'auteur