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

Question

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

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

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

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

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

Answer 1

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

为此，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="">whosebug.com</a>.</p>
<br/>
<br/>
<strong>Print</strong>
<p>View the answer on <a class="print" href="">whosebug.com</a>.</p>

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

Why would a css framework display link URLs on the print pages?

css

css-frameworks

printing-web-page