Wenden Sie eine andere Reihe von Stilen an, wenn Hintergrundfilter nicht unterstützt wird

Question

Ich benutze Ionic 2 - Beta 10, um eine mobile App zu entwickeln. Und es gibt ein Div, auf das ich die Hintergrundfilter-Unschärfe anwenden möchte.

Ich weiß, dass dies nicht in den meisten unterstützt wird, aber ich habe ein Fallback-Design ohne die Unschärfe für Fälle, in denen Hintergrund-Filter nicht unterstützt wird.

Für Versionen, die nicht Hintergrund-fiter nicht unterstützt, ich möchte folgendes CSS verwenden,

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

Für Versionen, die Hintergrund-Filter unterstützen, möchte ich dies nutzen,

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

Das Problem ist, dass die Deckkraft für den Fallback unterschiedlich ist.

Wie kann ich einen anderen Stil bestimmen und festlegen, wenn ein Attribut nicht unterstützt wird?

Answer 1

Ich weiß, dass Sie die Frage vor einer Weile gefragt, aber das könnte man noch helfen:

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