CSS can style existing elements, but it can also inject content into a document. There are a few cases where content generation with CSS makes sense, and the most obvious one is appending the URL of a hyperlink next to the link’s text when a user prints the page. When you’re looking at a document on the screen, you can just hover over a link and see where it goes by looking at the status bar. However, when you look at a printout of a page, you have absolutely no idea where those links go.
AwesomeCo is working up a new page for its forms and policies, and one of the members of the redesign committee insists on printing out a copy of the site each time. He wants to be able to know exactly where all of the links go on the page so that he can determine whether they need to be moved. With just a little bit of CSS, we can add that functionality, and it will work in IE 8, Firefox, Safari, and Chrome. We can use some proprietary JavaScript to make it work in IE 6 and 7.
The page itself has nothing more than a list of links on it right now. Eventually it’ll get put into a template.
<ul>
<li>
<a href=”travel/index.html”>Travel Authorization Form</a>
</li>
<li>
<a href=”travel/expenses.html”>Travel Reimbursement Form</a>
</li>
<li>
<a href=”travel/guidelines.html”>Travel Guidelines</a>
</li>
</ul>
</body>
If you were to look at that page on a printout, you’d have no idea where those links go. Let’s fix that.
The CSS
When we add a style sheet to a page, we can specify the media type that the styles apply to. Most of the time, we use the screen type. However, we can use the print type to define a style sheet that loads only when the page is printed (or when the user uses the print preview function).
<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print”>
We can then create a print.css style sheet file with this simple rule:
Down! oad css3_prmt_lmks/pnnt.css
a:after {
content: ” (” attr(href) “) “;
}
This takes every link on the page and adds the value of the href value inside parentheses after the link’s text. When you print it from a modern browser, it looks just like this:
If you want to see it in action without actually using up paper, you can use your browser’s Print Preview feature, which also triggers this style sheet.
That handles everything except for Internet Explorer 6 and 7. Let’s fix that, shall we?
Falling Back
Internet Explorer has a couple of JavaScript events that I wish every browser would adopt: onbeforeprint and onafterprint. Using those events, we can modify the hyperlink text when the printing is triggered and then revert the links when printing is finished. Our users will never notice the difference.
We just need to create a file called print.js and add this code:
Une l $ (function () {
if (window.onbeforeprint !== undefined) {
window.onbeforeprint = ShowLinks;
window, onafterprint = HideLinks;
5 }
} ) ;
function ShowLinks() {
$(“a”) .each(function() {
io $(this) .data(“7in/c7~ext” , $(this) .textO) ;
$(this) .append(” (” + $(this) .attr(‘7iref”) + “)”);
});
}
15 function HideLinksO {
$(“a”) .each(function() {
$(this) .text($(this) .data(“7in/cText”)) ;
});
}
Then we just need to attach it to our page. We only need this fallback for IE 6 and 7, so we’ll use a conditional comment for that. This code relies on jQuery, so we have to make sure that we link in the jQuery library as well.
<script charset= “utf-8″ src=’http://ajax.googleapis.eom/ajax/libs/jquery/l.4.2/jquery.min.js’
type=’text/j avascri pt’>
</script>
<! — [ i f lte IE 7]>
<script type=”text/javascript” src=”print.js”x/script>
<![endif]–>
</head>
<body>
<hl>Forms and Policies</hl>
<ul>
<li>
<a href=”travel/index.html”>Travel Authorization Form</a>
</li>
<li>
<a href=”travel/expenses.html”>Travel Reimbursement Form</a>
</li><li>
<a href=”travel/guide”Hnes.html”>Travel Guidelines</a>
</l i>
</ul>
With the JavaScript linked, the link URLs will print on all of our target browsers. You can use this print style sheet as the basis for a more comprehensive one, and you may choose to apply this behavior to only some links on your site, not to every link like we did here.