La requête sur les médias imprimés est la plus ancienne primitive de conception réactive qui existe, et la plupart des sites la laissent vide, donc Ctrl+P fournit des barres d'en-tête, des bannières de cookies et un arrière-plan sombre qui gaspille de l'encre. Cinq règles fixent l'ensemble de votre site au papier.

@media print {
  header nav, footer, .cookie, aside { display: none; }

  body { background: white; color: black; }
  a { text-decoration: none; }
  article a::after { content: " (" attr(href) ")";
    font-size: 0.85em; }

  details { display: block; }
  details > *:not(summary) { display: block; }
}

Les cinq règles qui s'amortissent

  • Masquez la navigation, les liens de pied de page et tout chrome superposé : les lecteurs papier naviguent à l'œil nu et non en cliquant.
  • Forcer les valeurs de lumière : le mode sombre est une préférence de l'écran et, égaré sur le papier, il brûle de l'encre et devient granuleux.
  • Ajoutez des cibles de lien sur les liens de texte d'article : une citation imprimée sur laquelle vous ne pouvez pas cliquer est une fausse citation ; attr(href) le rend réel.
  • Développez le contenu pliable, les mêmes panneaux de détails que les accordéons zéro-JS : les panneaux contiennent la réponse et disparaissent silencieusement sur le papier sans cette règle.
  • Évitez les éléments à position fixe ; saut de page à l'intérieur : éviter les cartes et les figures pour conserver un tableau entier au lieu de le répartir sur les feuilles.

La revue qui le rend réel

  1. Imprimez la page d'accueil, un article et la page de recherche dans un véritable PDF ; trois pages sont ce que la plupart des sites semblent vides.
  2. Vérifiez la couverture d'encre : les grandes zones unies sont définies par défaut comme "aucun arrière-plan d'impression" dans la plupart des navigateurs, de sorte que les teintes subtiles peuvent disparaître sans être manquées.
  3. Testez la règle d'expansion des détails sur chaque composant réductible du site, pas un seul.
  4. Tenez compte des propriétés de saut de page de toute carte ou zone de devis ; cinq minutes ici décident si une recette s'étend sur deux feuilles.

L'angle d'équité très intéressant : quelqu'un dans une zone morte avec une imprimante de reçus thermique Bluetooth est également un vrai lecteur, et la feuille de style d'impression est la manière dont votre site le respecte pour le coût d'un bloc multimédia.