进化:从孤胆极客到高效团队_极客狂：为什么这么多的网站无法使用打印样式表？...

进化:从孤胆极客到高效团队

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分钟为您的网站实施打印样式表！