從瀏覽器打印時檢測背景圖像和背景顏色支持

Question

從瀏覽器打印頁面時，它指的是用media="print"聲明的print.css樣式表。 瀏覽器禁用一些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>元素，使用display: none隱藏，然后使用display: block （或inline ）在打印CSS中display: block它們。

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

Answer 2

不確定第一點，但要在打印模式下檢測瀏覽器，您可以像屏幕一樣。 使用Modernizr並有條件地為支持的功能添加類，然后制定有針對性的CSS規則，如：

body.whateverfeature .yourrule { }

或者如果它只是你要測試的IE，請使用像h5bp這樣的東西：

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