Real World HTML: The Printable Page
In our last "Real World HTML" entry, we handled a rounded corner box sitting on a gradient - finishing up the implementation of the design. The only thing that remains now is making the printed page look good. Styling for print should be easy - especially if the HTML is structured well.
With that in mind, let's take a quick look at what we have so far.
@media print {
.nav, #col-news, #col-login {display:none;}
}
I have actually created 2 classes (noprint & noshow) that I add to different elements so that I can assign what to hide on the screen versus what shouldn't be printed. Both screen & print styles are in the default stylesheet for the website:
@media screen {
.noprint {display:block !important;}
.noshow {display:none !important;}
}
@media print {
.noprint {display:none !important;}
.noshow {display:block !important;}
}
That is a great tip!
Do you happen to know what the browser support is for that?
http://www.w3.org/TR/CSS2/media.html
http://www.codestyle.org/css/media/print-BrowserSu...
It should be safe to use this unless you are still developing for IE4/5 or Netscape 4.
Very good tip. I will definitely be using this in the near future.
Thanks, James.