Rather than working out the engine and version with Javascript for doing stuff that may work differently in different browsers, it’s better to use feature detection instead. jQuery has the $.support property which has a number of flags to indicate the presence of various features or bugs. I’ll look at a couple of the more useful flags here, but be sure to read the documentation for full details about all the properties.
Show all the flags using $.each
The following jQuery code loops through all the flags available using jQuery’s $.each function appending the values to an unordered list. This needs to be done in a document ready block as some of the properties are null until document ready.
$(document).ready(function() {
$("#example").html('<ul></ul>');
var example_ul = $("#example ul");
$.each($.support, function(key, val) {
example_ul.append('<li><strong>' + key + "</strong> : " + val + "</li>");
});
});
Here’s the above code in action. It will not work if you are reading this in a feed reader so be sure to click through to view this post in a web browser.
boxModel flag
The $.support.boxModel flag indicates whether or not the browser supports the W3C CSS Box Model. This property is null until the document is ready, and can be useful if you need to make calculations based on the width of an element that has margins, padding and/or borders. It’s true for all browsers except for Internet Explorer when it’s in quirks mode.
The simplest solution is to make sure IE is in standards mode and not in quirks mode then you don’t need to worry about whether the box model is being adhered to or not. However, in some cases it may not be possible to simply change the doctype (or add one) which makes IE go into standards compliant mode as it break other stuff. In this case using jQuery’s $.support.boxModel flag may be useful.
noCloneEvent flag
Another potentially useful flag is the noCloneEvent flag. If it’s true then DOM elements that are cloned will be created without cloning any event handlers (which is the case for non-IE browsers); if it’s false then cloned DOM elements will also have their event handlers cloned (this is the case for Internet Explorer).
I personally think the naming of this flag is a bit confusing (cloneEvent would be better with the true/false reversed) but I can see the use of this flag should you need to clone a DOM element and need to know if event handlers attached to the element need to be recreated if they will not be cloned.
Other flags
The boxModel and noCloneEvent flag are the two I see as being the most useful – if I’d known about these properties in the past I would have used the boxModel one on at least one website. Make sure to read the documentation for a basic overview of each of the other flags.