Apple introduit une propriété CSS privée pour ajouter l’effet Liquid Glass au contenu web

• Apple a ajouté la propriété CSS privée -apple-visual-effect utilisable dans iOS 26
• Cette propriété permet d’appliquer au contenu web de nouveaux effets de design comme Liquid Glass et les matériaux de flou standard
• Cette fonctionnalité n’est pas activée par défaut dans le navigateur Safari ni dans WKWebView
• Pour l’utiliser dans WKWebView, il faut activer un réglage privé appelé useSystemAppearance, mais le modifier rend l’approbation sur l’App Store difficile
• La fonctionnalité semble surtout utilisée en interne par Apple, et les développeurs ordinaires ne peuvent pas l’exploiter pour l’instant

---

Vue d’ensemble

• L’auteur consulte souvent par curiosité le ChangeLog GitHub de WebKit pour anticiper les prochaines mises à jour d’iOS
• Juste après la WWDC, il a repéré dans WebKit une pull request intitulée “[Materials] Rename 'hosted blur' materials to reference 'glass'”
• Mis en avant à la WWDC 2025, Liquid Glass constitue le plus grand changement d’interface utilisateur (UI) depuis iOS 7
• Jusqu’ici, cette évolution du design concernait uniquement l’UI native, mais cette PR laisse entrevoir un lien avec les vues web

La propriété CSS privée d’Apple

• La PR révèle qu’Apple a introduit une propriété CSS privée appelée -apple-visual-effect
• Grâce à cette propriété, il devient possible dans iOS 26 d’appliquer l’effet Liquid Glass (par exemple -apple-system-glass-material)
• Il est aussi possible, sur toutes les versions, d’utiliser des matériaux de flou standard (-apple-system-blur-material-thin, etc.)
• Ces matériaux sont également mentionnés dans le guide de design officiel

Possibilités d’utilisation concrètes

• Même en modifiant le CSS dans Safari pour essayer de l’appliquer, cela ne fonctionne pas sur le web
• Dans les apps basées sur WKWebView, la fonctionnalité est désactivée par défaut
• Il faut définir useSystemAppearance de WKPreferences sur true pour que cela fonctionne, mais ce réglage est lui-même privé, donc inutilisable par la voie officielle
• En activant officieusement cette valeur via un hack puis en appliquant le CSS suivant, on peut voir l’effet

  .toolbar {  
    border-radius: 50%;  
    -apple-visual-effect: -apple-system-glass-material;  
    height: 75px;  
    width: 450px;  
  }  
  

Exemple CSS et application conditionnelle

• Apple a créé cet effet sous forme de propriété CSS afin de permettre de définir simplement différentes règles selon la disponibilité du support

• Par exemple, on peut utiliser une requête @supports pour n’appliquer -apple-visual-effect que sur les appareils compatibles

  .toolbar {  
    border-radius: 50%;  
    height: 75px;  
    width: 450px;  
    background: rgba(204, 204, 204, 0.7);  
  }  
  
  @supports (-apple-visual-effect: -apple-system-glass-material) {  
    background: transparent;  
    -apple-visual-effect: -apple-system-glass-material  
  }  
  

Portée et limites

• Il s’agit d’une fonctionnalité inutilisable par les développeurs ordinaires en dehors d’Apple
• Mais elle donne un indice sur la raison pour laquelle les webviews intégrées aux apps ont parfois mauvaise réputation
• Lorsqu’une webview est intégrée de manière fluide et transparente, l’utilisateur ne remarque même pas sa présence, ce qui réduit les occasions où les problèmes deviennent visibles
• Le fait qu’Apple ait développé cela suggère indirectement qu’elle l’utilise réellement dans ses propres services ou applications
• Il est possible que vous fassiez déjà l’expérience, sans le savoir, d’interfaces basées sur des webviews au quotidien