css - 功能检测 CSS 过滤器不起作用

Question

我正在尝试通过@supports 规则检测浏览器是否支持过滤器。 @supports 似乎适用于许多情况，但是，当我在过滤器属性上尝试它时，它总是在 Chrome 上返回失败，即使它确实支持过滤器，特别是:模糊。

查看此演示:http://jsbin.com/gikiwode/1/

我尝试了几种语法，@supports not (filter:blur)，@supports not (filter:blur(12px))，但是没有大小写.. .

我错过了什么吗？

Answer 1

也许包括 -webkit- 前缀？

@supports (-webkit-filter: blur()){
  body:before{
    content: 'Can do filters.';
  }
}

DEMO