jQuery API

jQuery.support

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).
  • 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.min.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.
  • Tom
    Not all differences in browser behavior are due to differences in the feature set. Sometimes browsers just display things a few pixels differently, and whatever you are doing to compensate for that may need to carry over into slight variations in the parameters one is passing in Javascript. So it seems to me as though some form of more direct browser detection is needed. The hack would be to know which, if any, features jQuery can detect that are unique to specific browsers.
  • victor
    What if the browser doesn't support JQuery?

    http://docs.jquery.com/Browser_Compatibility

    How do we test for that?
  • victor
    Anyone? I basically just want a way to notify the user if they have a browser that doesn't support jQuery, they should consider upgrading.

    Is there a plugin/extension for that?

    Thanks!
  • besluitloos
    <noscript>Your browser doesn't support Javascript. You can download a newer Internet Browser to upgrade your online experience.</noscript>
  • Test
    And how about the new FileUpload API for browser like gecko 1.9.2?
  • jamesm_webdev
    HTML5?

    How about detection if the browser can use HTML5?
    HTML5 = $.support.HTML5;
    HTML5.video = 1 || 0;
    HTML5.canvas = 1 || 0;
    HTML5.audio = 1 || 0;
    HTML5.(*) = 1 || 0;

    html5enabled = parseInt(
    (typeof HTMLVideoElement != undefined ? 1 : 0) + "" +
    (typeof HTMLAudioElement != undefined ? 1 : 0) + "" +
    (typeof HTMLCanvasElement != undefined ? 1 : 0)
    ) == 111 ? 1 : 0;

    I know that there are many html5 elements but this is just a starter of html5 detection..
  • +1
    I was thinking about the same thing yesterday writing a recap of our HTML5/CSS3 meetup (in Frankfurt) - we had someone present Modernizr.com - this would be great to have as a jQuery plugin.
  • Any talk of extending this for CSS3 features? Detecting CSS3 transition support would be particularly useful (to support it with jQuery.animate())
  • rglazebrook
    I wrote a script that adds CSS3 border-radius support information to the jQuery.support object: http://www.cssnewbie.com/test-for-border-radius...
  • I put together a jQuery.support hack to check CSS3 transition support - http://gist.github.com/373874
  • Augur
    So, the only exceptions that I am seeing here are for IE. Basically it seems we should just collectively give the middle finger to IE and enjoy the power that WebKit and Mozilla give us. Why do we have to dumb down and hack our code to accommodate the albatross of browsers? Let IE fall by the way side if they will not play on the same standards as everyone else. There is absolutely no reason that this browser should be #1 with the exception that Grandma gets it already installed on her mail ordered Dell. Can't we just lobby these companies to include a webkit or mozilla browser as well?
  • I wrote some $.support augmentations for detecting css support of display:'table' and 'table-cell':
    http://gist.github.com/362170
  • I agree with Hans, the hrefNormalized behavior seems backwards. I understand the underlying rationale, if something complies with spec then it returns true, but it's still counter intuitive. tbody seems to suffer the same fate, $.support.tbody == true if the browser does NOT insert a tbody tag. It's a bit confusing, maybe changing the name to $.support.preserveHref and $.support.optionalTbody would be an acceptable solution.

    It does seem like a good idea to have $.support.* return true if the thing being tested conforms to spec, but they should be named in such a way that the code makes sense.
  • Talk about bad habits, I haven't even done any cross browser checking with my rough drafts. If it looks good in Chrome and Firefox I call it good enough. I'm afraid of the IE interpretation, so I've delayed worrying about this as long as possible.
  • I want to present an addition to the existing properties of this object. There were many requests to get a way to detect the IE6. For those who need it the most, I propose to use the discovery of specific CSS rules.

    http://noteskeeper.ru/article/detect-ie6-via-cs...

    The article was written in Russian, but I hope the code is clean and clear without comments.
  • 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.
  • Bjorn Johnson
    This is a fantastic point. The deprecation warning in the documentation is based more on theology than practice. Writing your own plugin to test for certain features is fine and even great, but if your requirement says "For IE do this...", then it makes perfect sense to use jQuery.browser. You could say, "Well, that's a dumb requirement". But not everyone has the leeway or time to explain to clients and colleagues why their requirements are silly.

    It's like trying to find out "where someone works" by asking them the address of their workplace. In some cases, the address IS really what you want to know, to plug into your GPS or whatever. In other cases, you're just looking for the name of the company. To issue a broad statement that you should only ask for an address even if you're just looking for the name of the company would be making something difficult that need not be that way.
  • I've written a test that checks for centering support with `margin:0 auto`:
    http://gist.github.com/362170

    (and `display: table(-cell)` and `position:fixed`)
    hope this works for ya.
  • 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
  • Mark
    Yes, All IE return false for "JQuery.support.objectAll"
  • 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.