如何检测CSS过滤器？

在某些浏览器中,包括Chrome稳定版,您可以这样做：

h3 {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

你不会知道,h1将完全渲染成灰度. Everything old is new again.

无论如何 – 有谁知道任何方式来检测特征？

我需要能够应用其他样式,如果fil过滤器不起作用.

解决方法

所谓UPDATED答案：

由于OP提到了一个好点,我正在更新答案,但是没有任何相关或与之前的答案相矛盾,这只是浏览器检测.

艾伦H.提到IE在10日之前.版本,支持过滤器css属性,但不是我们都知道的(CSS3过滤器我的意思).

所以如果我们想要检测CSS3过滤器,我们应该继续使用一点浏览器检测.正如我在my comments提到的.

使用documentMode属性,并将其与简单的特征检测结合起来,我们可以在IE中排除所谓的误报.

function css3FilterFeatureDetect(enableWebkit) {
    //As I mentioned in my comments,the only render engine which truly supports
    //CSS3 filter is webkit. so here we fill webkit detection arg with its default
    if(enableWebkit === undefined) {
        enableWebkit = false;
    }
    //creating an element dynamically
    el = document.createElement('div');
    //adding filter-blur property to it
    el.style.csstext = (enableWebkit?'-webkit-':'') + 'filter: blur(2px)';
    //checking whether the style is computed or ignored
    //And this is not because I don't understand the !! operator
    //This is because !! is so obscure for learning purposes! :D
    test1 = (el.style.length != 0);
    //checking for false positives of IE
    //I prefer Modernizr's smart method of browser detection
    test2 = (
        document.documentMode === undefined //non-IE browsers,including ancient IEs
        || document.documentMode > 9 //IE compatibility moe
    );
    //combining test results
    return test1 && test2;
}

Original Modernizr source

if(document.body.style.webkitFilter !== undefined)

要么

if(document.body.style.filter !== undefined)

额外的信息：

只需简单的功能检测就可以使用我上面的代码.有关支持的功能的列表,请查看：

> Filter Effects 1.0
> Filter Effects 1.0 functions

要在Chrome中现场演示过滤器,请查看：

> CSS Filter Effects

还有2个资源给你：

> CSS Filter Effects Landing in WebKit
> When can I use CSS Filter Effects?

在我写这个答案的时候,你必须使用webkit供应商的前缀使它工作.

如何检测CSS过滤器？

解决方法

相关文章