This morning @t3node asked me about something CSS-related. This was kinda new for me because he never did this before I guess… He showed me a website he had printed and asked me to explain him, how it is possible to show links in printed websites with their reference printed next to it. He was kinda upset why not every frontend-developer includes this in his/her stylesheet when it comes to designing a new website. I wanted to explain everything that’s related to this topic that I’ve ever heard of but he asked me to write this blogpost as he is not pretty used to CSS and stuff.

Styles dedicated to print

To get this feature for a website you need to define some print styles.

1. link-Tag

It is possible to load up a stylesheet that is dedicated to server styles only for media print with

<link rel="stylesheet" href="css/some-print-styles.css" media="print">

Where media="print" is the important part here as it tells the browser to apply all styles it contains only for print-views of the website. I do not recommend this method because of some drawbacks for performace:

• The client has to load the CSS-file even if it does not need it
• This implies another HTTP-request
• Even though it is not a lot: the browser needs to render the styles

2. @import in CSS-file

Another possible way to render styles only in print is to include a file with @import url("some-print-styles.css") print. This also has drawbacks on performance. Even more as the link-method as files get blocked for downloading in your browser if @importis used.

3. Inline styles

For inline styles it is also possible to define an attribute media.

<style media="print">
  .element {…}
</style>

4. Media queries

My favorite method to include styles for print are media-queries. It is possible to add styles for print via @media print. Maybe you are familiar with this because of media-queries dedicated to mobile devices. Once you’ve set up this environment you can start adding some styles for any print of your site. I recommend to add display: none;for elements that are not pretty important in a printed-version. This could be the sidebar and the footer or the navigation. The thing why I’m originally writing this is how to include the reference of a link in a printed version of a website. So I’m just going for it. It is just one pretty little rule!

Pseudo-Elements for generated content

A good use-case for pseudo-elements:

a[href]:after {
  content: " (" attr(href) ")";
}

a[href] selects all links with the attribute href set and creates content :after it. attr(href) tells the browser to use this attribute as content. You may want to select a little bit different as you don’t want to display references in the navigation or so for instance. HTML5 Boilerplate makes use of this, too. These little features are why I love it so much. Go check it out and contribute. Chris Coyier has a pretty awesome article, tutorial and demo at CSS-Tricks which has nothing to do with print but describes the use of pseudo-elements and contentreally good. You should definitely read this.

Browsersupport

@media print is supported in all browsers for what I know. Except Internet Explorer 7 every browser supports :after at least good enough that content works with it. The bottleneck here seems to be attr(href). As I researched this it turned out that generated content with attr() is valid CSS 2.1. The spec adds a warningon this vary topic:

In CSS 2.1, it is not possible to refer to attribute values for other elements than the subject of the selector.

You will find more information on attr() in the CSS3 Specification. It seems as every browser (that is actually used) is going to support this except IE7 and below. I’ve set up this demo so you can test it in your favorite browser and edit it yourself. I would be glad if you share your results and thoughts on this topic in the comments.

Conclusion

As it turns out it’s kind of the right to support straightforward things. I believe everybody could at least add some default styles for print to a new website like HTML5 Boilerplate does by default. The little trick with pseudo-elements can also be pretty useful for other elements like abbr aso. Later on I noticed that @t3nodes website does not support this feature for print either. Maybe it will after he has read this post. My website and this blog do not make any special use of printed styles as I think it is not necessary that anyone prints out my blogposts. I don’t like to print thinks for myself as I believe that you could save some paper in regards to environment. But this is your decision – or the one of your customer.   Edit Thanks to Nicolas for his hint about the difference between pseudo-elements and pseudo-classes. You should also consider using ::after instead of :after. But be aware that IE8 does not support this.