Skip to main content

Geek Rants:為什麼這麼多網站都無法使用打印樣式表?

Geek Rants:為什麼這麼多網站都無法使用打印樣式表?

Geoffrey Carr

人們不得不在網頁上尋找一個“打印”的鏈接或按鈕,這讓我感到驚訝,特別是考慮到有一種神奇的技術可以讓這一步變得不必要。可悲的是,幾乎沒有人使用它,即使它是...... 10歲。

不僅要求額外的打印步驟是愚蠢的,而且使用打印樣式表可以為任何不使用可打印鏈接的人節省一些墨水。當然,有很多人使用print-to-PDF來保存文章以備日後使用,而不會浪費紙張。

什麼是打印樣式表?

大多數網站通過將您帶到另一個頁面來實現其打印功能,該頁面的格式與打印機不同 - 但這實際上並非必要。每個瀏覽器都實現了一種稱為Print Stylesheets的簡單CSS技術,它只是一個文件,用於指定瀏覽器打印頁面時要隱藏的元素。

對於那些不熟悉的人來說,CSS意味著層疊樣式表,而這就是你的瀏覽器如何知道如何將網頁的HTML源代碼格式化為你在屏幕上看到的內容。可以在樣式表中指定字體,顏色,邊框甚至背景圖像中的所有內容。

添加打印樣式表就像將這一行插入頁面HTML一樣簡單 - 代碼的media = print部分告訴瀏覽器在打印時僅使用此樣式表。

這個文件通常看起來像這樣:

#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments { display:none }

是的,它真的很簡單。那麼它是怎樣工作的?以下是左側普通網頁的示例,其中所有導航,徽標和廣告都清晰可見,並且ID與相關聯 - 並且在右側,應用了打印樣式表的同一頁面,隱藏了所有這些元素。

顯然你更喜歡打印其中一個,對嗎?

打印樣式表失敗的示例

不幸的是,有很多大型網站根本沒有費心去實現這一點。看看你試圖從紐約時報打印時會發生什麼:

一些網站,如Gawker網站,更糟糕。它們不僅沒有可打印的視圖,當您嘗試打印時,它類似於墨水湯。據我們所知,如果不使用像Readability這樣的單獨服務,或者手動突出顯示頁面上的內容,就無法從Gawker網站打印,這在他們的新設計中幾乎是不可能的。

真的很傷心。最大的網站負載完全沒有打擾實現此功能。

值得慶幸的是,有些網站會使用它們

這是一個格式正確的可打印視圖的示例 - 無需費心找到一些打印鏈接。 BBC新聞網站整齊地格式化了打印文章,並附有自定義標題。它們確實在打印視圖中包含註釋,但它仍然是一項出色的工作。

有很多其他網站都做同樣的事情,比如ArsTechnica和......我們的網站,但是顯示所有網站的截圖都是愚蠢的。在我們的研究中,正確實施它們的網站很少。


總結一下......請花5分鐘時間為您的網站實施打印樣式表!

Link
Plus
Send
Send
Pin