White Bunny's Notes

CSS 製作友善列印(print friendly)

White Bunny's photo
White Bunny
·

1 min read

CSS 製作友善列印(print friendly)

在一些以文字內容為主的網站，常常會看到「友善列印」(print friendly) 的功能， 這功能提供使用者可以方便列印文字內容，不想印出來的導覽列啦、選單啦，通通都給它變不見。

傳統的作法是用 javascript 把本文送去一個新的視窗，再來進行列印， 但現在透過 CSS 的 Media Queries 不需要任何一行程式碼，就能完成列印時的頁面設定喔！

只要在 CSS 裡面加上屬於 print 的設定：

  @media print {
      *{
        background: none;
        color: #000;
      }

裡面的規則和一般 CSS 相同，小白個人認為適合列印有幾個原則：

  1. 背景要透明，才不會浪費碳粉
  2. 字的顏色要黑，字體要適中( 小白喜歡內文 12px ~ 16px)
  3. 本文的寬度要滿版才不浪費空間

喔耶～打完收工！欸，巴特⋯⋯

還要在文章最後加上版權聲明啊！？

為了不要動到頁面的結構，小白偷吃步用了 ::after 這個偽元素，直接在本文(#main)後面加上文字：

  @media print {
  ...
  #main::after{
      content: 'Copyright © 網路小小白'; 
      margin-top: 5em;
      display: block;
  }

在這裡天兵小白一開始沒設 display: block，結果 margin 沒反應啊啊啊啊～ 多虧哈囉小妖精解答，差點被自己笨死 QQ

好囉，好像完成了吧，巴特，又是那個巴特！

好了喔？那加個 logo 來看看呀？

查了一下 CSS content 的用法，小白還是不知道怎麼同時放文字和圖片的飯粒啊啊啊啊～

還好CSS之神小鳥胃伸出圓手，原來content 裡要同時放文字和圖片的話，中間要用空格隔開：

content: url("ooo.png") 'Copyright © 網路小小白';

如此圖片就能正常顯示了，呼，這次真的打完收工。

最後分享小妖精提供的另一個作法：

直接將版權聲明的內容做成一個隱藏的 div，要 print 的時候才顯示。

這樣版面的調整會更有彈性喔～

參考資料

CSSCSS3