I’ve seen printer stylesheets designed a variety of different ways. But any way you slice it, the most common element in a print stylesheet is usually the display: none; rule. Printer sheets are usually about printing less rather than printing more.
What I do is gang up all the things we don’t want to print in a single block at the top of the sheet. I always know where the “don’t print” stuff is, and removing another thing from the printout is as easy as adding the class or ID selector to the common display: none; rule.
Here’s the “don’t print” block from the Backpack printer stylesheet.
And here’s what it all means:
Screen version
Print version
No header, no sidebar, no utility links, etc. Just the content in the page. Clean and clear.
Jason Fried wrote this on Aug 02 2007 There are 24 comments.
Matt 02 Aug 07
Useful CSS trick? Or maybe just a teaser that Open Bar is coming to Backpack?!
Adam T. 02 Aug 07
You can also work backwards, if that suits you better:
JF 02 Aug 07
Matt, Open Bar is already part of Backpack.
Ed Knittel 02 Aug 07
I have been doing this for all of the sites that I develop. I would also like to add that I change the font-family from a sans-serif to a 12pt serif (usually Times New Roman) which might make the information easier to read on paper. As there are no conclusive studies to confirm or deny this I suppose I do it more for personal reasons.
david gouch 02 Aug 07
Very nice, but why would anyone ever need their Backpack info offline? ;-)
Matt 02 Aug 07
Shoot… where have I been?!
Ed Knittel 02 Aug 07
Additionally, I change all text color to #000 (unless it absolutely must be another color. This includes links which I also remove the text-decoration.
*{ color:#000; text-decoration:none; }
noname 02 Aug 07
I do it the same way, plus black coloring, plus adding href into parents using :after (working in modern browsers), plus !important for display:none is it may be sometimes overwritten if sharing the stylesheet adamt T. Of course you can NOT , as plenty of elements are not block elements!
Vic 02 Aug 07
Using different style sheets for different media is always a good idea. I’ve been using this method for some time, and i also suggest using a serif font (Times New Roman looks good on paper) with a high contrast color.
Dan Boland 02 Aug 07
You’d be amazed (then again, maybe not) by the number of times I’m told “no, I want the print-out to look exactly like it does on screen.”
Mrad 02 Aug 07
Yeah, I always mean to group the rules that way – but I get caught up in something else and just wind up with a bunch of rules with display: none.
Joshua Melvin 02 Aug 07
You could also create a .noPrint class, and since elements can have multiple classes applied, just add the class to any element you want to hide. It significantly reduces your CSS file, and doesn’t really add any weight to your HTML .
Christian Romney 02 Aug 07
I generally don’t like .noPrint for the same reason I don’t like .blue – changing colors becomes harder than it ought to be.
Charles Martin 02 Aug 07
I also use a reverse of this to add text to a page only in the print version (class=”PrintOnly”). Thus, when I print out a report, I add the company logo and header to the page along with information identifying when the data was compiled on the report (datestamp). This helps when you look at a print out of the report to know when it was run. This method is also useful to identify the content in a way that would be easy for the user to remember where that information was located (other than a cryptic url printed at the bottom of the page).
Anonymosity 02 Aug 07
Thanks for the tip, Captain Obvious.
Adam Burmister 02 Aug 07
Charles: I actually do it the reverse way :)
I have a .noprint and .noscreen style set up, so I can control all elements on the page via class names… it’s perhaps a little bit intrusive, but its pragmatic.
Brad Fults 03 Aug 07
It would be wise to separate each of those selectors out onto its own line, then alphabetize the list. This makes maintenance of CSS much less of a hunt-and-tweak endeavor.
Dennison Uy - Graphic Designer 03 Aug 07
It’s so simple and easy to do. Bravo!
Darren 03 Aug 07
Thanks. You’ve just reminded me to start work on print style sheet. I love the example. It shows what a large difference it can make.
Dave 03 Aug 07
Can we expect the same for Highrise and improved print styles?
Jason 03 Aug 07
“It significantly reduces your CSS file, and doesn’t really add any weight to your HTML .”
I think 15+ “noPrint”s on every page is going to be a heck of a lot bigger than a single cached big CSS selector.
I’d rather have a big CSS file than every HTML page bloated
John Topley 03 Aug 07
IE6 only sees the last class when an element has multiple classes.
Stuart Steel 07 Aug 07
Hi John topley,
That’s just not true – ie6 supports multiple classes on any element – you just can’t select an element via multiple classes
<div class=”class1 class2”></div> is fine
but you can’t select for it in yourr css file using div.class1.class2
I use multiple classes all the time, and they always work in IE6 .
india auto lover 09 Aug 07
Where do I take tips on css apart from this for the site http://www.clickindia.com/
This discussion is closed.