4.2. Detecting Features with jQuery.support

4.2.1. Problem

You need to attach a special click handler to all anchor tags that have just a hash for the current page, and you don’t want to risk it breaking because of browser support issues.

4.2.2. Solution

(function($) {
    $(document).ready(function() {
     $('a')
         .filter(function() {
             var href = $(this).attr('href');
             // Normalize the URL
             if ( !jQuery.support.hrefNormalized ) {
                 var loc = window.location;
                 href = href.replace( loc.protocol + '//' + loc.host + loc.pathname, 
'');
             }
             // This anchor tag is of the form <a href="#hash">
             return ( href.substr(0, 1) == '#' );
        })
        .click(function() {
            // Special click handler code
        });
    });
})(jQuery);

					  

4.2.3. Discussion

The jQuery.support object was added in version 1.3 and contains Boolean flags to help write code using browser feature detection. In our example, Internet Explorer (IE) has a different behavior in how it handles the href attribute. IE will return the full URL instead of the exact href attribute. Using the hrefNormalized attribute, we have future-proofed our solution in the event that a later version of IE changes this behavior. Otherwise, we would have needed a conditional that contained specific browser versions. While it may be tempting, it is best to avoid this approach because it requires future maintenance as new versions of browsers are released. Another reason to avoid targeting specific browsers is that it is possible for clients to intentionally or unintentionally report an incorrect user agent string. In addition to the hrefNormalized attribute, a number of additional attributes exist:

boxModel

True if the browser renders according to the W3C CSS box model specification

cssFloat

True if style.cssFloat is used to get the current CSS float value

hrefNormalized

True if the browser leaves intact the results from getAttribute('href')

htmlSerialize

True if the browser properly serializes link elements with the innerHTML attribute

leadingWhitespace

True if the browser preserves leading whitespace when innerHTML is used

noCloneEvent

True if the browser does not clone event handlers when elements are cloned

objectAll

True if getElementsByTagName('*') on an element returns all descendant elements

opacity

True if the browser can interpret the CSS opacity style

scriptEval

True if using appendChild for a <script> tag will execute the script

style

True if getAttribute('style') is able to return the inline style specified by an element

tbody

True if the browser allows <table> elements without a <tbody> element