Browser Detectable Style Sheets

[ron_ron]

I am new to all this. Because of comptabiliy problems with different platforms and browsers, I use a script to detect the user's browser and platform and auto-select the appopriate style sheet.

So far I have it auto-select the following different style sheets:

mac/ie
mac/ie5
mac/ns
win/ie
win/ns

Do I need to take this a step or two further or should this just about cover it?

What I need to do now is rewrite the style sheets so that they are more compatable with the above platforms/browsers. My main concern is with fonts. I want to know how to write the fonts for each platform an OS.

[tedster]

Make sure you serve at least something to people who are not on one of your combinations. There are lots of decent browsers our there besides IE and NN, and your list doesn't account for the various flavors of *nix operating systems.

You don't want to lock someone out of your site (or out of any CSS at all) if they stand a chance of rendering the code.

[ron_ron]

In that case they would get the netscape CSS.

[joshuakaufman]

ron_ron,

What kind of CSS are you using? It seems ridiculous to me that anyone would have to create five different style sheets for a website unless they were doing extremely complex CSS. My suggestion is to stick to the W3C CSS standards which will likely cover most browsers in your audience. Then you can try to design your stylesheet so that the browsers that don't adhere to the standards degrade gracefully.

Regarding fonts, do you want serif fonts or san-serif fonts?

For serif, this combination usually works well:
body {
font-family: verdana, helvetica, arial, sans-serif;
}

For sans-serif, try this:
body {
font-family: georgia, times, serif;
}

Good luck,
Joshua Kaufman

[ron_ron]

What about font-size? Which method gives the most comptibility across the board?

x-small
pt
px

[tedster]

Font size has been a mammoth conversation here - a site search will uncover many posts that will educatie you on the issues involved. In general, you will read that people fall into two camps, and their discussions can get heated, with very strong opinions:

1. fixed size - the CSS uses px, but NOT pt, which is for print media
2. relative size - letting the visitor's settings handle the actual size; the CSS will use % or em