Comment créer des pages conviviales avec CSS

Dans cet article, nous passons en revue l'art de créer des pages Web conviviales avec CSS.

Les plats clés

1. L'importance des pages adaptées à l'imprimante: malgré l'ère numérique, il existe un besoin important de pages Web conviviales. L'impression des pages Web est essentielle à diverses fins, telles que l'impression de billets de voyage, la lecture hors ligne et la fourniture d'informations accessibles à ceux qui ont du mal à utiliser des écrans. L'article souligne la nécessité d'optimiser les pages Web d'impression pour améliorer l'accessibilité et l'expérience utilisateur.

2. CSS pour l'impression: CSS joue un rôle crucial dans la création de pages Web conviviale. L'article décrit comment utiliser CSS pour créer des feuilles de styles d'impression qui garantissent que le contenu Web est présenté dans un format optimal lors de l'imprimé. Cela comprend l'utilisation de requêtes multimédias spécifiques pour l'impression, l'ajustement de la disposition et des styles, et de s'assurer que la page imprimée est lisible et bien organisée.

3. Conseils et techniques pratiques: l'article fournit une multitude de conseils pratiques sur la création de feuilles de style imprimées efficaces. Les recommandations clés incluent la suppression des éléments inutiles, les dispositions linéaires, l'utilisation des polices et des tailles appropriées, la gestion des pauses de page et y compris le contenu supplémentaire pour les versions imprimées. Ces conseils aident les développeurs Web à s'assurer que leurs sites peuvent être imprimés facilement et efficacement, enregistrant de l'encre et du papier tout en maintenant l'intégrité du contenu Web.

Pourquoi avons-nous besoin de CSS pour l'impression?

"Qui imprime les pages Web?" Je t'entends pleurer! Relativement peu de pages seront jamais reproduites sur papier. Mais considérez:

• Imprimer des billets de voyage ou de concert
• Reproduction des instructions de route ou des horaires
• Enregistrer une copie pour la lecture hors ligne
• accéder aux informations dans une zone avec une mauvaise connectivité
• en utilisant des données dans des conditions dangereuses ou sales - par exemple, une cuisine ou une usine
• Sortir du contenu de brouillon pour les annotations écrites
• Impression des reçus Web à des fins de comptabilité
• Fournir des documents aux personnes handicapées qui ont du mal à utiliser un écran
• Impression d'une page pour votre collègue qui refuse d'utiliser ce non-sens T’internet.

Malheureusement, l'impression des pages peut être une expérience frustrante:

• Le texte peut être trop petit, trop grand ou trop léger
• Les colonnes peuvent être trop étroites, trop larges ou des marges de page de débordement
Les sections
• peuvent être recadrées ou disparaître entièrement
• L'encre est gaspillée sur des arrière-plans et des images colorés inutiles
• Les URL de liaison ne peuvent pas être vues
• Les icônes, les menus et les publicités sont imprimés qui ne pourraient jamais être cliqués!

De nombreux développeurs préconisent l'accessibilité Web, mais peu ne se souviennent pas de rendre le Web imprimé accessible!

Convertir des supports compatiers et continus en papier paginaire de toute taille et orientation peut être difficile. Cependant, le contrôle d'impression CSS est possible depuis de nombreuses années, et une feuille de style de base peut être terminée en quelques heures. Les sections suivantes décrivent des options bien soutenues et pratiques pour rendre vos pages adaptées à l'imprimante.

Feuilles de style imprimé

CSS imprimé peut être:

1. appliqué en plus du style d'écran. En prenant vos styles d'écran comme base, les styles d'imprimante remplacent ces valeurs par défaut si nécessaire.
2. appliqué comme des styles séparés. Les styles d'écran et d'impression sont entièrement séparés; Les deux commencent à partir des styles par défaut du navigateur.

Le choix dépendra de votre site / application. Personnellement, j'utilise les styles d'écran comme base d'impression la plupart du temps. Cependant, j'ai utilisé des feuilles de style séparées pour les applications avec des sorties radicalement différentes - comme un système de réservation de session de conférence qui affichait une grille horaire à l'écran mais un calendrier chronologique sur papier.

Une feuille de style d'impression peut être ajoutée au HTML après la feuille de style standard:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Les styles print.css seront appliqués en plus des styles d'écran lorsque la page sera imprimée.

Pour séparer les supports d'écran et d'impression, main.css doit cibler l'écran uniquement:

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Alternativement, les styles d'impression peuvent être inclus dans un fichier CSS existant à l'aide de règles @media. Par exemple:

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Un certain nombre de règles d'impression @Media peuvent être ajoutées, ce qui peut être pratique pour garder les styles associés ensemble. Les règles d'écran et d'impression peuvent également être séparées si nécessaire:

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Tester la sortie de l'imprimante

