Easy Print CSS Integration - NoPrint (Thanks Rick Osborne!)
Last week, I talked about a little bit about a revelation that I had as far as print CSS vs. printer friendly pages go. I had said that print CSS was optimized to make haphazard printing better and printer friendly pages were optimized for purposeful printing. In response to this, Rick Osborne had some very good comments. For starters, he made the point that you want to build print CSS into your site as you are building the site; this way, it is just well thought out. You don't want to go back after a site has been built and then try to apply a print style sheet.
That's all good, but really, it was his next piece of advice that was quite fantastic:
"noprint"
He suggested that an easy way of integrating print CSS was to simply add the class "noprint" to the elements that you did not want to print. Then, a major part of your print style sheet will simply be:
.noprint {
display: none ;
}
Of course, there's more to a print style sheet than simply hiding elements, but this does have a lot to do with it. What makes this so insanely easy is that modern browsers can all handle multiple class definitions, so appending the "noprint" class doesn't mean that you have to sacrifice other classes in any way:
<div class="site-header noprint">
....
</div>
Anyway, I thought this was a stroke of genius. And, as a final point, what makes this so awesome, is that as you build or modify your page architecture, there is so much less work to maintain the print CSS for it.
Rick Osborne, as always, your advice is most excellent!
Want to use code from this post? Check out the license.
Reader Comments
In addition to the "noprint" class, you can create a "noshow" class and allow specific information (copyright, URL, instructions, etc) to be printed but not readily viewable.
I use both classes in my single CSS file like this:
/* Screen Only */
@media screen {
.noprint {display:block !important;}
.noshow {display:none !important;}
}
/* Print Only */
@media print {
.noprint {display:none !important;}
.noshow {display:block !important;}
}
@James,
Excellent addition. I get a little uneasy about having stuff on the page that is reserved only for print, because at that point, I feel like the print CSS is almost being abused; however, for small things like a copy right, I am at peace.
Great tip! We are just in the process of integrating printer-friendly CSS into one of our sites, and this helps solve one of our questions. Dealing with multiple layout and templates for printable pages can be quite an undertaking.
Making the association
There are a variety of ways to associate media-specific stylesheets with a document. The most familiar way is to use the LINK element and simply add the media attribute:
<link rel="stylesheet" type"text/css"
href="print.css" media="print">
In the previous example, we see that the stylesheet print.css has been given a media of print; thus, its styles will be used only when the document is printed. These styles will have no effect on the display of the document when viewed using a monitor, audio browser, or any other non-printing device.
The codes is helpful.. Thanks a lot =D
Mr.James Moberg that was an excellent tip... Thanks a lot..
I'm confused here. If you put the noprint in any div it hides that div for everything (display:none;). What am I missing. What makes it know you are printing and not just trying to read the website? Has to be something obvious I'm missing.
thanks
@Terry, because the screen and printer each use different styles for the classnames. The "noprint" class will suppress the section from being printed, yet allow it to be displayed on the website. The "noshow" class will suppress the section from being viewed in the browser, yet it can be printed.
Here's a sample page to illustrate:
http://www.ssmedia.com/temp/noshow.cfm
@James Moberg,
Thanks for the reply. This is another one of those things in CSS that I've never thought about and didn't know it was there (some of the functions to make this happen). CSS is a fun adventure...
Thanks
@Terry, @James,
This is one of those features that I really like... but *still* have not started taking better advantage of it.
Working on an enormous update to a Policy & Procedure site and instead of using 500+ parallel pages to prepare for rollout I'm using a simple CSS to hide new content before rollout and show content that will be hidden at rollout by switching the two names (frown and smile in the style sheet):
/*Hide items from view on server*/
div#smile {display: none ;}
/*Display items for editing purposes - local*/
div#laugh {display: inherit;background-color:#F9F;}
/*Display items for view on server*/
div#frown {display: inherit;}
Is there a way to add the noPrint option to these attributes or does that need to be done as a separate attribute so I'd have two div tags for each group of old and new content?