Apply a different set of styles if backdrop-filter is not supported

Question

I'm using Ionic 2 - Beta 10 to develop a mobile app. And there is a div I want to apply the backdrop-filter blur to.

I know this is not supported in most, but I have a fall back design without the blur for cases where backdrop-filter is not supported.

For versions that does not support backdrop-fiter, I want to use the following css,

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

And for versions that do support backdrop-filter, I want to use this,

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

The problem is that the opacity is different for the fallback.

How do I determine and set a different style if one attribute is not supported?

Answer 1

I know you asked the question a while ago, but this might still help you:

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