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

时间:2012-05-17 22:38:57

标签: javascript css browser printing graceful-degradation

从浏览器打印页面时,它指的是使用print.css声明的media="print"样式表。浏览器会禁用某些CSS规则,例如background-imagebackground-color,某些浏览器可以选择启用它们。

正如this answer中所述,无法从页面代码中覆盖此行为。

我有两个问题:

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

2 个答案:

答案 0 :(得分:4)

浏览器如何打印页面有点像黑盒子;我找不到任何明确的参考资料。

所有主流浏览器都具有“缩小以适应”网页到纸页(默认启用)以及打印背景图像和颜色(默认情况下禁用)的打印选项。如果他们甚至意识到存在这些选项,则大多数用户将按原样保留这些默认值。我没有看到浏览器在打印时“禁用”任何其他CSS规则。

Firefox和IE支持onbeforeprintonafterprint事件,因此您可以检测JavaScript何时打印,但显然这不是跨浏览器解决方案。

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

  • CSS-Discuss Wiki有一个关于你可以通过CSS控制多少的页面。

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

  • 如果您有必须打印的背景图片,则可以在页面中加入<img>元素,隐藏display: none,然后使用display: block(或{ {1}})在你的打印CSS中。

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

答案 1 :(得分:0)

不确定第一点,但要在打印模式下检测浏览器,您可以像屏幕一样。使用Modernizr并有条件地为支持的功能添加类,然后制定有针对性的CSS规则,如:

body.whateverfeature .yourrule { }

或者如果它只是你要测试的IE,请使用类似h5bp的内容:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->