How to Detect Browser Features Using jQuery

Historically, web developers relied on jQuery to normalize cross-browser inconsistencies and determine client capabilities without resorting to unreliable user-agent sniffing. This article explains how jQuery implemented native feature detection through the historical jQuery.support object, how developers utilized its built-in boolean properties, and why the ecosystem eventually shifted toward dedicated feature detection tools.

The Introduction of jQuery.support

In jQuery 1.3, the library introduced jQuery.support as a direct replacement for jQuery.browser. While jQuery.browser relied on parsing the user-agent string—an approach prone to spoofing and brittle version checks—jQuery.support adopted modern feature detection.

Rather than checking which browser was running, jQuery executed small tests upon page load to determine what the browser could actually do. It created dummy DOM elements, applied styles or attributes, and checked if the browser handled them correctly according to standard web specifications.

Using jQuery.support Properties

Developers accessed jQuery.support (or $.support) as a key-value map containing boolean values. If a feature was supported, the property returned true; otherwise, it returned false.

Some of the most common properties included:

• $.support.cors: Tested whether the browser's native XMLHttpRequest object supported Cross-Origin Resource Sharing (CORS).
• $.support.opacity: Checked if the browser supported the standard CSS opacity property, allowing developers to fallback to proprietary filters (such as alpha(opacity=...) in older versions of Internet Explorer).
• $.support.boxModel: Verified whether the document was rendering using the standard W3C CSS box model instead of quirks mode.
• $.support.checkOn: Checked whether a checkbox element's default value was "on" when no value attribute was specified.

An implementation using $.support typically followed this structure:

if ($.support.cors) {
    // Perform direct cross-domain AJAX requests
    $.ajax({
        url: "https://api.example.com/data",
        dataType: "json"
    });
} else {
    // Fallback to JSONP or a server-side proxy
    $.ajax({
        url: "https://api.example.com/data",
        dataType: "jsonp"
    });
}

Deprecation and Modern Alternatives

The jQuery.support object was designed primarily for jQuery's internal use to determine how its own DOM and AJAX methods should behave. Because external developers frequently relied on undocumented properties that changed between releases, the jQuery team advised against using it for arbitrary application-level feature detection.

Starting in jQuery 1.9, many properties of $.support were deprecated, and the object was fully removed from jQuery's public API in jQuery 3.0.

For modern and comprehensive feature detection, developers transitioned away from jQuery's internal suite to dedicated solutions:

1. Modernizr: A lightweight, dedicated library that tests for hundreds of HTML5 and CSS3 features.
2. Native JavaScript Checks: Directly testing browser objects (for example, 'geolocation' in navigator or checking if an element's style property is defined) without external dependencies.