Detecting browsers that are not supported by jQuery (2)

Question

Forgive me if there is an obvious answer to this question, but I haven't been able to find it. I am considering switching over to jQuery 2 and, although I'm not concerned about supporting older browsers, I would like to be able to tell users with unsupported browsers that they can't use the site.

I see here (http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/) that you can use conditional comments to branch .js files on different versions of IE, but I believe jQuery 2.0 drops support for a number of other browsers too, not just IE, so I don't think that would do it alone [edit: this is wrong, see larger edit below].

In an ideal world, I'd switch to jQuery 2 and then have a single javascript function that is called when jQuery tells me that it doesn't support the browser. Is there a straightforward way of doing this that I'm missing?

Thanks.

EDIT:

I came across this post (http://bugs.jquery.com/ticket/13404) which directed me here: http://jquery.com/browser-support/. It turns out that, in terms of support, jQuery 2 only differs from jQuery 1.9 on IE browsers. Accordingly, perhaps a better question to ask is how to detect browsers that are not supported by jQuery (in general, not just version 2) - I have updated the question title.

EDIT2:

As feature detection is the most recommended approach to this issue, the jQuery support method looks relevant here (http://api.jquery.com/jQuery.support/). However, it also seems quite iffy to rely on (as it can change without notice).

I suppose this creates the key question. How am I supposed to have any idea what jQuery features are or are not subject to potential non-support from old browsers? For instance, if someone comes to the site with a 4-version-old copy of Firefox, I wouldn't have any idea what features I'd need to test for. It would be ace if jQuery could offer some sort of fully-supported feature test, like this for HTML5: http://html5test.com/

EDIT3:

Okay, so with the conditional include statements (highlighted in answers below, and on jQuery's site), you can deal with old versions of IE. However, for other browsers, it's a little tricky. Since you cannot rely on jQuery to tell you anything about the browser's support for function x, y, or z, my approach is simply to query the underlying javascript. If you want to query CSS-based support, you can use modernizr. For javascript-based support, this is the method I use to detect SUPER old versions of other browsers:

function browser_ok() {

    if  (
            ( !Array.prototype.indexOf ) ||
            ( !Array.prototype.forEach ) ||
            ( !String.prototype.indexOf ) ||
            ( !String.prototype.trim ) ||                
            ( !Function.prototype.bind ) ||
            ( !Object.keys ) ||
            ( !Object.create ) ||
            ( !JSON ) ||
            ( !JSON.stringify ) ||
            ( !JSON.stringify.length ) ||
            ( JSON.stringify.length < 3 )
        )
    {
        return false;
    }

    // # local storage support
    // source: http://diveintohtml5.info/storage.html

    try {
        var local_storage_support = ( 'localStorage' in window && window['localStorage'] !== null );
        if ( !local_storage_support ) {
            throw new Error("local_storage_support: failed");
        }
    }
    catch ( e ) {
        return false;
    }

    // # AJAX uploads

    if ( !window.FormData || !window.FileReader ) {
        return false;
    }

    // # HTML data elements

    var body = $("body");
    body.data("browser_support_test",42);
    if ( body.data("browser_support_test") !== 42 ) {
        return false;
    }
    else {
        body.removeData("browser_support_test");
    }

    return true;
}

AFAICT, this function should eliminate all browsers that could give jQuery trouble for its basic functionality. If you want to do anything fancy, then there's probably a specific piece of functionality that you know you require, so you can check for it specifically.

Answer 1

A way to get the benefits of jQuery 2.0 while supporting IE 6, 7 and 8, is to use conditional comments:

<!--[if lt IE 9]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><![endif]-->
<!--[if IE 9]><!--><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!--<![endif]-->
<script>window.jQuery||document.write('<script src="jquery.js"><\/script>');</script>

• The first conditional comment ensures that jQuery 1.x is loaded for IE < 9.
• The latest version of jQuery (2.0.3) is used in IE 9 and browsers where conditional comments are not recognized (IE 10 dropped support for conditional comments).
• When jQuery fails to load from the CDN, a fallback (jquery.js, hosted on your server) is loaded.

Answer 2

It looks like it just drops support for IE 6, 7 and 8 - you should be able to use:

HTML:

<!--[if lt IE 9]> <html data-browser="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->

JS:

if( document.documentElement.getAttribute('data-browser') !== null ){
    // not supported by jQuery 2.x
}

If you decide to support older browsers but still want the improvements the jQuery team have included in 2.x then you can use the 1.x version: http://jquery.com/download/

Update:

It's difficult/impractical to detect every browser that doesn't support jQuery, the reason is that jQuery is just a javascript library.

Different browsers and versions used to use different methods to do some basic things in javascript (like ajax), this means that some old browsers will support some features and won't support others. There isn't a straight forward this browser supports all features or this browser doesn't support any features test.

Rob W's suggestion is really good, serve the new version (2.x) to modern browsers and 1.x version (with legacy support) to old browsers.

Have a look at this article: Graceful degradation versus progressive enhancement and consider using the Modernizr library. This lets you to check which features the user's browser supports and allows you to write your applications to take full advantage of the latest advancements while still providing a good experience for users of older browsers.