CSS Media Types
June 18, 2006
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; }
}