Save the planet with CSS!

Sunday 4 Sept 2011

I’ve been quiet lately (big updates on the horizon) so a quick one for this evening:

My pre-launch checklist for website builds has always include “create print.css”. Most of the time I forget (or ignore it). It seems like the default thing to do though. Until you think about it.

Who prints web pages?

I do sometimes. Invoices, receipts, tickets etc. But general content pages? It’s 2011! We carry around smartphones with all sorts of apps to access and store information. One of my favourite campaigns last year was Save as WWF — the PDF that can’t be printed, and that got me thinking.

Here’s my new print.css:

@media only print
{
    body * { display: none !important; }
    body:after { content: "Don't waste paper!"; }
}

I’ll be using something similar on my personal projects (where printing makes no sense). It doesn’t make my content any less accessible, and it’s easy to bypass if you’re really, really set on printing.

In truth though, it’s probably wise to really consider what can be printed. A lot of paper can be saved with a carefully crafted print.css.

Save the planet with CSS!

Update!