如果不支持背景滤镜，则应用不同的样式集

Question

我正在使用Ionic 2 - Beta 10开发移动应用程序。有一个div我想应用背景模糊滤镜。

我知道这在大多数情况下都不被支持，但是如果不支持背景滤镜的情况下，我有一个没有模糊的回落设计。

对于不支持的背景下，fiter版本，我想用下面的CSS，

.panel { 
background-color: #FFF; 
opacity: 1; 
} 

而且对于支持的背景下，过滤器的版本，我想用这个，

.panel { 
background-color: #FFF; 
opacity: .5; 
backdrop-filter: blur(5px); 
-webkit-backdrop-filter: blur(5px); 
} 

问题是不透明度对于回退是不同的。

如果一个属性不被支持，我该如何确定和设置不同的样式？

Answer 1

我知道你问的问题前一段时间，但是这可能仍然帮助您：

/* Gets applied everywhere */ 
.panel { 
    background-color: #FFF; 
    opacity: 1; 
} 

/* Gets applied if supported only */ 
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) { 
    .panel { 
    background-color: #FFF; 
    opacity: .5; 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); 
    } 
}