CSS : fournir une alternative au filtre de toile de fond indisponible

La fonctionnalité de filtre de toile de fond en CSS reste inaccessible dans la plupart des navigateurs contemporains. Alors que nous anticipons son soutien futur, la découverte de solutions alternatives devient impérative.

Une méthode pour obtenir un effet similaire consiste à utiliser un fond avec une transparence subtile. Le code CSS ci-dessous illustre cette approche :

/* Slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* Blurred effect with backdrop support */
@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);
  }
}

Lorsque le filtre de fond n'est pas pris en charge, l'arrière-plan légèrement transparent servira de solution de repli. Les navigateurs qui prennent en charge le filtre de fond afficheront un effet flou.

Des exemples illustrant les effets sans et avec la prise en charge du filtre de fond sont fournis ci-dessous :

[Image de repli transparent]
[ Image floue]

En adoptant cette stratégie, vous pouvez intégrer un filtre visuellement attrayant sur les éléments, même dans les navigateurs dépourvus de capacités natives de filtre de fond.