Printing partial window with CSS Media types

Its quite often that we need print sceen feature on our web site. And most of the times only cotentt part is printed leaving header, footer and menu. People often tend to use javascript by hiding the divs (or what ever the control is) then printing the screen using window.print() and then again showing the hidden controls.

Here is a sample of the page, with a header, footer, menu and content with thier div ids.

This works good for IE with some some issues like

• fluctuations,
• printer settings,
• blank space where controls are hidden etc.

But in the recent project which I have been working for it had the requirement to make print feature work cross browser. And my javascript code was not working for browsers like chrome and firefox, so I explored some other options. Eventually I found that this can be achieved using CSS with just few one line of code:

@media print

{

.noprint

{

display: none;

}

}

and putting a class=noprint for all the non required divs during print, as seen below

And this worked perfectly for all the browsers without even any minor issues stated above.

And would you believe this is just the tip of the iceberg as far as @media is concerned. There is almost no limit to what can be done with alternate-media stylesheets. Using them appropriately is the key to creating pages which can be styled for regular screen output, printing, legible display on handheld devices, special styles for the blind, and much more. As browsers add support for more media, and more ways to set up media-specific styles, we'll return to this subject for more. Until then, try out some print-media stylesheets on your pages, and see how you can make your site better and more accessible than ever.

There are currently ten defined media types:

1. all
2. aural
3. braille
4. embossed
5. handheld
6. print
7. projection
8. screen
9. tty
10. tv

Go explore them and harness the power of CSS!