从浏览器打印时检测背景图像和背景颜色支持

Question

从浏览器打印页面时,它引用print.css声明的样式表media="print".浏览器禁用一些CSS规则像background-image和background-color,一些浏览器选项来启用它们.

正如在这个答案中所说,不可能从页面代码中覆盖此行为.

我有两个问题:

• 有关于这些打印规则的文档或良好参考吗？例如:
  • 哪些CSS规则被禁用？
  • Javascript可以在打印前在页面上执行某些操作吗？
• 有没有办法用Javascript检测打印模式的浏览器,然后制作一个优雅的降级系统？

Answer 1

浏览器如何打印页面有点像黑匣子；我还没有找到任何明确的参考资料。

所有主流浏览器都有打印选项，可以将网页“缩小以适合”纸质页面（默认启用），以及打印背景图像和颜色（默认禁用）。大多数用户会保留这些默认设置，即使他们知道这些选项的存在。我还没有看到浏览器在打印时“禁用”任何其他 CSS 规则。

Firefox 和 IE 支持onbeforeprint和onafterprint事件，因此您可以使用 JavaScript 检测何时发生打印，尽管显然这不是跨浏览器解决方案。

打印所需的大多数调整都可以通过 CSS 处理（在单独的打印样式表中或作为@media print { ... }主样式表中的块）：

• CSS -Discuss Wiki有一个很好的页面，介绍了通过 CSS 可以控制多少。

• 我建议查看HTML5 Boilerplate中的打印样式作为一个很好的起点。

• 如果您有必须打印的背景图像，则可以<img>在页面中包含使用 隐藏的元素，然后在打印 CSS 中使用(或)display: none使它们可见。display: blockinline

如果您需要大量修改页面以进行打印，我建议提供单独的仅打印版本的页面，而不是尝试使用 JavaScript 进行调整。