Il n'est pas nécessaire de tuer des arbres et d'utiliser une encre scandaleusement chère chaque fois que vous souhaitez tester votre mise en page imprimée! Les options suivantes reproduisent les styles d'impression à l'écran.

Imprimer l'aperçu

L'option la plus fiable est l'option d'aperçu d'impression de votre navigateur. Cela montre comment les ruptures de page seront gérées en utilisant la taille de votre papier par défaut.

Alternativement, vous pourrez peut-être enregistrer ou prévisualiser la page en exportant vers un PDF.

outils du développeur

les devtools ( f12 ou cmd / ctrl shift i ) peuvent imiter les styles d'impression, bien que les ruptures de page ne soient pas montré.

Dans Chrome, ouvrez les outils du développeur et sélectionnez plus d'outils, puis en rendant dans le menu d'icônes à trois points en haut à droite. Modifiez les médias CSS imités à imprimer au bas de ce panneau.

Dans Firefox, ouvrez les outils du développeur et cliquez sur l'icône de simulation de médias d'impression à bascule sur le volet de style de l'onglet Inspecteur:

pirater votre attribut multimédia

En supposant que vous utilisez une balise pour charger CSS de l'imprimante, vous pouvez modifier temporairement l'attribut multimédia à l'écran:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Encore une fois, cela ne révélera pas les pauses de page. N'oubliez pas de restaurer l'attribut à Media = "Print" une fois que vous avez terminé les tests.

supprimer les sections inutiles

