firefox backdrop-filter workaround

workaround.css

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .blurred-container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .blurred-container {
    background-color: rgba(255, 255, 255, .8);
  }
}

Thanks. This works great!

Works like a charm!

Obrigada por compartilhar uma excelente alternativa para este problema.

Thanks, works perfectly! Thanks for teaching me how to use @supports as well.

Thanks!

Wouldn't only using:

.blurred-container { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

Have the same exact behaviour as using this?

s

Awesome that works

Tested on Firefox v110 and v111 - it no longer respects the @supports operator.
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) falsely reports true on those versions of Firefox.

Respectively, @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) falsely reports false.

UPDATE:
I ended up using the following CSS code to target Firefox specifically:
@-moz-document url-prefix()