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

Question

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

读完这个答案后，似乎很明显我正在使用的一些框架(不是引导或基础，也许是 material.io？(必须添加它。

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

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

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

Answer 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>