Browser detection

Ph3n0m

Does anyone have or know of a decent Javascript browser sniffer, as I am looking to deploy different stylesheets based on the browser and OS

mneylon

http://devedge.netscape.com/viewsource/2002/browser-detection/

daveirl

This post has been deleted.

Ph3n0m

unfortunately not, as there are differences between IE for the PC and IE for the Mac, then you have Opera which is only a baby compared to Netscape, then you have the wonderful Safarai on the Mac aswell.

When you aim to do a truely cross platform/browser compliant website - you might aswell do it right

tricky D

Yup on the web standards stuff. The only good reasons for separate css files is as a result of the bad box model in > IE5 and/or the slight sizing differences in fonts. Even still there are 2 hacks around the box model problem. One uses parsing 'quirks' in IE, the other uses and double wrapper*. The differences in font sizing should be made irrelevant by designing flexibility of layout for varying font sizes.

If you're diligent enough to bother with NS<4.71 that's easily done as it doesn't support the @import rule so you can stuff higher css methods in there allowing for nice degradation.

* Box Model Problem - NS et al don't add margins and paddings to the width, IE incorrectly will. So a div box 100px wide with 20px margin and 10 padding is 100 wide in NS and 130 wide in IE, screwing up shtloads of layouts. The Box Model Hack (check Google) uses quirks in the way IE parses the width attribute when misspelt like w/idth: 100px; to get the width right.
The double wrap, which I use, uses the outer div to set the width only and an inner div to set the padding and margins only. It doesn't rely on quirks, just some nesting of divs which imho is just fine- it's not the same as nesting tables.

pub calls, hth
\r

tricky D

Ph3n0m wrote:

unfortunately not, as there are differences between IE for the PC and IE for the Mac, then you have Opera which is only a baby compared to Netscape, then you have the wonderful Safarai on the Mac aswell.

When you aim to do a truely cross platform/browser compliant website - you might aswell do it right

No. These differences are relatively minor. If you are able to design flexibility of layouts wrt font sizing etc., then you only need to tackle the box model problem. Not designing that flexibility in is the wrong way if you're to consider future proofing, maintenance, access for handhelds, accessibility, etc. Omitting these is not getting it fully right. All my css's work grand across platforms and browsers except where print designers insist on rhubarb. You just have to give up the notion of total control. You can't control viewport sizes, fonts, font-sizes etc. like in a print environment. You just can't nail webpages down by 4 corners, you can try, but it's much easier and better value to reflect the flexibility the media has, in the design.
my 2c
\r

pork99

daveirl wrote:

This post has been deleted.

If you are only concerned about PC browsers thats fine but what if you want to customise content for mobiles and handhelds?

I think some browser and/or platform detection and style sheet switching is a good strategy in that case.

daveirl

This post has been deleted.

pork99

daveirl wrote:

This post has been deleted.

OK but doesn't that mean you have to maintain 2 sets of content?

p

pork99 wrote:

If you are only concerned about PC browsers thats fine but what if you want to customise content for mobiles and handhelds?

In that case, you use the appropriate tools.

CSS allows you to apply different stylesheets for different media, e.g. a stylesheet for handhelds, a stylesheet for printing etc...

Here's a good guide to the subject:
http://my.opera.com/community/dev/device/css-media/