如何使用JavaScript在浏览器中检查某个CSS功能？

Question

如何使用JavaScript在浏览器中检查某个CSS功能而不检测其供应商，userAgent或appName？

Answer 1

见jQuery.support

Answer 2

我已经创造了一个jQuery的时候cssHook使用这样的事情：一个CSS属性值

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 

测试：

测试的CSS属性：

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 

Answer 3

这个问题的问题是，每种属性的技术都不同。

一般的想法是使用JavaScript尝试使用该属性，然后测试该属性的某些定义的行为。

看到源代码Modernizr的，特征检测库：

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

例如：

// 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'); 
}; 

在不支持rgba，返回值将浏览器不包含rgba。

另外，正如@DanielB建议的，请看jQuery.support以获得更多灵感。这里的源：

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

Answer 4

你可以使用一个像库这modernizr可以告诉你哪些功能可用于当前访客。