Re: Browser sniff for Stylesheet determination

by Charles A Upsdell <cupsdell(at)upsdell.com>

 Date:  Thu, 20 Apr 2000 00:18:08 -0400
 To:  hwg-style(at)hwg.org
 References:  stewart
  todo: View Thread, Original
At 10:28 PM 04/19/00, you wrote:
>Evening,
>
>I've got a technical and theory question for everyone.
>
>I'd like to do a browser sniff and have the results of that check
>determine the appropriate style sheet to be pulled for use with that
>page.  There would probably be multiple IE and multiple Netscape
>sheets (with possibly a few others thrown in) to cover our current
>browser stats.

I'll tell you what I do, but I don't expect that many will think that my 
approach is a good one.

First, I put a small block of basic CSS in the HEAD of each HTML 
file:  this is CSS that works (or is tolerated) by all browsers and which 
enhances the look of the site.  Note:  I don't put this block of CSS in an 
external stylesheet because some browsers in common use - notably 
NN4.00-4.06 - have major problems with external files.

Second, I put a browser-sniffer in each HTML file that determines whether 
the browser is a 'modern browser', and if it is, runs an external 
JavaScript file discussed below.  For my sites, the browser is 'modern' if 
it is IE4 (or higher), Opera 4, Mozilla, or Netscape 6:  I don't count NN4 
as modern since it implements CSS and JavaScript so very badly.

The external JavaScript file uses document.write to generate CSS on the 
fly.  The CSS generated:

(1) depends on the operating system, e.g., I don't reduce font sizes if the 
user has a Mac, because Mac fonts are small already;

(2) *sometimes* depends on the colour depth, e.g., I may specify as a 
background image with a lot of colours only if the user's monitor supports 
64K or more colours, and for lesser monitors instead specify a background 
image with web-safe colours;

(3) depends on the browser, e.g., to reduce the indent in bulleted lists, I 
generate different margins and paddings for different browsers, because 
different browsers require different margins and paddings to produce 
similar results.

Note that I generate CSS on the fly rather than using external stylesheets 
because this gives me more flexibility.

The result of my approach is that pages work with all browsers, but look 
better with modern browsers, and they adapt to individual users.  And I 
personally have found my approach quite maintainable.

You can see an example of one my sites which uses this approach at:

     http://www.upsdell.com/BrowserNews/

- Regards, Chuck Upsdell






-
Chuck Upsdell
Email:     cupsdell(at)istar.ca or cupsdell(at)torfree.net
Website:   http://home.istar.ca/~cupsdell/

HWG hwg-style mailing list archives, maintained by Webmasters @ IWA