Backdrop-filter Unavailable: How to Achieve Blurred Background Effects in Modern Browsers?

CSS Workaround: A Temporary Solution for the Elusive backdrop-filter

Despite being a promising CSS feature, backdrop-filter remains out of reach for modern browsers. As of today, only Chrome 51 (with Experimental Web Platform flag) and Safari 9.1 (with -webkit- prefix) offer any level of support for it. Firefox 47, unfortunately, lags behind in this aspect.

This limited availability has left developers scrambling for alternative solutions to achieve the desired visual effects. Until backdrop-filter becomes universally accessible, one workaround that has gained popularity is to use a slightly transparent background as a fallback:

<code class="css">/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}</code>

In browsers that support backdrop-filter (Safari and Chrome with experimental features enabled), this code effectively renders a blurred background effect. For browsers without support, it serves as a fallback, providing a slightly transparent background.

As the CSS specification for backdrop-filter continues to evolve, this workaround may require adjustments in the future. However, for the time being, it offers a creative way to bring the desired visual experience to users across different browser platforms.

The above is the detailed content of Backdrop-filter Unavailable: How to Achieve Blurred Background Effects in Modern Browsers?. For more information, please follow other related articles on the PHP Chinese website!