Liquid Glass en CSS : backdrop-filter accessible et robuste

Commencer par le fallback

La base doit fonctionner sans flou. Donnez à la surface une couleur suffisamment opaque, une bordure et une ombre. Ensuite seulement, activez le filtre dans une requête de support. Cette progression évite les panneaux transparents sur les navigateurs limités et pendant les captures, impressions ou modes d’économie.

css
.glass {
  background: rgb(20 25 38 / 0.94);
  border: 1px solid rgb(255 255 255 / 0.16);
  box-shadow: 0 18px 55px rgb(0 0 0 / 0.28);
}

@supports (backdrop-filter: blur(1px)) {
  .glass {
    background: rgb(20 25 38 / 0.68);
    backdrop-filter: blur(18px) saturate(125%);
  }
}

Des tokens plutôt que des valeurs isolées

Centralisez opacité, blur, bordure, reflet et ombre. Un composant consomme un niveau de matière; il ne réinvente pas la recette. Des tokens comme --glass-fill, --glass-blur et --glass-stroke facilitent les thèmes clair et sombre ainsi que le mode contraste renforcé.

Évitez d’empiler plusieurs surfaces filtrées. Chaque couche crée un nouveau contexte de composition et peut modifier la couleur perçue. Une surface parent peut porter le blur tandis que les enfants utilisent des fonds semi-opaques simples.

Protéger le contraste

Le texte ne doit pas dépendre du contenu situé derrière. Ajoutez une teinte assez dense et testez la composition sur plusieurs scènes. Pour les petites tailles, augmentez l’opacité plutôt que l’ombre du texte. Les icônes informatives exigent le même contraste que le texte voisin.

Un pseudo-élément interne peut créer un reflet sans affecter le contenu. Placez-le avec pointer-events: none et limitez son intensité. L’effet reste décoratif et n’intercepte aucun clic.

Préférences et modes système

prefers-reduced-transparency n’est pas encore universel, mais peut déjà déclencher une surface opaque. prefers-reduced-motion supprime les transitions de déplacement et de reflet. forced-colors doit restaurer bordures et couleurs système plutôt que conserver une transparence incompréhensible.

css
@media (prefers-reduced-motion: reduce) {
  .glass { transition: none; }
}

@media (forced-colors: active) {
  .glass {
    background: Canvas;
    color: CanvasText;
    border: 1px solid ButtonText;
    backdrop-filter: none;
  }
}

Focus, cible et sémantique

Une carte cliquable doit être un lien ou un bouton, pas une div avec un gestionnaire de clic. Utilisez :focus-visible pour un anneau de deux pixels qui ne se confond pas avec le reflet. Conservez une cible d’au moins 44 pixels et ne placez pas plusieurs actions ambiguës dans toute la carte.

Le verre ne corrige aucune sémantique. Il ne fait qu’habiller une structure déjà utilisable au clavier, au tactile et au lecteur d’écran.

Checklist de livraison

Désactivez backdrop-filter dans les outils de développement. Activez réduction des mouvements et couleurs forcées. Naviguez uniquement au clavier. Placez la surface sur les fonds les plus clairs et sombres du produit. Si chaque scénario reste lisible, la couche progressive fait son travail.

Revenez aux fondamentaux de composition ou poursuivez avec les interactions React typées et l’audit performance.