CSS Media Types


One thing that really frustrates me is when I try to print something off a website, and my printer prints three pages of headers, graphics, and menus, and ONE page of what I actually wanted to print.  Some designers have thought ahead and have a link to open their pages in a new window, unformatted, but this doesn't always work, especially if the page is, for example, dynamically generated by submitting a form, or the user has a pop-up blocker.  Fortunately, there's a really cool CSS technique for making this easier.  It lets you use one stylesheet for what your users see on the screen, and a completely different stylesheet for what you print!  And it works like a charm!


This technique uses CSS Media Types, or as they're commonly known, @media rules.  And the best thing is, @media rules take about two seconds to learn how to use.  Here's an example:
@media screen { 
 /* This rule says: do not display any elements with the class printonly. */
 .printonly { display:none; } 
 }
@media print {
 /* This rule says: do not print elements that have the class displayonly. */
 .displayonly { display:none; }
 }
If you use this example, just enclose all your headers and whatnot with <div class="displayonly"></div> and anything that should be printed but not displayed such as a copyright message with <div class="printonly"></div>. See?! I told you that was easy!
 

If you would like a reply to your comment, you must leave your email address! We receive dozens of questions every month from people who don't leave us with any way to contact them, so we have no choice but to ignore the question. We try to reply to as many questions as we can, if we know the email address of the person who asked the question. Thanks in advance for writing in :)

Allowed HTML: <b>, <i>, <em>, <strong>. All other < and > will be replaced with &lt; and &gt;.