CSS 製作友善列印(print friendly)
Updated
•1 min read
在一些以文字內容為主的網站，常常會看到「友善列印」(print friendly) 的功能， 這功能提供使用者可以方便列印文字內容，不想印出來的導覽列啦、選單啦，通通都給它變不見。
傳統的作法是用 javascript 把本文送去一個新的視窗，再來進行列印， 但現在透過 CSS 的 Media Queries 不需要任何一行程式碼，就能完成列印時的頁面設定喔！
只要在 CSS 裡面加上屬於 print 的設定：
@media print {
*{
background: none;
color: #000;
}
裡面的規則和一般 CSS 相同，小白個人認為適合列印有幾個原則：
- 背景要透明，才不會浪費碳粉
- 字的顏色要黑，字體要適中( 小白喜歡內文 12px ~ 16px)
- 本文的寬度要滿版才不浪費空間
喔耶～打完收工！欸，巴特⋯⋯
還要在文章最後加上版權聲明啊！？
為了不要動到頁面的結構，小白偷吃步用了 ::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 的時候才顯示。
這樣版面的調整會更有彈性喔～
