I'm currently using:

.blurBox {
    background-color: #FFFFFF90;
    backdrop-filter: blur(1rem);
}

But since FireFox doesn't currently support backdrop-filter: blur(), it uses the fallback of #FFFFFF90. The problem is that the fallback is too transparent. I can't simply change the fallback because it will affect the way the backdrop-filter looks as well.

My question is how do I make a separate fallback color that the backdrop-filter isn't reliant on? I want to avoid doing browser-specific CSS if possible.

CodePudding user response：

• Try the @supports feature query in CSS:

.blurBox {
  --fallback-background: #FFF9;
  --background: #FFF;
  background-color: var(--fallback-background); /* Fallback */
}
@supports (backdrop-filter: blur()) {
  .blurBox {
    background-color: var(--background);
    backdrop-filter: blur(1rem);
  }
}

• For browsers that don't understand what a supports query is:
  They likely also don't support backdrop filter - so they will run the fallback, and then completely ignore everything inside the supports rule.

• For browsers that don't support backdrop-filter: blur():
  They will run the fallback, and then ignore everything inside the supports rule.

• For browsers that understand the supports query and support backdrop-filter: blur():
  Everything inside the supports rule will be run, and the background-color will override the fallback.

CodePudding user response：

According to my ken you can't what you can do is use Hsl I think it will do the work (ofcourse not the blur effect) as there you can play with hue saturation and opacity.

background-color:hsl(5, 20%, 90%);

You can also use support

@supports (backdrop-filter: blur(1rem) {
 .blurBox {
    background-color: #FFFFFF90;
    backdrop-filter: blur(1rem);
}
}