What is the correct way to detect Opera using jQuery?

Question

Amazon.com recently updated their javascript, and it's causing problems with some Opera browsers.

Their browser detection code looks like so, but it's faulty:

    function sitbReaderIsCompatibleBrowser() {
        if (typeof(jQuery) == 'undefined') {
            return false;
        } else {
            var version = jQuery.browser.version || "0";
            var splitVersion = version.split('.');
            return (
                   (jQuery.browser.msie && splitVersion[0] >= 6)  // IE 6 and higher
                || (jQuery.browser.mozilla && (
                       (splitVersion[0] == 1 && splitVersion[1] >= 8) // Firefox 2 and higher
                    || (splitVersion[0] >= 2)
                   ))
                || (jQuery.browser.safari && splitVersion[0] >= 500) // Safari 5 and higher
                || (jQuery.browser.opera && splitVersion[0] >= 9) // Opera 5 and higher
            );
        }
}

Nothing obviously wrong jumps out at me with this code, but I've never used jQuery before so I don't know.

Even though this code looks like it's attempting to let Opera users through, when I visit the page with Opera 9.64 I get an "unsupported browser" message. If I change Opera's settings to report itself as Firefox, the page works perfectly! With that in mind, I'm pretty sure it's a problem with the script and not the browser.

Any jQuery experts have a suggestion?

You can replicate the behavior by visiting any book on Amazon and clicking the "look inside this book" link.

Answer 1

Prior to jQuery 1.3, you could use jQuery.browser:

if( $.browser.opera ){
  alert( "You're using Opera version "+$.browser.version+"!" );
}

From version 1.3, you should use jQuery.support instead.

Main reason for this is that should should avoid checking for browsers, as features may change from version to version, making your code obsolete in no time.

You should always try to use feature detection instead. This will allow you to see if current browser supports the feature you're trying to use, regardless the browser brand, version, etc.