Easy Print CSS Integration - NoPrint (Thanks Rick Osborne!)
Posted December 31, 2007 at 8:23 AM
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:
Launch code in new window » Download code as text file »
- .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:
Launch code in new window » Download code as text file »
- <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!
Download Code Snippet ZIP File
Comments (4) | Post Comment | Ask Ben | Permalink | Other Searches | Print Page
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;}
}
Posted by James Moberg on Dec 31, 2007 at 11:46 AM
@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.
Posted by Ben Nadel on Dec 31, 2007 at 11:59 AM
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.
Posted by CleverSage on Feb 4, 2008 at 12:12 AM
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.
Posted by Webmaster on Feb 27, 2008 at 8:10 AM
