极客咆哮:为什么这么多网站没有使用打印样式表?

人们不得不在网页上寻找一个链接或一个写着“打印”的按钮,这让我一直感到惊讶,特别是考虑到有一种神奇的技术可以让这一步变得不必要。可悲的是,几乎没有人使用它,即使它是…。10岁。

不仅打印需要额外的步骤是愚蠢的,而且使用打印样式表将为不使用可打印链接的任何人节省一些墨水。当然,也有很多人使用打印到PDF来保存文章以备以后使用,而不会浪费纸张。

什么是打印样式表?

大多数网站通过将你带到另一个页面来实现他们的打印功能,该页面的格式对于打印机来说是不同的-但这真的没有必要。每个浏览器都实现一种称为打印样式表的简单CSS技术,它只不过是一个文件,指定在浏览器打印页面时要隐藏的元素。

对于那些不熟悉的人来说,CSS意味着级联样式表,它是您的浏览器知道如何将网页的HTML源代码格式化为您在屏幕上实际看到的内容的方式。可以在样式表中指定从字体、颜色、边框甚至背景图像的所有内容。

添加打印样式表非常简单,只需将这一行插入页面HTML-代码的media=print部分告诉浏览器在打印时只使用该样式表。

此文件通常如下所示:

是的,就这么简单。那么它是如何工作的呢?下面是一个普通网页的示例,左侧的所有导航、徽标和广告都清晰可见,并与ID相关联-而在右侧,应用了打印样式表的同一页面隐藏了所有这些元素。

显然你更喜欢把其中一个印在另一个上面,对吗?

打印样式表失败的示例

不幸的是,只有大量的大型网站根本没有费心去实现这一点。让我们来看看当你试图从“纽约时报”上发表文章时会发生什么:

一些网站,如Gawker网站网络,甚至更糟糕。它们不仅没有可打印的视图,而且当您尝试打印时,它就像墨水汤一样。据我们所知,如果不使用单独的服务(如可读性)或手动突出页面上的内容,就无法从Gawker网站打印,这在他们的新设计中几乎是不可能的。

真可悲,真的。最大站点的负载完全无法实现此功能。

谢天谢地,有些网站确实使用它们。

下面是一个格式正确的可打印视图的示例-无需费心查找某些打印链接。BBC新闻网站整齐地编排了文章的格式以供印刷,并配有定制的标题。它们确实在打印视图中包含注释,但这仍然是一项出色的工作。

还有相当多的其他网站也做同样的事情,比如ArsTechnica和…。我们的网站,但显示他们所有人的屏幕截图是愚蠢的。在我们的研究中,正确实现它们的网站很少。

所以要总结一下…。请花5分钟为您的站点实现打印样式表!

相关文章