列印樣式CSS的技巧和要點

發表於2013-08-02
CSS

不經過任何處理而直接列印網站上的頁面會得到一個不理想的效果。

我們WEB開發人員可以簡單採用幾個要點來使之達到較為合適的效果：

  • 使用響應式佈局設定列印的效果
  • 在合適的時候列印背景圖片和顏色
  • 新增顯示的網址或頁面連結，以供參考
  • 使用css filter 提高列印的圖形效果

針對列印的樣式，而不是螢幕顯示樣式

首先，我們需要使用媒體查詢（media query）針對列印樣式設定。

重新針對列印寫CSS樣式是沒有必要的，我們只需要針對差異設定列印的樣式覆蓋掉之前的預設樣式。

大多數的瀏覽器會自動根據列印更改顏色，以節省列印原料，但是我們還是儘可能的手工設定一下。

為了達到最佳效果，使顏色清晰明瞭，我們至少需要包含一下基本的列印樣式。

對於列印，大多數情況下我們不需要列印整個頁面，只需要列印一個簡潔的能夠突出需要資訊的頁面，那麼我們將不相關的部分隱藏掉（如：導航條、背景圖片）。

在編寫列印樣式表的時候，你要注意要使用釐米或者英寸作為單位而不是螢幕畫素單位，實際的單位對列印非常有用。

為了保證列印樣式有用，寫CSS樣式使列印的內容距離紙張邊緣，看起來更好，需要使用 @page 這個語法：

為了保證不被跨頁列印，如一個標題和內容在頁面底部被分開：

另一中情況是要防止圖片過寬而超出紙張邊緣：

第三個要點是確保 articles 文章標籤的內容，在新的一頁開始：

最後，還要注意列表和圖片不被分開在不同的頁：

儘管這些還不完美，不過這是一個良好的開始

背景圖片和顏色

對於一些網站，顏色和背景圖還是非常必要需要遵循的。如果使用者是在 webkit 核心瀏覽器上列印的話，我們可以強制印表機列印螢幕上所看到的顏色（即強制在列印頁面上出現任何的背景圖和顏色），一般來說彩色印表機可以做到這點，我們需要一個單獨的媒體查詢：

遺憾的是，這不能馬上應用於firefox opera 和IE.

擴充套件列印樣式裡的超連結

如果直接列印，超連結將只是一點文字，而不會出現連結的網址，這樣來說，是沒有意義的。

我們可以將url連結展示在列印的頁面上，我們可以使用:after偽類來實現而不影響周圍的元素佈局：

看下面這是HTML:

下面是顯示的效果：

其中一個問題是，列印頁面上的錨文字和影像連結也將擴大。我們可以很好的用CSS規則修復。

連結周圍影像是比較麻煩的，理想的情況是影像周圍的連結將有一個class。

CSS選擇器實現將很簡單：

所有這些方法都假定使用者將繼續通過手工輸入網址。 一個更好的解決方案是通過提供匹配的QR碼的數字版本的頁面更容易訪問。

列印連結二維碼使之更容易訪問

如下圖：

我們需要使用谷歌 圖形API來實現：

  • 我們希望谷歌提供的圖表資訊（ qr ，在我們的例子中）;
  • 呈現大小的的QR印記，以畫素為單位;
  • URL進行編碼;
  • 使用的字元編碼形式。

通常我們會在頁面頂部的一個標題元素關聯的URL：

為了創造預期的列印結果，我們將提供足夠的間距給H1用來放置二維碼，因為這個二維碼需要增加到每個頁面，我們需要增加一條CSS規則：

這個方法的缺點是使開發者每個元素都請求一個API。如果你的主機是PHP，則可以自動生成當前頁面的URL:

給wordpress的樣式：

使用CSS3 Filter 提高列印的質量

瀏覽器通常會列印出橫幅影像，特別是如果有問題的旗幟在黑暗的背景是白色的：

CSS3的過濾器做什麼，你所期望的 – 在頭影像反色，變成黑白色，反之亦然 – 但它們只能在Chrome和Safari。 為了彌補Firefox，我們需要一種不同的方法 – 相當於過濾器作為一個單獨的SVG檔案寫：

從理論上講，你可以使用一個CSS sprite 之間進行切換不同版本的列印的標誌，但是這將意味著增加一倍的檔案大小可能沒有什麼好處。 相反，我建議使用CSS過濾器（和SVG當量，為Firefox）的反轉影像之前，列印的頁面： 印刷兩種形式的標誌（即α-蒙面PNG或純黑色背景）的結果是：

 

總結

由於列印不方便跟蹤，而且缺乏重視。在WEB開發中也往往被忽略，大多數時候我們只閱讀線上的網頁，而不是列印出來。 另一方面即使人們只是偶爾需要列印的東西從網站，這將是理想的，如果頁面設計適合的印表機，就像現代的網站適應各種螢幕尺寸和裝置。 列印的自適應設計，可用性和可訪問性和Web開發的重要組成部分，同樣應考慮的另一個方面。 處理列印自適應設計的另一個方面，我們實現更多的網站使用者的需求-並在同一時間，節省墨水，紙張和其他資源，所有這些都是重要的方面可持續發展的設計 。

相關文章