jQuery.support

jQuery

previous page next page

jQuery.support

Categories: Properties > Properties of the Global jQuery Object | Utilities

jQuery.support Returns: Object

Description: A collection of properties that represent the presence of different browser features or bugs. Primarily intended for jQuery's internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance.

  • version added: 1.3jQuery.support

Rather than using $.browser to detect the current user agent and alter the page presentation based on which browser is running, it is a good practice to use feature detection. To make this process simpler, jQuery performs many such tests and sets properties of the jQuery.support object.

Since jQuery requires these tests internally, they must be performed on every page load. Although some of these properties are documented below, they are not subject to a long deprecation/removal cycle and may be removed once internal jQuery code no longer needs them.

Following are a few resources that explain how feature detection works:

For your own project's feature-detection needs, we strongly recommend the use of an external library such as Modernizr instead of dependency on properties in jQuery.support.

The tests included in jQuery.support are as follows:

  • ajax is equal to true if a browser is able to create an XMLHttpRequest object.
  • boxModel is equal to true if the page is rendering according to the W3C CSS Box Model (is currently false in IE 6 and 7 when they are in Quirks Mode). This property is null until document ready occurs.
  • changeBubbles is equal to true if the change event bubbles up the DOM tree, as required by the W3C DOM event model. (It is currently false in IE, and jQuery simulates bubbling).
  • checkClone is equal to true if a browser correctly clones the checked state of radio buttons or checkboxes in document fragments.
  • checkOn is equal to true if the value of a checkbox defaults to "on" when no value is specified.
  • cors is equal to true if a browser can create an XMLHttpRequest object and if that XMLHttpRequest object has a withCredentials property. To enable cross-domain requests in environments that do not support cors yet but do allow cross-domain XHR requests (windows gadget, etc), set $.support.cors = true;. CORS WD
  • cssFloat is equal to true if the name of the property containing the CSS float value is .cssFloat, as defined in the CSS Spec. (It is currently false in IE, it uses styleFloat instead).
  • hrefNormalized is equal to true if the .getAttribute() method retrieves the href attribute of elements unchanged, rather than normalizing it to a fully-qualified URL. (It is currently false in IE, the URLs are normalized).
    DOM l3 spec
  • htmlSerialize is equal to true if the browser is able to serialize/insert <link> elements using the .innerHTML property of elements. (is currently false in IE).
    HTML5 WD
  • leadingWhitespace is equal to true if the browser inserts content with .innerHTML exactly as provided—specifically, if leading whitespace characters are preserved. (It is currently false in IE 6-8).
    HTML5 WD
  • noCloneChecked is equal to true if cloned DOM elements copy over the state of the .checked expando. (It is currently false in IE). (Added in jQuery 1.5.1)
  • noCloneEvent is equal to true if cloned DOM elements are created without event handlers (that is, if the event handlers on the source element are not cloned). (It is currently false in IE).
    DOM l2 spec
  • opacity is equal to true if a browser can properly interpret the opacity style property. (It is currently false in IE, it uses alpha filters instead).
    CSS3 spec
  • optDisabled is equal to true if option elements within disabled select elements are not automatically marked as disabled.
    HTML5 WD
  • optSelected is equal to true if an <option> element that is selected by default has a working selected property.
    HTML5 WD
  • scriptEval() is equal to true if inline scripts are automatically evaluated and executed when inserted into the document using standard DOM manipulation methods such as .appendChild() and .createTextNode(). (It is currently false in IE, it uses .text to insert executable scripts).
    Note: No longer supported; removed in jQuery 1.6. Prior to jQuery 1.5.1, the scriptEval() method was the static scriptEval property. The change to a method allowed the test to be deferred until first use to prevent content security policy inline-script violations.
    HTML5 WD
  • style is equal to true if inline styles for an element can be accessed through the DOM attribute called style, as required by the DOM Level 2 specification. In this case, .getAttribute('style') can retrieve this value; in Internet Explorer, .cssText is used for this purpose.
    DOM l2 Style spec
  • submitBubbles is equal to true if the submit event bubbles up the DOM tree, as required by the W3C DOM event model. (It is currently false in IE, and jQuery simulates bubbling).
  • tbody is equal to true if an empty <table> element can exist without a <tbody> element. According to the HTML specification, this sub-element is optional, so the property should be true in a fully-compliant browser. If false, we must account for the possibility of the browser injecting <tbody> tags implicitly. (It is currently false in IE, which automatically inserts tbody if it is not present in a string assigned to innerHTML).
    HTML5 spec

Examples:

Example: Returns the box model for the iframe.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        p { color:blue; margin:20px; }
                                    

                                  

                                  

                                    

                                        span { color:red; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p>
                                    

                                  

                                  

                                    

                                        </p>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      $("p").html("This frame uses the W3C box model: <span>" +
                                    

                                  

                                  

                                    

                                                  jQuery.support.boxModel + "</span>");
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Returns false if the page is in QuirksMode in Internet Explorer

1
 
                                  

                                    

                                      jQuery.support.boxModel

Result:

1
 
                                  

                                    

                                      
                                        false
 POWERED BYHERONOTE
previous page start next page