Print Styles in 2026: Yes, People Still Print Your Invoices

"Nobody prints web pages anymore" - except every order confirmation, boarding pass, recipe, contract and expense receipt, plus everything saved as PDF via the print dialog, which is the same rendering path. Print CSS is twenty minutes of work that thousands of your users will silently encounter.

The baseline block

@media print {
    /* 1. Remove the interface - paper has no nav */
    header, footer, nav, aside, .toast, .cookie-banner, button, video {
        display: none !important;
    }

    /* 2. Reset the canvas - toner is not a dark-mode device */
    body {
        background: #fff !important;
        color: #000;
        font-size: 11pt;            /* points - the native print unit */
    }

    /* 3. Let content use the page */
    main, .container {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    a { color: #000; text-decoration: underline; }
}

Page breaks: the part that reads as craftsmanship

@media print {
    h2, h3        { break-after: avoid; }     /* no headings orphaned at page bottom */
    tr, li, figure, .invoice-row { break-inside: avoid; }
    .order-summary { break-before: page; }    /* big sections start fresh pages */
}

A heading stranded alone at the bottom of page 1, its content on page 2, is the signature of a site that never considered print. Three declarations prevent it. (The old page-break-* spellings are aliases; the modern break-* names work everywhere current.)

The clever bits

/* Print the URLs - links are useless on paper otherwise */
@media print {
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }
    /* ...but not for internal anchors or the logo link */
    a[href^="#"]::after, .logo a::after { content: ""; }
}

@page {
    margin: 18mm 15mm;              /* consistent margins, overriding browser defaults */
}

.receipt-header {
    print-color-adjust: exact;      /* force the brand-color background to actually print */
}

That attr(href) trick (the same attr() from CSS-only tooltips) turns hyperlinks into readable citations. print-color-adjust: exact opts specific elements out of the browser's ink-saving background removal - use it for elements where color carries meaning (status badges, brand headers), not decorative bulk.

Test without killing trees

DevTools > Rendering panel > "Emulate CSS media type: print" renders the print styles live in the viewport. The print dialog's PDF preview is the full-fidelity check, page breaks included. Two minutes per iteration, no paper.

For a store, the order confirmation page is the priority target - customers print and file those. It's the cheapest "this site is well-made" signal you can ship, precisely because so few sites bother.