Stylesheet · #423

Guides that survive a printer

The 91 guides are the part of this site people actually print, and the dark theme prints as a page of black rectangles. The block below is read out of the stylesheet this site compiles — not a copy of it, the same bytes — and it applies to every route, so the copy on this page and the CSS in the build cannot disagree.

Download learn-print.css The guides →

The @media print block (1.3 KB, complete)

@media print {
  /* Chrome, decoration and navigation are noise on paper. */
  header nav,
  footer {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
    color: #111 !important;
  }

  /* The dark theme's panels become rules on white, not filled boxes. */
  .bg-panel,
  .bg-bg\/70,
  .card-hover {
    background: #fff !important;
    border-color: #d4d4d8 !important;
    box-shadow: none !important;
  }

  /* Ambient motion costs ink and battery on paper. */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    backdrop-filter: none !important;
  }

  /* Gradient text prints as a muddy grey; use solid black. */
  .text-gradient {
    background: none !important;
    -webkit-text-fill-color: #111 !important;
    color: #111 !important;
  }

  /* Links keep their targets, because a printed link without a URL is a dead end. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }

  /* Code blocks need to survive the page break. */
  pre,
  blockquote {
    break-inside: avoid;
    border: 1px solid #d4d4d8 !important;
    background: #fafafa !important;
    color: #111 !important;
  }

  h1, h2, h3 {
    break-after: avoid;
  }

  @page {
    margin: 18mm;
  }
}

What each rule is for

Navigation and the footer disappear: on paper they are furniture, and printed links to routes the reader cannot click are worse than nothing.
Panels and cards become rules on white instead of filled boxes, because a dark UI prints as toner.
Animations, transitions and backdrop blurs are switched off — they cost ink and change nothing on a page that is not going to move.
External links print their URL after the text, which is the one place a print stylesheet can add information rather than remove it.
Code blocks avoid page breaks, and headings refuse to be the last line on a page.

What a stylesheet cannot fix

Interactive demos. A printed page shows the placeholder or the first frame — the animation is gone, and no rule brings it back.
Page numbering and running headers. Those need a PDF pipeline, and this is a browser stylesheet.
The palette. Text prints black on white by rule, so the 14 colour tokens in the design system are simply not part of a printed page.