10 astuces pour de meilleures feuilles de style d'impression
Les feuilles de style d'impression ont été quelque peu oubliées, et pourtant elles restent importantes. Beaucoup de gens impriment des articles à lire en voyage ou lorsqu'ils n'ont pas accès à Internet.
Les feuilles de style d'impression présentent des avantages certains . Par exemple, lire sur papier est moins fatiguant pour les yeux que de lire à l'écran.
En outre, suivre des tutoriels est plus facile si vous en avez un à côté de vous, avec votre éditeur de code ouvert à l'écran; De cette façon, vous n'avez pas à changer de fenêtre à chaque fois pour chercher quelque chose.
Dans cet article, nous vous indiquerons 10 astuces simples qui vous aideront à créer de meilleures feuilles de style d'impression .
Si vous avez oublié, voici comment mettre en place une feuille de style d'impression:
le media="print" attribut garantit que les utilisateurs ne voient aucun des styles définis dans le fichier print.css .
Une certaine attention est toutefois requise: si votre feuille de style principale ne possède pas d'attribut de média, la feuille de style d'impression héritera de son style. Pour les séparer, définissez votre feuille de style principale comme suit:
Voici 10 conseils pour commencer avec la feuille de style d'impression.
1. Supprimer la navigation
Quelle est la principale différence entre le papier et l'ordinateur? Le papier est statique, tandis qu'un ordinateur est interactif. Et pour faciliter cette interaction, les sites Web ont une navigation qui devient inutile sur le papier.
Cachez la navigation et les autres parties de votre site Web qui deviennent inutiles sur le papier, telles que les barres latérales qui renvoient à d’autres publications. Le code est très simple: il suffit de définir les éléments display à none .
2. Agrandir la zone de contenu
Avec la navigation et la barre latérale supprimées, notre contenu est maintenant réparti sur la page. Cela fait que la feuille de style d'impression ressemble plus à un document ordinaire qu'à une version papier du site Web.
Tout ce que nous devons faire pour développer le contenu est de réinitialiser le flottant, de supprimer les marges et de définir la largeur à 100%.
[css] #content {width: 100%; margin: 0; float: none;} [/ css]3. Réinitialiser les couleurs d'arrière-plan
La plupart des navigateurs ignorent déjà les propriétés d'arrière-plan pour préserver l'encre. Mais pour s'assurer que tout l'arrière-plan est blanc, nous pouvons définir le corps en blanc, puis donner à chaque élément enfant sur la page un arrière-plan blanc.
[css] body {background: white;} # content {background: transparent;} [/ css]4. Réinitialiser les couleurs du texte
En réinitialisant l'arrière-plan, un autre problème apparaît. Que se passe-t-il si vous avez une case "Informations sur l'auteur" grise à la fin de vos messages, avec le texte en gris clair ou blanc? Avec l'arrière-plan maintenant défini sur blanc, cette information sera invisible.
Pour résoudre ce problème, remplacez tout texte de couleur claire par un élément plus sombre: noir ou, de préférence, gris foncé.
[css] #author {color: # 111;} [/ css]
Prendre Sam Brown Le blog ci-dessus. Pouvez-vous imaginer à quoi cela ressemblerait s'il ne réinitialisait pas les couleurs du texte? Illisible en effet.
5. Afficher la destination des liens
Parce que le papier n'est pas un support interactif, les lecteurs ne peuvent bien sûr pas cliquer sur les liens pour obtenir plus d'informations.
Dites que quelqu'un lit une version imprimée d'un nouveau produit sophistiqué. Voir "Cliquez ici pour plus d'informations" serait tout à coup plutôt irritant pour eux, n'est-ce pas? Ceci est facilement corrigé en ajoutant la destination du lien après le texte du lien lui-même, vous donnant quelque chose comme ceci: "Cliquez ici pour plus d'informations (http://hereismore.com/information)."
De plus, pour les navigateurs compatibles CSS 2, cela peut être fait avec les anciens CSS. Voici le code:
[css] a: link: après {content: "(" attr (href) ")";} [/ css]Vous pouvez pimenter les choses avec une taille de police plus petite, en italique ou autre.
6. Faire en sorte que les liens se distinguent du texte ordinaire
Les lecteurs doivent pouvoir distinguer les liens du texte normal. Les règles d'utilisation de base s'appliquent ici: le bleu et le soulignement sont préférables, mais je préfère aussi ajouter le gras.
Rappelez-vous que les documents sont souvent imprimés en noir et blanc. Ne dépend pas seulement de la différence de couleur. Voici le code pour les liens imprimés sensibles:
[css] a: lien {font-weight: bold; text-decoration: souligné; couleur: # 06c;} [/ css]# 0066cc est une couleur bleue fraîche et ressemble à # 999999 lors de l'impression en niveaux de gris. Avec ceci, les liens sembleront bien imprimés en couleur ou en noir et blanc. Ils se démarqueront également du texte ordinaire.
7. Qu'en est-il de la taille de la police?
En version imprimée, la norme est de 12 points. Mais comment pouvons-nous traduire cela en CSS? Certains disent que régler la taille de la police à 12 points (pt) est suffisant. D'autres recommandent de le régler à 100%. D'autres encore disent de ne pas déclarer de taille de police dans votre feuille de style d'impression, car cela annulerait les préférences de l'utilisateur.
Personnellement, je vais avec une taille de police de 12 points la plupart du temps:
[css] p {font-size: 12pt;} [/ css]8. Qu'en est-il des polices?
La plupart des gens préfèrent les polices avec empattement car ils sont moins fatigants pour les yeux, ils conduisent mieux le lecteur à travers le texte, etc. Réglage de la font-family à serif dans votre feuille de style d'impression est probablement une bonne idée, bien que certains lecteurs puissent être surpris de constater que la police dans leur impression n'est pas la même que celle sur votre site Web.
Voici le code pour une bonne pile de polices imprimées:
[css] body {font-family: Georgia, 'Times New Roman', serif;} [/ css]
L'un des avantages de la propriété @ font-face de CSS 3 est que vos polices spéciales peuvent également être imprimées, ce qui fait que les impressions ressemblent beaucoup plus à votre site Web!
9. Mon blog a beaucoup de commentaires. Que devrais-je faire?
Eh bien, c'est vraiment votre choix. D'une part, pensez à tous les arbres que vous épargnez en ajoutant simplement #comments { display: none; } à votre feuille de style d'impression. D'un autre côté, les commentaires sont très utiles sur certains blogs et contiennent de bonnes discussions.
En déplaçant les commentaires sur leur propre page, vous donnez aux utilisateurs le choix de les imprimer. CSS a une propriété qui rend cela très facile:
[css] #comments {page-break-before: toujours;} [/ css]Par exemple, si votre article compte deux pages et demie de long, les commentaires s'exécuteront de la page 4 à, disons, 6. Les utilisateurs pourront choisir les pages à imprimer sans perdre aucune information.
10. Afficher un message d'impression uniquement
" Merci d'avoir imprimé cet article! N'oubliez pas de revenir sur mysite.com pour les articles frais. "Pourquoi ne pas afficher un message amical comme celui-ci dans l'impression? Ou peut-être demander aux lecteurs de recycler le papier qu'ils ont utilisé pour préserver l'environnement.
Voici à quoi cela ressemblerait:
Merci d'avoir imprimé cet article. N'oubliez pas de revenir sur mysite.com pour les articles frais.
[css] #printMsg {display: bloc;} [/ css] Vous pouvez également ajouter un peu de style, comme une bordure de 1 pixel. N'oubliez pas d'ajouter #printMsg { display: none; } à votre feuille de style régulière, pour éviter de dérouter les visiteurs.
Vitrine
Voici quelques exemples de sites Web connus qui ont pensé (ou oublié) la feuille de style d'impression. N'hésitez pas à vous inspirer.
Cela semble bon:
Voici quelques sites Web qui font un excellent travail avec leurs feuilles de style d'impression:
24 façons : Le site Web de ce "calendrier de l’avent pour les geeks du Web" a un design sophistiqué, mais je me demandais comment il serait imprimé. Le résultat est vraiment sympa. Le slick CSS 3 a été supprimé. La mise en page est propre et pourtant toujours lisse. La grande image de marque a été supprimée, remplacée par un simple "24 Ways" aligné à droite à côté du titre de la poste.
ThinkVitamin : Le blog de Carsonified est un bon exemple de la façon de faire des feuilles de style d’impression. Pas vraiment de points faibles sauf que la destination de l'URL n'est pas affichée.
Astuces CSS : Chris Coyier de CSS-Tricks.com a fait du bon travail avec sa feuille de style imprimée. Il a supprimé tout le fouillis et déplacé les commentaires vers une nouvelle page, afin que les utilisateurs puissent choisir de ne pas les imprimer.
Pourrait utiliser certains travaux
Voici quelques sites qui sont déjà géniaux, mais dont les feuilles de style d’impression peuvent s’utiliser un peu. Aucune infraction à quiconque dans cette section.
Grand livre Webdesign : Webdesign Ledger semble avoir négligé sa feuille de style d'impression. Lorsque vous cliquez sur "Imprimer", vous obtenez trois pages de publicités et de liens connexes.
La cabine de conception : Brian Hoff semble avoir également oublié sa feuille de style imprimée. Lorsque vous imprimez un article, vous obtenez également le formulaire de commentaire.
Flickr : Pouvoir imprimer des photos à montrer à des amis serait bien. Flickr aurait pu supprimer tout sauf l'image elle-même et les informations de copyright dans les impressions. Mais tout apparaît en HTML simple et sans style.
Ressources
- Conseils pratiques pour créer une feuille de style CSS imprimée par Line25
- Feuille de style d'impression: le guide définitif
- Conception CSS: impression
- CSS-Tricks obtient enfin une feuille de style d'impression
Ecrit exclusivement pour WDD par Pieter Beulque. Il est étudiant et développeur web , vivant en Belgique. Vous pouvez le suivre sur Gazouillement aussi.