Making this site printer friendly

A few weeks ago, I decided to make this website a little bit more printer friendly. I insist on the “little bit more” as the result is clearly not perfect but I admit I didn’t spend more than 30min on this. My goal was mainly to remove some unnecessary things in the print version (header/footer) and make it a bit better than default.

I got the inspiration from Robert that wrote the base of the CSS I’m also using on this site. You can read his post too. The amount of CSS needed was so small that it motivated me to do something very similar.

The needed CSS is:

@media print {
  a,
  a:visited {
    color: #000;
    text-decoration: none;
  }
  a::after{
    content: " (" attr(href) ") ";
  }
  blockquote,
  code {
    background: #fff;
    margin: 0;
    padding: 0 1.5em;
    border: none;
  }
  nav,
  footer,
  hr,
  .noprint {
    display: none !important;
  }
}

Nothing crazy here… I’m just hidding the nav, footer and hr as well as declaring a class .noprint for anything I want to hide in other places. Changing the background to white and tweaking a few things like links’ color.

For inline links, I also added the URL to be visible after the link content, as it would be useless otherwise. That code adding those links is:

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

Thanks Juha-Matti Santala for the tip!

And it is that simple :).