Browser detection 2010 - How do overcome user-agent pitfalls?

Hi all,

Given that the user-agent property in most browsers can be overridden and therefore its value is questionable, what’s the current best way to determine one browser from another?

Jquery’s .support() function is nice for checking supported features but doesn’t reveal the browser name, version and so forth.

Conditional statements are IE only.

PHP is nice if it weren’t for the user-agent problem above.

Where does one turn to? What do you guys use to test for a given browser?

I’ve scouted the web and everyone seems to be confirming how user-agent detection is risky yet continue to rely on it.

There’s got to be common method that’s 99% bullet proof if not entirely true.

Thanks in advance,

You’re right, I just have a habit of finding the most elegant way out of a quirk. Luckily this quirk isn’t very visible really, only perfectionists like me would probably notice it :slight_smile:

IE8 is definitely more willing to play ball nicely, it’s a relief to see it render the page as all other modern browsers. I only hope IE9 doesn’t open up an all new can of worms (Microsoft would be kicking itself in its own foot but your never know…).

Thanks for your comment.

While I understand the issues you’re getting, over time you’ll soon get used to the quirks of the various browsers (even though their becoming much less frequent). I have to agree with felgall that progressively enhancing is much more of a viable solution than attempting to detect devices. While back in the day, detection only had to deal with a handful of desktop rendering engines, with the mobile revolution you’re looking at millions of handsets, all with their own unique levels of support and hundreds of browsers based on an equal number of mobile rendering engines (as to desktop ones). Long story short, it’s better to just grit your teeth and keep testing and fixing as you find glitches than to start poking browsers with code (unless it’s IE where conditional comments fill the void quite nicely and aren’t too intrusive). :slight_smile:

I agree but this takes knowledge and skill, which I seem to have for most part but not this time around. I’m not sure if I’m allowed to post what I wrote in another thread here yesterday, the thread is titled “.height() fine in Chrome, Opera & Firefox but not IE8 and Safari??” It stems from a slightly earlier thread where I was having problems getting the right height of a DIV using Jquery’s .height(). The earlier thread’s title was “How to $(‘#DIV name’).height(); with an accordion on page?”.

I ended up manually working out the necessary DIV height and setting that to the other DIV (the one I wanted to align with the first). It works fine in 3 browsers, in other words pixel perfect (as I wrote in the above thread - the first one) but not in 2 of them (IE and Safari). It’s got to be some margin/padding CSS mayhem.

Anyway, to cut to the chase, given these problems to get all A list browses to play ball identically (IE, Firefox, Chrome, Opera, Safari) I need to add a value of X to the DIV’s height manually. To do this though I need to know which browser’s rendering the page as the 2 going wrong aren’t pixel identical. This X value would either be +tive or -tive as required by the problematic browser and affect the DIV’s height accordingly.

I would love to fix it via CSS hacks/fixes, but when this doesn’t happen (i.e. I don’t know how myself despite attempts or can’t get any other expert advice) I’m pushed to resorting to manual workarounds :rolleyes:

I far as I could test nothing such as height: auto, position: absolute etc. stopped IE or Safari forcing its own misinterpretation.

Just about the only browsers that misinterpret CSS that are still in use are IE6 and IE7 and so conditional comments are the ideal approach for them.

Usually if you have a situation where some other browser misinterprets the CSS then it is possible to rework the CSS a different way so as to eliminate the problem and get it working correctly across the various browsers.

Identifying a specific browser to apply a CSS fix is not going to be all that effective in any case since if there is a bug in a browser that has issues with a particular piece of CSS then chances are that a patch will be released to correct it.

Right. Thanks for replying.

This would work in cases where we know why what to test for. If on the other hand it’s merely a case that a given browser mis-interprets CSS then it’s not possible.

By detecting the problematic browsers I was hoping to simply manually hardwire a fix much in the same way that IE conditional statements work.

Use feature sensing - if the browser supports the feature you are trying to use then once you have tested that it supports it then you can use it.