指定した (プロパティ:値) の条件に対応しているブラウザーには {} 内に書かれたスタイルを適用するよ、というもの。新しいスタイルの書き方に対応しているブラウザーにはそれを、対応していないブラウザーには従来の書き方で、かつ見栄えの崩れないようにコンテンツを提供できるよう、CSSを記述することができる（＝プログレッシブエンハンスメント）。
header {
padding: 5px 0;
position: fixed;
top: 0;
width: 100%;
background: rgba(255,255,255,.9);
}
/* -webkit-backdrop-filterが対応されているブラウザーにはそれを、対応していない場合はbackgroundを適用する */
@supports (-webkit-backdrop-filter: blur(5px)) {
header {
-webkit-backdrop-filter: blur(5px);
background: rgba(255,255,255,.5);
}
}