使用::before 與 ::after來製作可列印的logo圖片

列印LOGO解決方案

網頁設計一直以來都存在著一個很多人都遇到的問題,就是LOGO圖片究竟該不該放到HTML原始碼中?若是放在HTML中,那麼HTML原始碼就增加了一段因為「視覺需要」而添加的原始碼,這跟我們希望把結構與視覺分離的目的是悖離的,倘若放置在CSS中並使用背景圖片的設計方式,則在USER列印畫面時,由於瀏覽器預設是不列印背景影像與色彩的,所以LOGO將無法被列印出來,長久以來設計師不斷的希望能夠將視覺設計與文件結構分離,使用CSS  &HTML技術可以完美的達到此目的,卻因為瀏覽器預設不會列印網頁的背景色彩與圖片的這個問題,導致網頁設計師在設計上總是有此一矛盾現象,將圖片置入HTML與不置入HTML的設計師則分成了兩派,且爭論仍舊存在,直到現在Amos有了完美的解決方案。

現在您可以使用CSS的::before與::after偽類別選取器來為您的網頁設定可列印的LOGO圖片,CSS早在CSS2.0的版本就提供了:before與:after偽類別選取器,到了CSS3.0時修改了此選取器的撰寫方式,就是在選取器的前方多加了一個冒號(:),雖然改了撰寫方式,但是功能卻沒有改變喔,不過由於此選取器制定出來的那個時期仍舊是IE6當道的時代,而聰明且佛心的IE6卻不認識此選取器,讓網頁設計師可以少記幾個選取器,導致許多的網頁設計師都沒有用過:before與:after這兩個選取器。

使用::before或::after選取器時,您需要搭配content屬性以及url屬性值才能設計出可以被列印出來的LOGO,基本語法如下:

最後呈現出來的效果就會像下面這樣

使用before與after製作的標題圖片

而列印出來則會變成如此(為了環保,列印成PDF)

使用:before製作的logo圖片,列印結果

但是LOGO出來了,原本網站標題的文字怎麼辦?隱藏文字的方法很多,你可以多加一層span把文字包起來做縮排,或者直接設定標題的寬度與高度,讓超過寬度的標題文字用overflow隱藏起來,但是就是千萬不要設定display:none或者是hidden,Amos要提醒您,使用display:none這樣的作法對於搜尋引擎是會扣分的喔,可千萬不能使用。

哪些瀏覽器不能使用?

是CSS3的選取器,所以舊版的IE是不支援的,若要讓舊版IE能夠支援的話,你可以使用 :before 或 :after 這兩個CSS2的選取器,但是要注意IE7 & IE8不支援這兩個選取器,所以若要讓這兩個笨蛋瀏覽器也能使用的話,你可以加掛一個ie8.js的外掛,讓這兩個瀏覽器都能正常顯示喔,

如果以上方式有幫助您解決了問題,歡迎留言告知Amos喔~謝謝您^^
內文若有錯誤還請不吝指正,謝謝。