Avant de faire quoi que ce soit d'autre, supprimez et effondrez le contenu redondant avec l'affichage: aucun;. Des sections inutiles typiques sur papier peuvent inclure des menus de navigation, des images de héros, des en-têtes, des pieds de page, des formulaires, des barres latérales, des widgets de médias sociaux et des blocs publicitaires (généralement n'importe quoi dans un iframe):

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Il peut être nécessaire d'utiliser l'affichage: aucun! IMPORTANT; Si la fonctionnalité CSS ou JavaScript affiche des éléments selon des états d'interface utilisateur particuliers. Utilisation! Important n'est normalement pas recommandé, mais nous pouvons justifier son utilisation dans un ensemble de base de styles d'imprimante qui remplacent les paramètres d'écran.

linéariser la disposition

Cela me fait mal de dire ceci, mais Flexbox et Grid jouent rarement bien avec les dispositions d'imprimantes dans n'importe quel navigateur. Si vous rencontrez des problèmes, envisagez d'utiliser l'affichage: bloc; ou similaire sur les boîtes de mise en page et ajuster les dimensions si nécessaire. Par exemple, la largeur du réglage: 100%; Pour s'étendre sur la largeur de la page.

Style de l'imprimante

Le style adapté à l'imprimante peut désormais être appliqué. Recommandations:

• Assurez-vous d'utiliser du texte sombre sur un fond blanc
• Envisagez d'utiliser une police Serif, qui peut être plus facile à lire
• Ajustez la taille du texte à 12 pt ou supérieur
• Modifiez les remblans et les marges si nécessaire. CM standard, mm ou en unités peut être plus pratique.

D'autres suggestions incluent…

adopter les colonnes CSS

Le papier de lettres A4 et US peuvent entraîner des lignes de texte plus longues et moins lisibles. Pensez à utiliser les colonnes CSS dans les dispositions imprimées. Par exemple:

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Dans cet exemple, des colonnes seront créées lorsqu'il y aura au moins 37em d'espace horizontal. Il n'est pas nécessaire de définir des requêtes avec les médias; Des colonnes supplémentaires seront ajoutées sur du papier plus large.

Utiliser les bordures au lieu des couleurs d'arrière-plan

Votre modèle peut avoir des sections ou des boîtes d'appel indiquées par des schémas de couleurs plus foncés ou inverses:

Enregistrer l'encre en représentant ces éléments avec une bordure:

supprimer ou inverser les images

Les utilisateurs ne voudront pas imprimer des images et des arrière-plans décoratifs et non essentiels. Vous pouvez considérer un défaut où toutes les images sont masquées à moins qu'elles aient une classe d'impression:

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Idéalement, les images imprimées devraient utiliser des couleurs sombres sur un fond clair. Il peut être possible de modifier les couleurs SVG enlacées HTML dans CSS, mais il y aura des situations où vous aurez des bitmaps plus sombres:

Un filtre CSS peut être utilisé pour inverser et ajuster les couleurs de la feuille de style d'impression. Par exemple:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="print.css"</span> /></span>
</span>

Le résultat:

Ajouter un contenu supplémentaire

Les médias imprimés nécessitent souvent des informations supplémentaires qui ne seraient pas nécessaires à l'écran. La propriété CSS Content peut être utilisée pour ajouter du texte à :: avant et :: après des pseudo-éléments. Par exemple, affichez l'URL d'un lien entre parenthèses après le texte:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

ou vous pouvez ajouter des messages imprimés uniquement:

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Pour des situations plus complexes, envisagez d'utiliser une classe telle que l'impression sur des éléments qui ne devraient être visibles que lors de l'impression. Par exemple:

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

le CSS:

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Remarque: La plupart des navigateurs affichent l'URL et la date / heure actuelle sur l'en-tête et / ou le pied de page de la page imprimés, il y a donc rarement la nécessité de générer ces informations dans le code.

Page Breaks

Les propriétés CSS3 se brisent et la rupture vous permettent de contrôler comment la page, la colonne ou les pauses région se comportent avant et après un élément. La prise en charge est excellente, mais les navigateurs plus anciens peuvent utiliser les propriétés de page par page et de poitrine.

.

Les valeurs de rupture et de rupture suivantes peuvent être utilisées:

• Auto: la valeur par défaut - une pause est autorisée mais pas forcée
• Évitez: Évitez une rupture sur la page, la colonne ou la région
• Éviter la page: Évitez une pause de page
• Page: Forcer une pause de page
• Toujours: un alias de page
• Gauche: Force Page Breaks, donc le suivant est une page gauche
• à droite: Force Page Breaks, donc le suivant est une page droite

Exemple: Forcez une pause de page immédiatement avant tout

En-tête:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="print.css"</span> /></span>
</span>

Remarque: Méfiez-vous des pauses de page de sur-utilisation. Idéalement, la sortie de l'imprimante doit utiliser le moins de pages possible.

La propriété interrompue (et plus ancienne casse-tête) spécifie si une rupture de page est autorisée à l'intérieur d'un élément. Les valeurs couramment prises en charge:

• Auto: la valeur par défaut - une pause est autorisée mais pas forcée
• Évitez: Évitez une rupture intérieure dans la mesure du possible
• Éviter la page: Évitez une pause de page intérieure lorsque cela est possible

Cela peut être préférable à la spécification des pauses de page, car vous pouvez utiliser le moins de papier possible tout en évitant les pauses de page dans des données groupées telles que des tables ou des images:

<span>/* print.css */
</span><span>header<span>, footer, aside, nav, form, iframe, .menu, .hero, .adslot</span> {
</span>  <span>display: none;
</span><span>}
</span>

La propriété Widows spécifie le nombre minimum de lignes dans un bloc qui doit être affiché en haut d'une page. Imaginez un bloc avec cinq lignes de texte. Le navigateur veut faire une pause de page après la ligne quatre, donc la dernière ligne apparaît en haut de la page suivante. Réglage des veuves: 3; Breaks le plus ou avant la ligne deux, donc au moins trois lignes passent à la page suivante.

La propriété Orphans est similaire aux veuves, sauf qu'elle contrôle le nombre minimum de lignes à afficher en bas d'une page.

La propriété Box-Decoration-Break contrôle les bordures de l'élément entre les pages. Lorsqu'un élément avec une bordure a une pause de page intérieure:

• Slice: la valeur par défaut, divise la disposition. La bordure supérieure est affichée sur la première page et la bordure inférieure est affichée sur la deuxième page.
• Clone: ​​reproduit la marge, le rembourrage et la bordure. Les quatre bordures sont affichées sur les deux pages.

Enfin, CSS Paged Media (@Page) a une prise en charge limitée du navigateur mais fournit un moyen de cibler des pages spécifiques afin que des marges ou des pauses alternatives puissent être définies:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Les propriétés de rupture de la page CSS peuvent être placées dans vos styles d'écran ou d'impression car ils affectent uniquement l'impression, mais je recommande de les utiliser dans CSS imprimé pour plus de clarté.

Sachez que le contrôle de la rupture de page n'est guère plus qu'une suggestion au navigateur. Il n'y a aucune garantie qu'une pause sera forcée ou évitée car la disposition est limitée aux limites du papier.

Douleurs d'impression

Le contrôle sur l'impression des supports Web sera toujours limité et les résultats peuvent varier d'un navigateur à l'autre. Cela dit:

• Les feuilles de style adaptées à l'imprimante peuvent être réduites sur n'importe quel site
• La plupart des styles d'imprimantes fonctionneront dans la majorité des navigateurs
• Les styles d'impression n'affecteront ni ne casseront les fonctionnalités existantes
• Les coûts de développement sont minimes.

Ajouter quelques pauses de pages et supprimer des sections inutiles ravira les utilisateurs et soulèvera votre site au-dessus des concurrents. Ajoutez-le à votre liste de tâches!

Pour les connaissances CSS plus avancées, lisez notre livre CSS Master, 3e édition .

FAQ sur la création de pages conviviales avec CSS

La création d'une feuille de styles d'impression CSS est importante pour contrôler l'apparence des pages Web lorsqu'elles sont imprimées. Terminons en couvrant certaines des questions fréquemment posées sur la façon de créer des pages adaptées à l'imprimante avec CSS.

Qu'est-ce que CSS pour l'impression?

Il est possible d'imprimer des pages Web directement à partir de votre navigateur, mais une page Web imprimée ne ressemblera souvent pas à la page que vous voyez à l'écran. Les pages Web sont stylisées avec CSS, et le CSS peut également être utilisé pour fournir un style pour la page imprimée. Cependant, les styles de pages Web ne se traduisent généralement pas bien en imprime, il est donc important d'écrire des styles CSS spécifiquement pour la page imprimée. CSS for Print est un ensemble de styles spécialement conçus pour aider les imprimantes à formater la disposition de la page imprimée.

Comment puis-je utiliser CSS pour imprimer?

La page Web CSS s'appliquera automatiquement à la version imprimée d'une page Web, mais souvent avec des résultats inattendus ou indésirables. CSS for Print reconnaît les contraintes uniques de la page imprimée, contrairement à l'environnement de navigateur plus flexible. La définition de styles d'impression implique de réfléchir à la façon dont les éléments seront mieux présentés sur une page imprimée. Cela peut inclure la cachette d'éléments qui ne sont pas pertinents pour l'impression, tels que les menus et autres, les liens de style d'une manière qui rend l'URL visible sur la page imprimée et en supprimant des images d'arrière-plan et des couleurs de police qui peuvent ne pas être pertinentes pour une imprimée version de la page Web.

comment puis-je configurer une feuille de styles d'impression CSS?

Il existe deux façons de base de servir les styles d'impression dans CSS: via une feuille de style séparée ou via une requête multimédia. Les styles d'impression CSS peuvent être stockés dans une feuille de style séparée liée à une page Web de la section du document:



Les styles d'impression CSS peuvent être placés dans une feuille de style, ainsi que des styles pour d'autres médias, via des requêtes multimédias:

@media print {
/ * Styles d'impression ici * /
}

Quels sont les cas d'utilisation courants pour les feuilles de styles d'impression?

Les cas d'utilisation courants pour les styles de styles d'impression incluent:
- ajuster les tailles de police et les styles pour la lisibilité sur le papier.
- supprimer ou cacher certains éléments qui ne sont pas pertinents lorsqu'ils sont imprimés (tels que les menus de navigation).
- s'assurer que les images et les couleurs d'arrière-plan n'impriment pas par défaut.
- Spécification des pauses de page pour contrôler la façon dont le contenu est divisé entre les pages.

Comment puis-je masquer des éléments spécifiques dans la version imprimée?

Vous pouvez masquer des éléments spécifiques dans la version d'impression à l'aide de CSS en définissant la propriété d'affichage sur nulle.
Par exemple:

@media print {
.hide-on-print {
Affichage: aucun;
}
}

Comment spécifier les pauses de page dans une feuille de style imprimée?

Vous pouvez spécifier des pauses de page à l'aide des propriétés CSS de page et de page-interruption. Par exemple:

@media print {
.page-brisets {
page-briselfant: toujours;
}
}

Puis-je modifier les marges de page pour les documents imprimés?

Oui, vous pouvez modifier les marges de page pour les documents imprimés en utilisant la règle @Page dans votre feuille de style d'impression. Par exemple:

@Page {
marge: 1cm;
}

Comment puis-je m'assurer que les images et les couleurs d'arrière-plan n'impriment pas?

Vous pouvez empêcher les images et les couleurs d'arrière-plan d'imprimer en utilisant les propriétés CSS comme l'arrière-plan-image et la couleur d'arrière-plan avec la valeur aucune dans votre feuille de style d'impression. Par exemple:

@media print {
img {
affiche: aucun;
}

body {
background-color: blanc;
}
}

est-il possible de modifier les styles et tailles de police pour l'impression?

Oui, vous pouvez modifier les styles de police et les tailles pour l'impression en spécifiant différents styles dans votre feuille de style d'impression. Par exemple:

@media print {
body {
font-size: 12pt;
font-family: arial, sans-serif;
}
}

Comment tester ma feuille de style imprimée avant d'imprimer?

Vous pouvez tester votre feuille de style d'impression en utilisant la fonction d'aperçu d'impression de votre navigateur Web. La plupart des navigateurs modernes vous permettent de voir à quoi ressemblera la page lorsqu'il est imprimé sans l'impression.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!