How to check a certain CSS capability in a browser using JavaScript?

Question

How to check a certain CSS capability in a browser using JavaScript without detecting its vendor, userAgent, or appName?

Answer 1

I've used something like this when creating a cssHook in jQuery:

Testing for a CSS Property:

var div = document.createElement("div"),
    divStyle = div.style;

    $.support.boxSizing =
    divStyle.MozBoxSizing === ''? 'MozBoxSizing' : 
    (divStyle.WebkitBoxSizing === ''? 'WebkitBoxSizing' : 
    (divStyle.MsBoxSizing === ''? 'MsBoxSizing' :
    (divStyle.boxSizing === ''? 'boxSizing' : false)));

    div = divStyle = null; //release memory

Testing for a CSS Property Value:

var div = document.createElement( "div" ),
    css = "background-image:gradient(linear,left top,right bottom, from(#9f9), to(white));background-image:-webkit-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-moz-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-o-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-ms-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-khtml-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:linear-gradient(left top,#9f9, white);background-image:-webkit-linear-gradient(left top,#9f9, white);background-image:-moz-linear-gradient(left top,#9f9, white);background-image:-o-linear-gradient(left top,#9f9, white);background-image:-ms-linear-gradient(left top,#9f9, white);background-image:-khtml-linear-gradient(left top,#9f9, white);";    

    div.style.cssText = css;

$.support.linearGradient =
    div.style.backgroundImage.indexOf( "-moz-linear-gradient" )  > -1 ? '-moz-linear-gradient' :
    (div.style.backgroundImage.indexOf( "-webkit-gradient" )  > -1 ? '-webkit-gradient' :
    (div.style.backgroundImage.indexOf( "gradient" )  > -1 ? 'gradient' : false));

    div= null; //release memory