Screen Only or Print Only

What you want to appear on the screen and what you want to have print need not be the same. With a couple of simple stylesheet commands we can easily arrange to have sections of our web page that only display on the screen and which don't print. A couple more and we can define sections that don't display on the screen but which will print.

There are a number of different ways that we can apply these stylesheet commands however the easiest way is to put everything in the one stylesheet. Most modern browsers understand these stylesheet commands and we can easily handle those that don't by defining which of the sceen and print versions to always use for those browsers that don't support media selection. Here's the stylesheet code:

.noprint, .print {display:none;}
@media screen {
.noprint, .printns {display:block;}
.print {display:none;}
@media print {
.print {display:block;}
.noprint, .printns, {display:none;}

Here we have defined three classes. Let's look at some example HTML that uses them:

<div class="noprint">Text A</div>
<div class="print">Text B</div>
<div class="printns">Text C</div>

We actually have four different situations to consider here because either a browser supports media stylesheets or it does not and we are either outputting the page to the screen or to the printer. We'll consider first those browsers that do support media commands in stylesheets as they are the majority of those in use today.

Where the media commands are recognised both Text A and Text C will display on the screen. Only Text B will be sent to the printer. The print and noprint classes are the direct opposite of one another as either one or the other will appear.

In older browsers such as Netscape 4 the situation will be slightly different. Text C will appear both on the screen and on the printer while Text A and Text B will not appear at all (unless the browser is so old as to not support stylesheets at all).

So using the printns class ensures that the content will appear on the screen. Older browsers such as Netscape 4 will also print this content but more modern browsers will not. This makes it a replacement for noprint where you need to make sure that older browsers will display it on the screen as well (even though they can't suppress it printing).

Depending on what you are wrapping with these class definitions you may also want to consider whether to include aural, braille, embossed, handheld, projection, tty, and tv after screen in your media definition. If you don't specify anything for these media types then they will e treated the same way as for the older browsers.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow