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

How to chec开发者_如何学Ck a certain CSS capability in a browser using JavaScript without detecting its vendor, userAgent, or appName?

---

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

---

See jQuery.support

---

The problem with this question is that the technique is different for each property.

The general idea is to use JavaScript to attempt to use the property, and then to test for some defined behaviour of the property.

See the source code to Modernizr, a feature detection library:

http://www.modernizr.com/ - http://www.modernizr.com/downloads/modernizr-2.0.3.js

For instance:

// http://css-tricks.com/rgba-browser-support/
tests['rgba'] = function() {
    // Set an rgba() color and check the returned value

    setCss('background-color:rgba(150,255,150,.5)');

    return contains(mStyle.backgroundColor, 'rgba');
};

In a browser that does not support rgba, the returned value would not contain rgba.

Also, as suggested by @DanielB, look at jQuery.support for more inspiration. Here's the source:

https://github.com/jquery/jquery/blob/master/src/support.js

---

You could use a library like modernizr which can tell you which features are available for the current visitor.