css - 如果不支持背景滤镜，则应用一组不同的样式

Question

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

我知道这在大多数情况下不受支持，但我有一个后备设计，在不支持背景过滤器的情况下没有模糊。

对于不支持backdrop-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);
   }
 }