How To Check Browser Support For Capabilities / Events?

In the past we used browser sniffing to infer if certain events or capabilities were available. I understand that browser sniffing has been 'deprecated' or 'shunned' in favor of fe

Solution 1:

You can't detect mutation events, and modernizr doesn't work for this (since people are going to spit that out as the defacto answer).

The only way to "detect" support for mutation events is to try and trigger the event. Pseudo code:

var div = document.createElement('div'), supported = false;
div.addEventListener('DOMNodeInserted', function(){ supported = true; });
div.appendChild(div.cloneNode(true));

Note that the above code will not work as-is if it's in linear code because the event listener is async. The general idea is valid, however, perhaps best implemented with a callback.

Solution 2:

Checkout http://www.modernizr.com

Solution 3:

To answer the generic - how do I do feature sniffing - I use the jQuery.support object.