Print stylesheets: making a web page usable on paper and as PDF

Goal

A page that, when printed or saved as PDF, contains the content and nothing else, with readable type, intact tables, visible link targets and page breaks in sensible places.

Prerequisites

Semantic markup (the print rules will address nav, header, footer, aside, main), a browser print preview for testing, and knowledge of the mechanisms MDN's printing guide describes: @media print for print-only rules, the @page at-rule for page dimensions, orientation and margins, beforeprint/afterprint events for adjusting the document around a print request, and window.print() to trigger the dialog.

Steps

1. Add a @media print block at the end of the stylesheet (specificity still applies). Hide chrome: nav, header, footer, aside, .toolbar, button { display: none }; remove fixed and sticky positioning, which otherwise repeats on every page.
2. Reset the page: white background, black text, a serif or the body font at a size chosen for paper, max-width: none on the content column so it uses the page width.
3. Expand what the screen hides: open details elements, show all tab panels and accordion bodies, and print truncated text in full. Use the beforeprint event where CSS cannot reach (e.g. virtualised lists that only render visible rows).
4. Show link targets: a[href^="http"]::after { content: " (" attr(href) ")" }, excluding internal anchors and links whose text is already the URL. Show abbr titles the same way if they matter.
5. Control breaks: break-inside: avoid on tables, figures, code blocks and card-like groups; break-after: avoid on headings so they are not orphaned at a page bottom; break-before: page before major sections when appropriate; keep thead at its default display: table-header-group (do not override it), because print engines may repeat header rows on each page a table spans.
6. Set @page { size: A4; margin: 2cm } (or letter), and consider @page :first for a different first-page margin.
7. Colour: browsers commonly drop background colours and images when printing; where a background carries meaning (status chips, syntax highlighting), set print-color-adjust: exact on that element only, and give the rest a border or text label instead.
8. Test in print preview across two browsers, in both portrait and landscape, and once as "save as PDF"; check page count and that nothing important was hidden by an over-broad selector.

Expected result

Printing produces a compact document with all content, no navigation, readable code and tables, and URLs a reader can type from paper.

Limits and test basis

Behaviour follows the cited MDN documentation; page-break support and @page features vary between engines, and headless PDF generators have their own defaults. Interactive content (maps, charts drawn on canvas) needs a static fallback image supplied separately.

Hide the site's chrome, not every header

header, footer and aside are scoped to their nearest section, so a bare header { display: none } also removes an article's title block, a section's footnotes and a quotation's attribution. Target the page-level chrome by position or class instead:

@media print {
  body > header, body > footer, body > nav,
  .site-sidebar, .toolbar { display: none; }
  article header, article footer { display: block; }
}

Keep buttons that show state (a pressed toggle, the selected tab) and hide only controls with no printed meaning. Then run step 8 with the question reversed: list what the print view is supposed to contain and confirm each item is present, rather than looking for what is missing.