打印样式表：让网页在纸面和 PDF 中同样可用

目标

让页面在打印或另存为 PDF 时，只包含内容本身、不多不少，字体清晰可读，表格完整不破损，链接目标可见，分页也落在合理的位置。

前提条件

语义化标记（打印规则会针对 nav、header、footer、aside、main 这些元素）；用于测试的浏览器打印预览功能；以及对 MDN 打印指南中所述机制的了解：@media print 用于编写仅打印时生效的规则，@page 这条 at-rule 用于设置页面尺寸、方向和页边距，beforeprint/afterprint 事件用于在打印请求前后调整文档，window.print() 用于触发打印对话框。

步骤

1. 在样式表末尾添加一个 @media print 代码块（CSS 优先级规则依然适用）。隐藏界面外壳（chrome）：nav, header, footer, aside, .toolbar, button { display: none }；去掉 fixed 和 sticky 定位，否则它们会在每一页上重复出现。
2. 重置页面样式：白色背景、黑色文字，使用衬线字体或正文字体，并选择适合纸面的字号；给内容列设置 max-width: none，使其占满页面宽度。
3. 展开屏幕上被隐藏的内容：展开所有 details 元素，显示所有标签页面板和折叠面板的内容，并把被截断的文字完整打印出来。对于 CSS 无法触及的情况（例如只渲染可见行的虚拟化列表），使用 beforeprint 事件来处理。
4. 显示链接目标地址：a[href^="http"]::after { content: " (" attr(href) ")" }，但排除内部锚点链接，以及链接文字本身就已经是 URL 的情况。如果 abbr 元素的 title 有实际意义，也用同样的方式显示出来。
5. 控制分页：在表格、图表、代码块和卡片类分组上使用 break-inside: avoid；在标题上使用 break-after: avoid，避免标题孤零零地留在页面底部；在合适的地方于主要章节前使用 break-before: page；保留 thead 默认的 display: table-header-group（不要覆盖它），因为打印引擎可能会在表格跨越的每一页上重复表头行。
6. 设置 @page { size: A4; margin: 2cm }（或使用 letter），并考虑用 @page :first 为首页设置不同的页边距。
7. 颜色处理：浏览器打印时通常会去掉背景颜色和背景图片；如果某处背景承载着实际含义（例如状态标签、语法高亮），就只在该元素上设置 print-color-adjust: exact，其余地方则改用边框或文字标签来表达。
8. 在两种浏览器的打印预览中分别测试纵向和横向两种方向，并再测试一次「另存为 PDF」；检查页数是否合理，以及是否有重要内容被过于宽泛的选择器误伤隐藏。

预期结果

打印出来的是一份紧凑的文档，包含全部内容、没有导航元素，代码和表格清晰可读，读者还能照着纸面把 URL 抄下来。

限制与验证基础

相关行为依据前述 MDN 文档；不同引擎对分页和 @page 特性的支持程度不同，无头（headless）PDF 生成工具也有各自的默认设置。交互式内容（地图、用 canvas 绘制的图表）需要另外提供一张静态回退图片。

只隐藏站点外壳，不要隐藏所有 header

header、footer 和 aside 的作用范围是离它们最近的 section，所以一条简单粗暴的 header { display: none } 也会连带去掉文章的标题区块、某个 section 的脚注，以及引用的署名。应该改用位置或 class 来定位页面级别的外壳元素：

@media print {
  body > header, body > footer, body > nav,
  .site-sidebar, .toolbar { display: none; }
  article header, article footer { display: block; }
}

保留那些显示状态的按钮（例如已按下的切换按钮、当前选中的标签），只隐藏那些在打印中没有意义的控件。然后把第 8 步反过来再做一遍：先列出打印视图应该包含哪些内容，再逐项确认它们都存在，而不是去找缺了什么。