Apple führt private CSS-Eigenschaft ein, um Liquid-Glass-Effekte zu Webinhalten hinzuzufügen

• Apple hat die private CSS-Eigenschaft -apple-visual-effect hinzugefügt, die in iOS 26 verwendet werden kann
• Diese Eigenschaft ermöglicht es, neue Designeffekte wie Liquid Glass und standardisierte Blur-Materialien auch auf Webinhalte anzuwenden
• Die Funktion ist im Safari-Browser oder in WKWebView standardmäßig nicht aktiviert
• Für die Nutzung in WKWebView muss die private Einstellung useSystemAppearance aktiviert werden, was jedoch eine App-Store-Freigabe erschweren würde
• Die Funktion scheint vor allem intern bei Apple selbst verwendet zu werden; gewöhnliche Entwickler können sie derzeit nicht direkt nutzen

---

Überblick

• Der Autor schaut sich aus Interesse regelmäßig das GitHub ChangeLog von WebKit an, um kommende iOS-Updates vorherzusagen
• Kürzlich entdeckte er direkt nach der WWDC einen Pull Request in WebKit mit dem Titel „[Materials] Rename 'hosted blur' materials to reference 'glass'“
• Das auf der WWDC 2025 hervorgehobene Liquid Glass ist die größte Änderung an der Benutzeroberfläche (UI) seit iOS 7
• Bislang war diese Designänderung nur auf native UI beschränkt, doch dieser PR deutet eine Verbindung zu Web Views an

Apples private CSS-Eigenschaft

• Der PR zeigt, dass Apple die private CSS-Eigenschaft -apple-visual-effect eingeführt hat
• Mit dieser Eigenschaft lässt sich unter iOS 26 der Liquid-Glass-Effekt anwenden, etwa -apple-system-glass-material
• In allen Versionen können auch standardisierte Blur-Materialien wie -apple-system-blur-material-thin verwendet werden
• Solche Materialien werden auch in der offiziellen Design-Richtlinie erwähnt

Praktische Einsetzbarkeit

• Selbst wenn man das CSS in Safari bearbeitet und anwenden möchte, funktioniert es im Web nicht
• Auch in Apps auf Basis von WKWebView ist es standardmäßig deaktiviert
• Damit es funktioniert, muss useSystemAppearance in WKPreferences auf true gesetzt werden; da diese Einstellung selbst privat ist, kann sie offiziell nicht genutzt werden
• Wenn man den Wert inoffiziell per Hack aktiviert und dann das folgende CSS anwendet, lässt sich der Effekt sehen

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

CSS-Beispiel und bedingte Anwendung

• Apple hat diesen Effekt als CSS-Eigenschaft umgesetzt, sodass sich je nach Unterstützung einfach unterschiedliche Regeln festlegen lassen

• Mit einer @supports-Abfrage kann -apple-visual-effect zum Beispiel nur auf unterstützten Geräten angewendet werden

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

Bedeutung und Grenzen

• Abgesehen von Apple intern ist dies eine Funktion, die normale Entwickler nicht verwenden können
• Sie liefert jedoch einen Hinweis darauf, warum Webviews innerhalb von Apps oft keinen guten Ruf haben
• Nahtlos integrierte Webviews fallen den Nutzern als solche gar nicht auf, sodass Probleme seltener sichtbar werden
• Dass Apple dies entwickelt hat, deutet indirekt darauf hin, dass es in eigenen Diensten oder Apps tatsächlich eingesetzt wird
• Es ist gut möglich, dass man im Alltag unbemerkt bereits UI auf Basis von Webviews erlebt