javascript - JS feature detection to detect the usage of -webkit-calc over calc -

so i'm quite aware in general, 1 should use feature detection in js vs. browser detection. example of being pushed jquery 1.9's drop of $.browser.

in addition, in every article read, says never use browser detection.

but have condition need dynamically calculate # of "slots" available in js layout, , it's being done through calc(100%/{0}), {0} # of slots available.

of course, in ipad, .css("height", "calc(100%/3)") fail, must prefixed -webkit-.

so, can tell me how should use feature detection (instead of old $.browser.webkit) detect requires this?

create dummy element, insert in document, use .csstext.height = 'calc(100px - 50px);', , check if element has expected height. repeat every vendor-prefix.

side note: kind of questions, should in source code of modernizr. others have contributed such feature detection scripts, such calc.js.

---

modernizr detects whether feature present, doesn't tell prefix has used. code below shows how correct prefix:

var calc = (function(){     var dummy = document.createelement('div');     var props = ['calc', '-webkit-calc', '-moz-calc', '-o-calc'];     (var i=0; i<props.length; ++i) {         var prop = props[i];         dummy.style.csstext = 'width:' + prop + '(1px);';         if (dummy.style.length)             return prop;     } })();  // usage example: $('selector').css('height', calc + '(100% / 3)'); 

(i did not add -ms- prefix, because ie started supporting without prefix - see http://caniuse.com/calc.)