Home-theater-designers
Si vous avez déjà imprimé des réservations de billets ou des itinéraires vers un hôtel à partir du Web, vous avez probablement été moins qu'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, à l'aide des feuilles de style en cascade (CSS).
Séparation des préoccupations
Un avantage clé du 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 :
Heading
Nous utilisons le balisage sémantique :
Non seulement c'est beaucoup plus propre, mais cela signifie également que notre présentation est séparée de notre contenu. Les navigateurs rendent h1 les éléments sous forme de texte en gras par défaut, mais nous pouvons modifier 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.
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, demi , permet un ciblage basé sur le contexte dans lequel le document est rendu. Par défaut, l'élément précédent est équivalent à :
Cela signifie que la feuille de style sera appliquée pour tout support sur lequel le document est rendu. Cependant, l'attribut media peut également prendre les valeurs print et screen :
Dans cet exemple, le imprimer.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 une famille de polices ou un interligne) 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.
Quelques exemples de déclarations de style
Un arrière-plan propre
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 de ces valeurs qui peuvent avoir été définies dans votre document :
body {
background: white;
color: black;
}
Vous voudrez peut-être également empêcher l'impression des images d'arrière-plan. Celles-ci doivent être décoratives et, par conséquent, ne pas faire partie intégrante de votre contenu :
* {
background-image: none !important;
}
En rapport: Comment définir une image d'arrière-plan en CSS
comment apparaître hors ligne sur facebook 2018
Contrôle des marges
Un autre point évident à considérer concernant l'impression est la marge de la page. Alors que CSS fournit un moyen de définir la taille des marges, 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 qui a des valeurs comprenant 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. Les @page La règle permet de définir des marges et doit être utilisée comme suit :
@page {
margin: 2cm;
}
CSS a également la capacité de créer 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.
comment obtenir un fond d'écran animé windows 10
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 qu'en haut et des marges légèrement plus grandes sur le bord extérieur de la page que le dos :
@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}
Cacher 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 { display: none; }
Fixation des liens
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; color: inherit; }
Cependant, vous pouvez toujours souhaiter 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]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #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 ( à ) qui a en fait une URL ( [href] ). Les 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 du contenu isolé ou ne le cassent 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: avoid; }
Cela devrait aider à empêcher les tableaux de s'étendre sur plusieurs pages, à condition qu'aucun ne soit plus grand qu'une seule page. De la même manière:
h1, h2 { page-break-before: always; }
Cela signifie que de tels en-têtes 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 :
comment utiliser internet par telephone sur ordinateur
h1 + h2 { page-break-before: avoid; }
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 de la Outils de développement option:
Dans le nouveau panneau qui apparaît, sélectionnez Menu , alors Plus d'outils , suivie par Le rendu :
Faites ensuite défiler jusqu'au É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 connaît rien au format 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 effet, tout ce que vous pouvez imprimer peut, à la place, être envoyé dans un fichier PDF, ce qui n'est pas vraiment surprenant 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é.
Imprimer une variété de documents
Vous pouvez utiliser une feuille de style imprimée pour créer des documents de qualité, allant de votre CV à des recettes ou des 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 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 attrayants et professionnels.
Partager Partager Tweeter E-mail Comment imprimer des pages Web au format PDF avec Microsoft EdgeAvez-vous déjà rencontré un article intéressant que vous vouliez conserver pour plus tard ? Eh bien, vous pouvez enregistrer au format PDF avec Edge en trois étapes faciles.
Lire la suite Rubriques connexes- La programmation
- Impression
- CSS
Bobby est un passionné de technologie qui a travaillé comme développeur de logiciels pendant près de deux décennies. Il est passionné par les jeux, travaillant comme rédacteur de critiques au Switch Player Magazine, et est immergé dans tous les aspects de la publication en ligne et du développement Web.
Plus de Bobby JackAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner