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

问题描述:

从浏览器打印页面时,它指的是media="print"声明的print.css样式表。浏览器禁用了一些CSS规则,如background-imagebackground-color,一些浏览器可以选择启用它们。从浏览器打印时检测背景图像和背景色支持

正如this answer所述,不可能从页面代码中覆盖此行为。

我对这个两个问题:

  • 是否有关于这些打印规则的任何文件或很好的参考?例如:
    • 哪些CSS规则被禁用?
    • 打印前,Javascript可以在页面上做些什么?
  • 有没有办法在Javascript中打印模式下检测浏览器,然后制作优雅的降级系统?

浏览器如何打印页面是一个黑盒子;我一直无法找到任何明确的参考。

所有主流浏览器都有打印选项,可将网页“缩小到适合”网页(默认情况下启用),并打印背景图像和颜色(默认情况下禁用)。大多数用户会保留这些默认值,如果他们知道这些选项存在的话。我没有看到浏览器在打印时“禁用”任何其他CSS规则。

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

打印所需要的大多数的调整可以通过CSS处理(无论是在单独的打印样式表或在你的主样式表一@media print { ... }块):

  • CSS-Discuss Wiki有多少你可以一个良好的网页通过CSS控制。

  • 我建议看看HTML5 Boilerplate的打印样式是一个很好的起点。

  • 如果有必须打印,您可以在您的网页<img>元素,隐藏着display: none,然后让他们在你的打印CSS display: block(或inline)可见的背景图像。

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

不确定第一点,但要在打印模式下检测浏览器,您可以执行与屏幕相同的操作。无论是使用Modernizr的和有条件地添加类为支持的功能,然后进行有针对性的CSS规则,如:

body.whateverfeature .yourrule { } 

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

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

+0

这不是我所要求的。我需要一种方式来检测打印模式下的浏览器(是的,print.css会工作,但我需要修改DOM和CSS不能这样做)。 IE中有一个'onbeforeprint'事件,但是在其他浏览器中是否有相同的内容?这是一个令谷歌愚蠢的主题:S –