I was just working on a site where we had to add the ability to print the pages. We noticed that the link URLs are plastered all over the page like bad graffiti.
After reading this answer, it seems clear that some framework I'm using (which isn't bootstrap or foundation, maybe material.io?) must be adding this in.
Why would this be a good idea? It seems that if the user wanted to print the page, they want a print out of what they are seeing, not a bunch of other random garbage. Googling around I mostly find lots and lots of articles about how to stop this behavior so at the very least it seems like something people are looking to get rid of by default rather than add.
My question is, who thought it was a good idea in the first place to deliberately add this, and why?
Also, if this question is better on another stack, let me know.
Many frameworks use an @media print query in the CSS to display the underlying URLs of the links on the page when the page is printed. The purpose of this is to display the URLs of the links on the page so readers can see/visit the links, if needed.
To do this, the CSS will contain an @media query along the lines of:
@media print{
a:after{
content:" (" attr(href) ") ";
}
}
which has the effect of (emulated to work in the browser here):
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>