Question

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

Answer 1

在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 2

请参阅jQuery.support

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这样的库，它可以告诉您当前访问者可以使用哪些功能。

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

4 个答案: