2012-05-17 34 views
6

從瀏覽器打印頁面時,它指的是media="print"聲明的print.css樣式表。瀏覽器禁用了一些CSS規則,如background-imagebackground-color,一些瀏覽器可以選擇啓用它們。從瀏覽器打印時檢測背景圖像和背景色支持

正如this answer所述,不可能從頁面代碼中覆蓋此行爲。

我對這個兩個問題:

  • 是否有關於這些打印規則的任何文件或很好的參考?例如:
    • 哪些CSS規則被禁用?
    • 打印前,Javascript可以在頁面上做些什麼?
  • 有沒有辦法在Javascript中打印模式下檢測瀏覽器,然後製作優雅的降級系統?

回答

3

瀏覽器如何打印頁面是一個黑盒子;我一直無法找到任何明確的參考。

所有主流瀏覽器都有打印選項,可將網頁「縮小到適合」網頁(默認情況下啓用),並打印背景圖像和顏色(默認情況下禁用)。大多數用戶會保留這些默認值,如果他們知道這些選項存在的話。我沒有看到瀏覽器在打印時「禁用」任何其他CSS規則。

Firefox和IE支持onbeforeprintonafterprint事件,因此您可以檢測何時使用JavaScript進行打印,但顯然這不是跨瀏覽器的解決方案。

打印所需要的大多數的調整可以通過CSS處理(無論是在單獨的打印樣式表或在你的主樣式表一@media print { ... }塊):

  • CSS-Discuss Wiki有多少你可以一個良好的網頁通過CSS控制。

  • 我建議看看HTML5 Boilerplate的打印樣式是一個很好的起點。

  • 如果有必須打印,您可以在您的網頁<img>元素,隱藏着display: none,然後讓他們在你的打印CSS display: block(或inline)可見的背景圖像。

如果您需要大量修改頁面進行打印,我建議您提供一個單獨的僅打印版本的頁面,而不是嘗試使用JavaScript進行調整。

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]--> 

+0

這不是我所要求的。我需要一種方式來檢測打印模式下的瀏覽器(是的,print.css會工作,但我需要修改DOM和CSS不能這樣做)。 IE中有一個'onbeforeprint'事件,但是在其他瀏覽器中是否有相同的內容?這是一個令谷歌愚蠢的主題:S –