Using CSS to differentiate between printable and unprintable elements

As long as the browser is CSS2.1 compliant (IE7 and Chrome are fine), it is possible to have a web page looking quite differently when printed from the way it appears on screen.

Doing this is fairly simple - each CSS element can be enclosed in a media envelope to determine how the html is interpreted when printed, or on screen.

So for example we have:

 

@media screen {

.bt {
    background: transparent url('button.gif') scroll top right;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    text-decoration: none;
    top-border:none;
    bottom-border:none;
}
}

@media print {
   .bt {display: none;}
}

<input name=sub class=bt type=submit value='Click to Continue'>

In the above, buttons aren't printed, but are shown on screen. The principle is ideal for web pages with drop down menus which are usually meaningless when printed. To convert any existing CSS, simply enclose it in @media screen brackets, then create a new @media print section for each css indicator.

For print-only html pages, the reverse can be done. i.e. the page is not visible to the user unless they print it.