# Print stylesheet or print-friendly layout is available

- **Pattern:** `ab-001933` (`mobile-responsiveness.mobile-ux.print-stylesheet`)
- **Severity:** info
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001933
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001933)

## Why it matters

Without a print stylesheet, printing an invoice, receipt, blog post, or documentation page produces output with the full site chrome: navigation, hamburger menus, footers, chat widgets, and hover-state buttons — all wasting ink and pushing the content onto extra pages. Users expecting to save a clean PDF or print a receipt get a page of noise. This is low-severity because most web apps don't ship printable surfaces, but every content-heavy site (docs, blogs, transactional receipts) benefits.

## Severity rationale

Info because printing is rare but broken print output makes users feel the site is unpolished where it matters.

## Remediation

Add a `@media print` block to `src/app/globals.css` that hides UI chrome and normalizes typography for paper. In Tailwind, use the `print:` variant on elements that should not appear in print output.

```css
@media print {
  nav, header, footer, .sidebar, button, .no-print { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a[href]::after { content: ' (' attr(href) ')'; }
}
```

## Detection

- **ID:** `print-stylesheet`
- **Severity:** `info`
- **Note:** Print stylesheets are included in this audit because `@media print` is part of the CSS media query landscape. Projects that handle responsive breakpoints with media queries should also consider print media. This check is severity `info` to reflect its supplementary nature.
- **What to look for:** Check for `@media print` rules in CSS files, a linked print stylesheet (`<link rel="stylesheet" media="print">`), or print-specific Tailwind classes (`print:` variant). Check if navigation, sidebars, and interactive elements would be hidden in print mode.
- **Pass criteria:** Count all `@media print` rule blocks and `<link rel="stylesheet" media="print">` references in the project. At least 1 print CSS mechanism must exist. The print styles must hide at least 2 non-content element types (navigation, buttons, sidebars, footers, or decorative elements). Count all Tailwind `print:` variant usages if present.
- **Fail criteria:** 0 print CSS mechanisms found — no `@media print` rules, no print stylesheet link, and no Tailwind `print:` variants. Printing the page would include navigation, buttons, and all interactive UI chrome.
- **Skip (N/A) when:** Project is clearly a web application (SaaS dashboard, admin panel, interactive tool) where printing is not a reasonable use case. Skip if there are no content-focused pages (blog, documentation, invoice, report) that users would reasonably want to print — 0 printable content pages found.
- **Detail on fail:** `"0 print CSS mechanisms found — no @media print rules, no print stylesheet link, and no Tailwind print: variants — printing will include all UI chrome"`.
- **Remediation:**

  ```css
  @media print {
    nav, header, footer, .sidebar, button, .no-print { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    a[href]::after { content: ' (' attr(href) ')'; }
  }
  ```

  In Tailwind:

  ```html
  <nav class="print:hidden">...</nav>
  ```

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001933