バックドロップフィルタがサポートされていない場合は、別のスタイルセットを適用してください。

Question

モバイルアプリを開発するためにIonic 2-Beta 10を使用しています。そして、そこには、バックグラウンドフィルタのぼかしを適用したいdivがあります。

これはほとんどの場合サポートされていませんが、backdrop-filterがサポートされていない場合は、ぼやけのないフォールバックデザインがあります。背景-fiterをサポートしていないバージョンの

、私は次のCSSを使用したい、

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

そして背景・フィルタをサポートしていますバージョンについては、私はこれを使用したい、

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

フォールバックの不透明度が異なるという問題があります。

1つの属性がサポートされていない場合、別のスタイルを決定して設定するにはどうすればよいですか？

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); 
    } 
}