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