Question

I am writing a JavaScript that currently needs to support older browsers (like IE 7), until all users upgrade to a more modern browser next year.

I was thinking about using jQuery as a temporary polyfill, like this:

var flag=0;
window.JSON||(flag=1);
document.querySelectorAll||(flag=1);
if (flag===1) {
    // load jQuery here
}
else {
    // no need for jQuery
}

Does this approach make sense? Is there a better way?

The live demo is here http://jsfiddle.net/3mzxr/

Answer 1

Entire approach is quite reasonable. You don’t always need to use jQuery though.

For selectors functionality, you can use Sizzle (5KB minified and gzipped) directly, without need for entire jQuery (30+ KB) that uses Sizzle as selectors engine. (Be careful though, that Sizzle itself has longstanding bug related to inability to use boolean-attribute selector like [autofocus]. for some reason, the bug is worked around on jQuery level instead of fixing it on Sizzle level.)

For JSON, you can use pure-JS JSON implementation (2.5 KB).

Also, it’s generally better to detect features directly (checking window.JSON object for JSON and document.querySelectorAll for qSA) without assuming that supporting JSON means having support for querySelectorAll().