Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

CSS print styles: preserve the record and remove screen-only controls

Last updated: 5 Oct 20265 min read
tutorial
BeginnerBy AITrove Editorial

A print stylesheet applies rules when the document is printed or previewed for print. It changes presentation; it does not validate the record or create a PDF archive policy.

How the rule works

An incident report should print with its case number, finding, and source links in readable order. Navigation controls and floating action bars can be hidden, while the article stays visible and breaks across pages sensibly. A link's destination may not be obvious on paper, so important references need readable text in the document itself. Background colors may be omitted by the printer; use black text and borders where needed. Test print preview with long tables and more than one page, not just the first sheet.

css
@media print {
  .site-navigation, .report-actions { display: none; }
  .incident-report { color: #000; background: #fff; max-inline-size: none; }
  .incident-report h2 { break-after: avoid; }
  .incident-report table { break-inside: auto; }
}

Cost and verification

Print rules add CSS bytes but no extra request when kept in the main stylesheet. The bigger cost is maintaining a second rendering context and testing page breaks. Do not hide a link list if it is the only record of supporting documents. Print preview is not proof that a later printer or PDF pipeline preserves colors and margins; check the final output when the report is operationally important.

Common Mistakes

  • Do not hide evidence merely because it is awkward to print.
  • Do not depend on background color to mark a held case on paper.
  • Do not assume one-page preview proves multi-page tables are readable.

Connected lessons

Extend this decision

Related behavior

Further rendering decisions

Further rendering decisions

Further rendering decisions

css
interaction
web
Storage details