jQuery API

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.

  • 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 perform feature detection. This means that prior to executing code which relies on a browser feature, we test to ensure that the feature works properly. To make this process simpler, jQuery performs many such tests and makes the results available to us as properties of the jQuery.support object.

The values of all the support properties are determined using feature detection (and do not use any form of browser sniffing).

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

While jQuery includes a number of properties, developers should feel free to add their own as their needs dictate. Many of the jQuery.support properties are rather low-level, so they are most useful for plugin and jQuery core development, rather than general day-to-day development.

The tests included in jQuery.support are as follows:

  • 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.
  • 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).
  • 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).
  • 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).
  • 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).
  • objectAll: Is equal to true if the .getElementsByTagName() method returns all descendant elements when called with a wildcard argument ('*'). (It is currently false in IE 7 and IE 8).
  • 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).
  • scriptEval: Is equal to true if inline scripts are automatically evaluated and executed when inserted to 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).
  • 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.
  • 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).

Examples:

Example: Returns the box model for the iframe. 

<!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>

Demo:

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

jQuery.support.boxModel

Result:

false

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for jQuery.support below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • khanh
    Feature detection sounds all fine and dandy, but when I am writing some code that doesn't work in a certain browser, the quickest method is browser detection.

    Horizontally centering an element using auto margins works for all browsers except IE. What feature do I test for? I have no idea. But I do know which browser it doesn't work in.

    I can see why feature detection would be useful in certain situations eg. if a browser is in quirks/strict mode. The best compromise would be to utilise both methods.

    In light of this "We recommend against using this property, please try to use feature detection instead" should be removed from the jQuery.browser documentation page. It is misleading.
  • dean
    What if you have a site where certain areas only work in IE? I know this is not ideal, but it is the situation I'm in. Firefox etc will not work so I have to only show the page(s) if the user's browser is IE.
  • Hans
    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).


    This is counter-intuitive. hrefNormalized is true when it is not normalized and vice-versa. A more appropriate name would then be hrefNotNormalized.
  • RobH
    Note: objectAll is not detected in v1.4. This means it is not possible, as far as I can tell, to detect IE6 using jQuery.support.

    The 'naughty' way: jQuery.browser.msie && jQuery.browser.version == 6
  • ledlogic
    I would suggest $.support.bleedingElements for ie6 select elements that bleed through other elements.
  • James
    I'd like to suggest adding $.support.positionFixed
  • Xavier
    Could be usefull to have in jQuery more support :
    $.support.colorRgba
    $.support.colorHsl(a)
    $.support.alpha
    $.support.fontFace
    $.support.transition
    $.support.transform
    With those new properties we can delegate more to the css core and add prevention for olds navigators.
  • A plugin would be a better place for adding such support. Even better: Modernizr.
  • Max
    I like the idea of feature detection, but suggesting that it's the end-all-be-all solution for cross-browser compatibility just isn't accurate. How do I tell if I need to create an iframe shim over the top of form and flash elements in order to display content over form/flash elements? jQuery.support can't help with that, we have to use jQuery.browser. Or what about detecting if a browser supports html5 attributes async or defer? Have to check for browser there, too.

    A lot of people add CSS on to DOM nodes using jQuery -- that's a big use case. But while CSS interpretations vary by browser (and much more than by box model), we're not "supposed" to use jQuery to determine which browser we're running? That's just...weird.
  • Of course there are exceptions to the rule.