The print media query is the oldest responsive design primitive there is, and most sites leave it empty, so Ctrl+P ships header bars, cookie banners and an ink-wasting dark background. Five rules fix your whole site for paper.

@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; }
}

The five rules that pay for themselves

  • Hide navigation, footer links, and any overlay chrome: paper readers navigate by eye, not click.
  • Force light values: dark mode is a screen preference, and misplaced onto paper it burns ink and gets grainy.
  • Append link targets on article text links: a printed citation you cannot click is a fake citation; attr(href) makes it real.
  • Expand collapsible content, the same details panels from the zero-JS accordions: the panels hold the answer and disappear silently on paper without this rule.
  • Avoid fixed-position elements; page-break-inside: avoid on cards and figures keeps a table whole instead of snapping it across sheets.

The review that makes it real

  1. Print the homepage, an article, and the search page to an actual PDF; three pages are what most sites look like empty.
  2. Check ink coverage: big solid areas get a 'no print backgrounds' default in most browsers, so subtle tints may vanish without being missed.
  3. Test the details-expansion rule against every collapsible component on the site, not just one.
  4. Consider the page-break properties for any card or quote box; five minutes here decides whether a recipe spans two sheets.

The gacor fairness angle: someone in a dead-zone with a Bluetooth thermal receipt printer is a real reader too, and the print stylesheet is how your site respects them for the cost of one media block.