css - 我如何检测 CSS 过滤器的特征？

Question

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

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

你不知道吗，h1 将完全以灰度呈现。 Everything old is new again .

无论如何 — 有谁知道为此进行特征检测的任何方法吗？

如果 filter 不起作用，我需要能够应用其他样式。

Answer 1

所谓的已更新答案:

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

Alan H. 在第 10 个版本之前提到了 IE。版本，支持 filter css 属性，但不是我们所知道的方式(CSS3 filter 我的意思)。

因此，如果我们只想检测 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 中 filter 的现场演示，请查看此处:

• CSS Filter Effects

还有 2 个资源供您使用:

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

在我撰写此答案时，您必须使用 webkit 供应商前缀才能使其正常工作。