進化:從孤膽極客到高效團隊
It never ceases to amaze me that people have to look for a link or a button that says “Print” on a web page, especially considering there’s a miracle technology that makes that step unnecessary. Sadly almost nobody uses it, even though it’s… 10 years old.
人們不得不在網頁上尋找顯示“打印”的鏈接或按鈕，這讓我感到無比驚奇，尤其是考慮到有一種奇跡般的技術使這一步驟變得不必要。 可悲的是，幾乎沒有人使用它，即使它已經有10年了。
Not only is it silly to require an extra step for printing, but using print stylesheets would save some ink for anybody that doesn’t use the printable link. And of course, there’s loads of people that use print-to-PDF to save articles for later without wasting paper.
要求額外的打印步驟不僅很愚蠢，而且使用打印樣式表可以為不使用可打印鏈接的任何人節省一些墨水。 當然，還有很多人使用“ PDF轉換為PDF”來保存文章，以供日后使用而不會浪費紙張。
什么是打印樣式表？ (What Are Print Stylesheets?)
Most web sites implement their print function by taking you over to another page, which is formatted differently for printers – but this really isn’t necessary. Every browser implements a simple CSS technology known as Print Stylesheets, which is nothing more than a file that specifies elements to hide when your browser prints the page.
大多數網站通過將您帶到另一個頁面來實現其打印功能，該頁面的格式與打印機的格式不同-但這確實不是必需的。 每個瀏覽器都實現一種稱為打印樣式表的簡單CSS技術，該技術僅是一個文件，該文件指定了瀏覽器打印頁面時要隱藏的元素。
For those that are unfamiliar, CSS means Cascading Style Sheets, and it’s how your browser knows how to format the HTML source code for a web page into what you actually see on the screen. Everything from fonts, colors, borders, and even background images can be specified in the style sheet.
對于那些不熟悉的人，CSS表示級聯樣式表，這是您的瀏覽器知道如何將網頁HTML源代碼格式化為您在屏幕上實際看到的格式。 可以在樣式表中指定字體，顏色，邊框甚至背景圖片等所有內容。
Adding a print stylesheet is as simple as plugging this one single line into your page HTML—the media=print part of the code tells the browser to only use this style sheet when printing.
添加打印樣式表就像將這一行插入頁面HTML一樣簡單-代碼的media = print部分告訴瀏覽器僅在打印時使用此樣式表。
<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print” >
<link rel =“ stylesheet” href =“ print.css” type =“ text / css” media =“ print”>
This file generally looks something like this:
該文件通常如下所示：
#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments { display:none }
＃sidebar，＃footer，＃navigation，＃sharinglinks，＃topad，＃comments {display：none}
Yes, it’s really as simple as that. So how does it work? Here’s an example of a normal web page on the left, with all of the navigation, logo, and ads clearly visible with the ID associated – and on the right, the same page with the print stylesheet applied, hiding all of those elements.
是的，真的就是這么簡單。 那么它是怎樣工作的？ 這是一個普通網頁的示例，左側顯示所有導航，徽標和廣告，并與ID關聯-在右側顯示應用了打印樣式表的同一頁面，隱藏了所有這些元素。
Obviously you’d prefer to print one of these over the other, right?
顯然，您更希望將其中之一打印出來，對嗎？
打印樣式表失敗的示例 (Examples of Print Stylesheet Failure)
Unfortunately, there are just loads of huge web sites that haven’t bothered to implement this at all. Take a look at what happens when you try to print from the New York Times:
不幸的是，只有大量的大型網站根本沒有去實現它。 看看當您嘗試從《紐約時報》打印時會發生什么：
Some sites, like the Gawker network of sites, are even worse. Not only do they not have a printable view, when you do try and print, it resembles ink soup. As far as we can tell, there’s no way to print from a Gawker site without using a separate service like Readability, or manually highlighting the content on the page, which is nearly impossible on their new design.
某些網站，例如Gawker網站網絡，甚至更糟。 它們不僅沒有打印視圖，而且在嘗試打印時類似于墨水湯。 據我們所知，如果不使用諸如Readability的單獨服務或手動突出顯示頁面上的內容，就無法從Gawker網站進行打印，這在他們的新設計中幾乎是不可能的。
It’s sad, really. Loads of the largest sites just completely fail to bother implementing this feature.
真的很傷心。 最大的站點的負載完全無法解決此功能。
幸運的是，某些網站確實使用了它們 (Thankfully, Some Sites Do Use Them)
Here’s an example of a properly formatted printable view – without having to bother finding some print link. The BBC News site neatly formats the articles for print, complete with a custom header. They do include comments in the print view, but it’s still a job well done.
這是格式正確的可打印視圖的示例-無需費心查找某些打印鏈接。 BBC新聞網站整齊地格式化了要打印的文章，并帶有自定義標題。 它們的確在打印視圖中包括了注釋，但是仍然做得很好。
There’s quite a few other sites that do the same, like ArsTechnica and… our site, but it would be silly to show screenshots of all of them. In our research, the sites that properly implemented them are few and far between.
還有很多其他網站也可以做到這一點，例如ArsTechnica和…我們的網站，但是顯示所有這些網站的屏幕截圖很愚蠢。 在我們的研究中，正確實施它們的站點很少而且相差甚遠。
So to wrap up… please take the 5 minutes required to implement a print stylesheet for your site!
因此，總結一下……請花5分鐘為您的網站實施打印樣式表！
翻譯自: https://www.howtogeek.com/60744/geek-rants-why-do-so-many-web-sites-fail-to-use-print-stylesheets/
進化:從孤膽極客到高效團隊
