Using CSS for print

"What do alternate style sheets have to do with driving traffic to my Web site?"

cartoon of a traffic light

That's a good question. And the answer is that anything you do to entice your visitors back to your Web site is a good thing. If you have a way of making your site look its best to your visitors, you will give them one more reason to return.

In an ideal world, Web sites would look the same in all browsers, but alas, this is not the case in the real world. Often, programmers would like to be able to tweak something for a certain browser. One way to do this is with an alternative style sheet.

If you've been programming a long time, you might lack interest in the newer W3C standards, such as the use of DIVS and CSS. But CSS can still help you. You don't have to change your whole way of thinking and operating to make good use of style sheets. Style sheets can be used to fix problems, and you can still, if you like, go on coding your HTML markup the old way.

If one browser just won't behave, you can use an alternate style sheet. With a little javascript coding, you can detect your visitor's browser, and based on the browser, you can choose (again using a little javascript) which style sheet to enable.

Because I did this for print, I will restrict my example below to an alternate print style sheet. But know that you can apply the same approach to alternate screen style sheets as well. (You will notice in the HTML link code below a reference to media.)

Here's a brief history of what led me to code an alternate print style sheet: Thinking I was hip, I coded all my Web pages with DIVS instead of a table layout. To my horror, I found out that when my visitors print my pages, my rightside DIV shears off at the end of the first printed page, never to return. This is unfortunate because:

Now I ask you: is there any reason why I can't reasonably expect that my visitors can print what they see? Yes I do suppress two other DIVS, but I didn't want to suppress my rightside DIV for all my visitors, just because Mozilla won't behave.

It was time to learn some Javascript. I have two, actually. One detects which browser the visitor is using. I borrowed that one from Stephen Chapman. He asks that it not be altered in any way if you use it. The second Javascript I wrote myself. That one enables your alternate style sheet based on which browser you detected.

How do I code the alternate print style sheet in my HTML page?

<link rel="alternative stylesheet" media="print"
href="../stylefiles/mozillaprint.css" type="text/css" title="mozilla print"/>

What do I code in the special style sheet?

Anything you want. But in my case, I wanted to suppress a DIV. So I coded it like this:

div#rightside {display:none}

How do I use Javascript to detect my visitor's browser?

// Browser Detection Javascript
// copyright 1 February 2003, by Stephen Chapman, Felgall Pty Ltd

// You have permission to copy and use this javascript provided that
// the content of the script is not changed in any way.

// This function determines which browser the visitor is using. We employ
// this function when the visitor issues a browser print so that we can use
// a different style sheet for Mozilla-based browsers.

function whichBrs() {
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("staroffice") != -1) return 'Star Office';
if (agt.indexOf("beonex") != -1) return 'Beonex';
if (agt.indexOf("chimera") != -1) return 'Chimera';
if (agt.indexOf("netpositive") != -1) return 'NetPositive';
if (agt.indexOf("phoenix") != -1) return 'Phoenix';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("skipstone") != -1) return 'SkipStone';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("netscape") != -1) return 'Netscape';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
if (agt.indexOf('\/') != -1) {
if (agt.substr(0,agt.indexOf('\/')) != 'mozilla') {
return navigator.userAgent.substr(0,agt.indexOf('\/'));}
else return 'Netscape';} else if (agt.indexOf(' ') != -1)
return navigator.userAgent.substr(0,agt.indexOf(' '));
else return navigator.userAgent;
}

See About.com for more information about the above browser-detection Javascript.

How do I use Javascript to then enable an alternate style sheet? 

// Enable Alternate Style Sheet
// copyright 12 February 2005, by Linda Moran, Betterway Press


// Enable preferred or alternate style sheet (thus disabling persistent style sheet)
// by finding a CSS with a title. Use this for browser print of page in Mozilla. 
// Since my CGI to improve browser print does not work for Mozilla (Mozilla ignores 
// alternate print), we need to make browser print in Mozilla palatable. We do this
// only for pages with long divs (such as the newsletters). The alternate style sheet
// for Mozilla suppresses the right side DIV completely. Not a perfect solution, but 
// it's more palatable than a rightside DIV that cuts off after the print of the first 
// page.     
 

// You have permission to copy and use this javascript
// In exchange, would you please consder linking to one or more pages in any of these
// three Web sites: 
// (choose one that is relevant to // your visitors):
// http://www.mikemoran.com
// http://www.lindamoran.net
// http://www.betterwaypress.com
// Thank you.

function chooseprintstylesheet(browserName)
{
 if (browserName == 'Netscape'|| browserName == 'Mozilla' || browserName == 'Firefox')
{  var i, a, main;
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
	 {
	   if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) 
	   {
	      a.disabled = false;
	   }	 
     }
  }					 
}

Disclaimer

Hey, I'm not a Javascript programmer. I'm sure this could be tidier. But heck, it works!

So simple!

The result? My Opera and IE visitors get to see the rightside DIV. Only my Mozilla visitors have the right side suppressed.

And it's even better than that. I also offer a local print button on the screen (in all browsers), which takes my visitors to a Perl CGI. This Perl CGI converts my DIVS to tables in all browsers. The end result is that the only visitors who miss out on the rightside DIV are Mozilla visitors who choose browser print. For more information about the CGI, see Print CGI.

Now would you like to see an example? This page you are reading now does not have a rightside DIV, so I'll send you to a page on another one of my sites. Once there, try doing a browser print preview. If you're not in Mozilla, you'll see a rightside DIV in your print preview window. If you're in Mozilla, you'll see that the rightside DIV is suppressed. Check out Diet Survivors newsletter for the example.

Any questions about this page?

E-mail me at Contact Linda Moran with questions, corrections, or suggestions. I'm learning all the time.

Find out more

Search Engine Marketing, Inc. book cover

Want to find out how else to make the most of your Web site? The book, Search Engine Marketing, Inc., by Mike Moran and Bill Hunt, is available on Amazon.com. There's something for everyone in this thorough, delightfully written text that covers every aspect of Search Marketing. I know from the inside—I personally ripped it to shreds a few times while it was in the making.

Click on the book cover for more information.

And just who is Linda Moran, and why does she call herself "Search Wifey?" Find out  who is Linda Moran?



Did this page help you?

If the free information on this page was helpful to you, might it help your visitors as well? Consider linking to this page. And do you have friends with Web sites who could benefit from a link to this page? We'll help you e-mail all the link information to yourself or anyone else of your choosing. Just click on the e-mail icon.

Direct all technical questions and comments about this site to webmaster

Last Modified: Saturday, 12-Jan-2008 21:49:12 PST Linda Moran
All rights reserved.
Copyright © 2005 Linda Moran

 Linda Moran    Home | Cognitive therapy | Disabilities | Intuitive Eating | Technical