Filtre de toile de fond indisponible : comment obtenir des effets d'arrière-plan flou dans les navigateurs modernes ?

Solution de contournement CSS : une solution temporaire pour le filtre de toile de fond insaisissable

Bien qu'il s'agisse d'une fonctionnalité CSS prometteuse, le filtre de toile de fond reste hors de portée pour les navigateurs modernes. À l'heure actuelle, seuls Chrome 51 (avec l'indicateur Experimental Web Platform) et Safari 9.1 (avec le préfixe -webkit-) offrent un niveau de prise en charge. Firefox 47, malheureusement, est à la traîne sur cet aspect.

Cette disponibilité limitée a obligé les développeurs à se démener pour trouver des solutions alternatives pour obtenir les effets visuels souhaités. En attendant que le filtre de fond devienne universellement accessible, une solution de contournement qui a gagné en popularité consiste à utiliser un arrière-plan légèrement transparent comme solution de repli :

<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>

Dans les navigateurs prenant en charge le filtre de fond (Safari et Chrome avec des fonctionnalités expérimentales activées). , ce code restitue effectivement un effet d'arrière-plan flou. Pour les navigateurs sans support, il sert de solution de secours, fournissant un arrière-plan légèrement transparent.

À mesure que la spécification CSS pour background-filter continue d'évoluer, cette solution de contournement peut nécessiter des ajustements à l'avenir. Cependant, pour le moment, il offre un moyen créatif d'apporter l'expérience visuelle souhaitée aux utilisateurs sur différentes plates-formes de navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!