为什么 css 框架会在打印页面上显示链接 URL？答案

【问题标题】：Why would a css framework display link URLs on the print pages?为什么 css 框架会在打印页面上显示链接 URL？
【发布时间】：2018-07-09 19:54:16
【问题描述】：

我只是在一个网站上工作，我们必须添加打印页面的功能。我们注意到链接 URL 像糟糕的涂鸦一样遍布整个页面。

在阅读this answer 之后，很明显我正在使用的某些框架（不是引导程序或基础，也许是 material.io？）必须添加这个。

为什么这是个好主意？似乎如果用户想要打印页面，他们想要打印出他们所看到的内容，而不是一堆其他随机垃圾。谷歌搜索时，我发现很多很多关于如何阻止这种行为的文章，所以至少看起来人们希望在默认情况下摆脱而不是添加。

我的问题是，一开始谁认为故意添加这个是个好主意，为什么？

另外，如果这个问题在另一个堆栈上更好，请告诉我。

【问题讨论】：

如果您按照屏幕上显示的页面打印，链接将毫无用处。在打印视图中显示基础 URL 的目的是让读者可以根据需要访问链接 URL。
当您说“链接文本已粘贴”时，“链接文本”到底是什么？
@ObsidianAge，我的意思是链接所代表的 URL（或 URL 片段）。我会更新问题。
@BrettDeWoody，我想这是合理的，如果您想添加它，这将是一个很好的答案。我想我从没想过有人会使用打印输出来浏览网站，而是以电子方式共享或保存他们想要的链接。我在想，在大多数情况下，打印出来的只是屏幕上的信息（价格、正文、条形码、图片等）。感觉所有链接的东西都是杂乱无章的。

标签： css css-frameworks printing-web-page

【解决方案1】：

许多框架使用 CSS 中的 @media print 查询来在打印页面时显示页面上链接的基础 URL。这样做的目的是在页面上显示链接的 URL，以便读者可以在需要时查看/访问链接。

为此，CSS 将包含一个@media 查询，如下所示：

@media print{
  a:after{
    content:" (" attr(href) ") ";
  }
}

效果如下（此处模拟为在浏览器中工作）：

body {
  font-family: Arial;
}

a {
  text-decoration: none;
  color: blue;
}

/* 
  This would be @media print to work for print
  Using @media screen here for demo purposes
*/
@media screen {
  a.print:after {
    content: " (" attr(href) ") ";
  }
}

<strong>Screen</strong>
<p>View the answer on <a class="normal" href="https://stackoverflow.com/questions/48529735/why-would-a-css-framework-display-link-urls-on-the-print-pages?noredirect=1#">Stackoverflow.com</a>.</p>
<br/>
<br/>
<strong>Print</strong>
<p>View the answer on <a class="print" href="https://stackoverflow.com/questions/48529735/why-would-a-css-framework-display-link-urls-on-the-print-pages">Stackoverflow.com</a>.</p>

【讨论】：