Manuel Matuzovic 重新发现了 @media print {} 样式。
他在本文中首先展示了 Aaron Gustafson 的一条推文，其中 Indiegogo 的网站在打印时非常糟糕。它看起来基本上就像一个根本没有加载任何 CSS 的网站，这可能是因为他们将所有样式都包装在 @media screen {} 中，或者使用 <link rel="stylesheet" media="screen" href="style.css">。如果您打算对打印样式采用“从头开始”的方法，这很好。我通常更喜欢不限定屏幕样式，而只使用几个打印范围的覆盖 (“黑名单”而不是“白名单”)。
Manuel 指出，您可以使用 Chrome DevTools 模拟打印媒体，这非常有用！这是一个简短的视频演示
Indiegogo 网站的该屏幕截图也表明，如果您在 HTML 中不包含任何大小信息，内联 SVG（或任何图像，我想）可能会变得有点疯狂。这促使了以下提示
好主意
<svg width=“20px” height=“20px” … >
您可以轻松地使用 CSS 覆盖它，并且可以防止……（见图片）https://#/TcgKHL0R60
— Chris Coyier (@chriscoyier) 2016年11月17日
即使 CSS 加载并正确调整了这些 SVG 的大小，在开始时也可能有助于使它们的大小大致正确，以避免 Sara Soueidan 所称的 “未设置样式的 SVG 闪烁”。
请记住，诸如 width 和 height 之类的属性非常容易在 CSS 中被覆盖。在 CSS 中设置它们将覆盖它们。它们不像内联样式。
Manuel 的文章中包含了其他 12 个关于在打印样式表中包含的内容的实用技巧，您可能不会想到：防止孤行，强制颜色正确打印，显示原本隐藏的内容，为无法正确打印的内容提供备用内容等。其他一些技巧 在这里。