CSS Output & Performance
Print Styles
Prepare documents for paper and PDF with print media rules, page breaks, and sensible URL treatment. It covers print media queries, page margins, fragmentation, hiding interface chrome, conserving ink, and preserving destination URLs.
Print CSS adapts a document for paged output such as paper or PDF. It should remove controls that have no printed purpose while preserving the content, references, and reading order.
A screen layout assumes continuous scrolling, interactive navigation, and a colored display. Printed output has page boundaries, fixed margins, and no hover or click target. Headings, figures, tables, and code samples therefore need explicit fragmentation guidance and a design that still works without background decoration. This topic also connects with CSS Media Queries and Multi-column Layout.
Remove interface chrome and conserve ink
Example
css
@media print {
nav,
.site-footer,
.no-print {
display: none !important;
}
body {
color: black;
background: white;
font: 11pt/1.45 Georgia, serif;
}
a[href^="http"]::after {
content: " (" attr(href) ")";
overflow-wrap: anywhere;
}
}Control fragmentation
Example
css
@media print {
h2, h3 { break-after: avoid; }
figure, table, pre { break-inside: avoid; }
article { break-before: page; }
}
@page {
margin: 18mm;
}Break rules are requests, not guarantees; the page formatter may still split an oversized box. Preview real content in the browsers your readers use for printing.
Print CSS Reference
| Syntax | Purpose | Example |
|---|---|---|
| @media print | Applies styles only to printed output. | @media print { ... } |
| @page | Configures the page box. | @page { margin: 18mm; } |
| break-inside | Controls fragmentation inside an element. | break-inside: avoid |
| print-color-adjust | Expresses whether printed colors should be preserved. | print-color-adjust: exact |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Print Styles example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
@media print {
nav,
.site-footer,
.no-print {
display: none !important;
}
body {
color: black;
background: white;
font: 11pt/1.45 Georgia, serif;
}
a[href^="http"]::after {
content: " (" attr(href) ")";
overflow-wrap: anywhere;
}
}
@media print {
h2, h3 { break-after: avoid; }
figure, table, pre { break-inside: avoid; }
article { break-before: page; }
}
@page {
margin: 18mm;
}
</style>
</head>
<body>
<main><nav class="no-print">This navigation is hidden when printed.</nav><article><h1>Printable article</h1><p>Open print preview to test the paged layout.</p><p><a href="https://example.com/reference">Reference link</a></p></article></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| @media print | 1 | 12 | 1 | 3 |
| @page | 2 | 12 | 19 | 18.2 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- A printable page should preserve the document’s meaning. Do not hide citations, form results, error messages, or other content merely because it is visually inconvenient.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Print CSS should remove interface chrome while preserving the document’s meaning and references.
Open print preview with realistic long content and check several browsers if printed output matters to the product. Break requests may be ignored when an item cannot fit, so the stylesheet should remain readable even when the formatter must split a large table or code block.