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). There are some excellent resources that explain how feature detection works:
- http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting
- http://www.jibbering.com/faq/faq_notes/not_browser_detect.html
- http://yura.thinkweb2.com/cft/
jQuery comes with a number of properties included, you should feel free to add your own. Many of these properties are rather low-level so it’s doubtful that they’ll be useful in general day-to-day development, but mostly used by plugin and core developers.
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 thehref
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 spechtmlSerialize
: 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 wdleadingWhitespace
: 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 wdnoCloneEvent
: 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 specobjectAll
: 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).DOM l1 specopacity
: 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 specscriptEval
: Is equal to true if inline scripts are automatically evaluated and executed when inserted to the document using standard DOM manipulation methods, such asappendChild()
andcreateTextNode()
. (It is currently false in IE, it uses.text
to insert executable scripts).HTML5 WDstyle
: 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 spectbody
: Is equal to true if a<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 insertstbody
if it is not present in a string assigned toinnerHTML
).HTML5 spec
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="/scripts/jquery-1.4.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