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

[ahwjdekf]

So einen Unsinn sollte man einfach ignorieren und niemand sollte ihn verwenden.

[coremaker]

Als Apple Flash den Garaus machte, habe ich gejubelt, weil die Interessenlage übereinstimmte,
aber ironischerweise fühlt sich die jetzige Entscheidung so an, als würde das bestehende Ökosystem ignoriert.

Ist das die Wiederkehr des IE?

[spp00]

Seit IE war aus Sicht von Frontend-Entwicklern nicht Chrome, sondern Safari in der IE-Position. Wegen Safari müssen Frontend-Entwickler teure Macs kaufen. Es gibt Fälle, in denen es in Chrome und Firefox überall funktioniert, aber nur in Safari nicht oder seltsam dargestellt wird.

[GN⁺]

Hacker-News-Kommentare

• Betriebssystemfunktionen ausschließlich den eigenen Apps bereitzustellen, ist eindeutig eine wettbewerbswidrige Praxis. Wenn man seine dominante Stellung im Handy- und Betriebssystemmarkt nutzt, um im App-Markt Funktionen nur sich selbst zu erlauben und Konkurrenten nicht, ist das ein klares Beispiel dafür
  • Eigentlich wollte ich auf Apple wütend sein, aber ich bin es nicht. Schon beim Lesen der WinAPI-Dokumentation sieht man jede Menge Parameter mit dem Hinweis „reserved“. Betriebssystementwickler bauen oft Funktionen, die nur intern genutzt werden sollen. Diesmal geht es nur um eine UI-Verbesserung, daher sehe ich keinen großen Grund, das privat zu halten, aber vermutlich wollte Apple es einfach nicht dauerhaft pflegen und hat es deshalb nicht öffentlich gemacht
  • Soll das heißen, dass alle nicht standardisierten CSS-Eigenschaften „wettbewerbswidrig“ sind? Dann müsste man Googles „-webkit-tap-highlight-color“ genauso kritisieren. Die Logik wäre ja, dass schon die Praxis, proprietäre CSS-Eigenschaften zu schaffen, verboten werden sollte, und das erscheint mir überzogen
  • Ob das im juristischen Sinn wirklich ein „klares wettbewerbswidriges Verhalten“ ist, ist keineswegs sicher. In den USA würden das Sherman Act und Clayton Act betreffen. Auf der Liste der dort genannten „per se“-Verstöße steht so etwas nicht, daher würde wohl die „rule of reason“ gelten. Dann müsste gezeigt werden, dass das Verhalten dem Wettbewerb unmittelbar schadet, keine nennenswerten positiven Effekte hat und es keine weniger restriktive Alternative gibt. Es wäre schwer nachzuweisen, welchen konkreten Schaden eine CSS-Eigenschaft dem Wettbewerb zufügt, und wenn jemand „liquid glass“-CSS selbst bauen will, hält ihn niemand davon ab, daher dürfte das schwer anwendbar sein
  • Mich würde interessieren, wie du viel stärker eingeschränkte Fälle wie Computerhardware bewertest. Bei Spielkonsolen etwa muss sämtlicher Code kryptografisch signiert sein, und Dritte können ohne Zustimmung des Herstellers keinerlei Software vertreiben
  • Wenn man schlecht lesbaren UI-Text als Wettbewerbsvorteil versteht, könnte man das vielleicht so sehen
• Ich mag „Alastairs große Theorie der In-App-Webviews“: Der Hauptgrund für den schlechten Ruf von In-App-Webviews ist, dass man gut integrierte Webviews als Nutzer gar nicht bemerkt
  • Es gibt einen großen Unterschied zwischen Leuten, die schon einmal selbst Webviews implementiert haben, und Leuten, die nur gehört haben, man müsse eine Web-App einfach in eine native App einpacken. Die meisten gehören zur zweiten Gruppe
  • Deshalb wurde diese Funktion vermutlich eingeführt. Ein günstiger Weg, um zu prüfen, ob eine App ein Drittanbieter-UI-Toolkit nutzt, ist meist, das System-Theme zu ändern und zu schauen, ob die App Theme-, Farb- oder Skalierungsänderungen sauber mitmacht. Wahrscheinlich haben selbst einige von Apple bereitgestellte Apps Themes nicht ordentlich übernommen, weshalb man am Ende eine private CSS-Eigenschaft gebaut hat. Andere Betriebssystemanbieter vermeiden die Probleme mit mehreren halbfertigen Toolkits dagegen, indem sie Theme-Steuerung gleich ganz abschaffen
  • Wenn jemand auch nur ein einziges Beispiel für eine perfekt integrierte Webview-App nennen kann, gebe ich mich geschlagen. Durchschnittliche Nutzer merken es vielleicht nicht, aber wenn es sie wirklich gäbe, wäre das auf Hacker News sicher mindestens einmal erwähnt worden. Bei jeder Webview-Debatte wäre das als Gegenbeispiel gekommen: „Aber die Foo-App ist doch auch als Webview gebaut und funktioniert perfekt“
  • Das ist wie: „Perücken sehen immer falsch aus. Ich habe noch nie eine gesehen, die echt aussah.“
• Alle sagen: „Das muss Apple gebaut haben, weil Apple es selbst braucht“, aber niemand weiß, wo es tatsächlich verwendet wird. Meine Vermutung wären die iCloud-Einstellungen innerhalb der Einstellungen-App oder die Account-Seiten in App Store/Music/TV nach Tap auf das Profil-Icon oben rechts. Das sind meist versteckte Webviews, die möglichst nativ aussehen sollen. Ein Hinweis ist, dass bei langem Drücken Webseitvorschauen für -Links erscheinen. Auch das Benutzerhandbuch in der Tipps-App wäre ein Kandidat. Da würde ich zuerst nachsehen
• Interessant ist, dass alle vermuten, „Apple wird das irgendwo verwenden“, wir aber offenbar nicht erkennen konnten, wo genau. Offenbar begegnen wir auf iOS ständig Webviews, ohne es überhaupt zu merken
  • Gerade bei der Einstellungen-App, besonders im Account- oder iCloud-Bereich, vermute ich oft, dass dort Webviews stecken. Kleinigkeiten wie verzögert erscheinende Icons beim Laden deuten für mich darauf hin
  • Auch die App Store-App scheint sehr viele Webviews zu verwenden
  • Soweit ich weiß, nutzen auch Mail und Kalender ziemlich viele Webviews
  • Ich denke, Apple plant das auch für Apple.com, ähnlich wie man früher auf iOS backdrop-filter für Hintergrund-Unschärfe eingesetzt hat
  • Apple Music scheint ebenfalls ziemlich stark auf Webviews zu setzen
• Gute Entdeckung. Apples neue Glas-UI wird viel kritisiert, aber ich mag sie eher. Das OS fühlt sich wieder so an, als hätte es tatsächlich eine eigene Persönlichkeit, statt nur flach und fade zu wirken. Klickbare Bereiche sind besser erkennbar, und Buttons lassen sich visuell leichter von normalem Text unterscheiden. Ich halte das für eine willkommene Veränderung. Das ist nicht bloß „Nostalgie“, sondern tatsächlich praktisch. Ich habe iOS 26 Beta früh installiert und teste damit Websites; es gibt ein paar kleinere Probleme, aber insgesamt finde ich die Richtung gut, dem OS wieder mehr Charakter zu geben. Normale Nutzer werden das wahrscheinlich auch mögen
  • Den Glaseffekt und die Ästhetik mag ich, aber funktional ist es in vielen Apps unbequemer geworden als früher. Leicht erreichbare Buttons sind unter Menüs verschwunden und schwerer zu finden
  • Ich glaube, die breite Masse wird diese Änderung insgesamt eher nicht mögen. Leute, die meinen, ein „Betriebssystem müsse Persönlichkeit haben“, sind nur eine kleine Minderheit von Tech-Enthusiasten. Die meisten sehen ein OS einfach als Mittel zum Zweck, daher bedeuten solche visuellen Veränderungen oft nicht mehr als eine kleine Kuriosität. Mein größtes Problem beim liquid-glass-Design ist insbesondere die neue untere Tab-Leiste. In Apple Music ist es am schlimmsten. Um die Suche zu nutzen, braucht man jetzt einen zusätzlichen Klick, und selbst nach dem Klick auf das Suchfeld muss man noch einmal separat tippen, damit die Tastatur erscheint. Außerdem wurden überall aufwendige, langsame Animationen eingebaut. Wenn man etwa von Home zu Library wechselt, wächst der Tab wie eine Blase über der Tab-Leiste und bewegt sich glitzernd weiter; das ist eher ablenkend als hilfreich. Bedienungshilfen wie Reduce Transparency oder Reduce Motion greifen bei diesen Animationen nicht. Tatsächlich vergisst Apple in letzter Zeit bei vielen Standard-Apps, Barrierefreiheitsoptionen korrekt anzuwenden, oder setzt sie nur unvollständig um. Bei aktiviertem Reduce Motion werden manche Animationen wie beim Antippen eines Albums zwar vereinfacht, aber beim Wischen nach links oder bei anderen Aktionen gibt es weiterhin übertriebene Animationen. Bei Apple Podcasts und iMessage ist es ähnlich. Reduce Transparency führt in manchen Apps nicht zu weniger Transparenz, sondern einfach zu komplett schwarzen Hintergründen (#000000). Solche Fälle gibt es in iOS überall. Und selbst wenige Tage vor dem Release werden Bedienungshilfen in Dropdowns oder bei deaktivierten Tastatur-Buttons noch nicht korrekt berücksichtigt
  • Dass man „die Größe des Klickziels visuell erkennen kann und Buttons klar von Text unterscheidbar sind“, ist ehrlich gesagt keine besonders hohe Messlatte
  • Für mich fällt das eher in die Kategorie „dieses Design ist wirklich furchtbar“. Ich weiß nicht, was Apple sich dabei gedacht hat
• Vielleicht will Apple im Moment einfach noch nicht, dass irgendjemand diese Funktion nutzt. Nach der Vorstellung des neuesten OS würden viele Entwickler sie wahrscheinlich sofort übernehmen wollen, und Apple möchte womöglich erst intern festlegen, wie man sie selbst verwendet, bevor sie öffentlich wird. In diesem Thread gibt es tatsächlich auf beiden Seiten einige unbegründete Vorwürfe. Wer recht hat, wissen wir noch nicht
• Die Aussage „Wenn Apple es baut, dann weil Apple es selbst nutzen will“ stimmt übrigens nicht immer. In echter Software steckt massenhaft Code und stecken massenhaft Funktionen, die nie verwendet werden. Entwicklungsrichtungen ändern sich mehrfach, und eine CSS-Property, die in Phase 2 eingeführt wurde, kann in Phase 4 schon wieder komplett verschwinden
• Ich hoffe wirklich, dass liquid jelly nicht zum Trend wird
  • Ob man liquid glass nun mag oder nicht: Der Paradigmenwechsel von „UI-Chrome umschließt den App-Inhalt“ hin zu „UI liegt über dem Inhalt“ ist zukunftsorientiert. Das passt gut zu AR und hilft dabei, UI und Inhalt auf unterschiedlich großen Bildschirmen voneinander zu trennen. Die konkrete Umsetzung hier hat Vor- und Nachteile, aber dieser Ansatz wird sich künftig wohl stärker verbreiten. Das Overlay-UI-Modell muss auch nicht zwingend transparent sein. Es kann auch opak sein und trotzdem schwebend wirken
  • Die jüngere Generation ist regelrecht von Nostalgie für die Aero/Glass-Ästhetik erfasst. Weil Apple es eingeführt hat, wird es wahrscheinlich zum Trend werden. Branchenweit herrscht oft die Stimmung: Was Apple macht, wird einfach kopiert
  • Ich persönlich würde mir nur wünschen, dass man die Bounce-/Jiggle-Effekte entfernt. Es wackelt und zittert zu stark, sodass es statt nach Glas eher wie ein geleeartiger Blob aussieht
  • Ich hoffe ebenfalls, dass es sich nicht durchsetzt, aber ehrlich gesagt denke ich, dass am Ende doch alle nachziehen werden, wenn Apple damit anfängt
  • Es ist bereits ein Trend
• Angeblich muss man in WKPreferences die Einstellung useSystemAppearance aktivieren, aber weil sie privat ist, würde eine App damit nicht durch die App-Store-Freigabe kommen. Ich frage mich, ob das stimmt. Ich kenne mich mit iOS-Entwicklung nicht besonders gut aus, aber ich erinnere mich an ein Video, in dem eine App dekompiliert wurde, die mithilfe verschiedener interner APIs Widgets auf dem Homescreen animiert hat
  • So etwas kommt nicht durch die App-Store-Prüfung
  • Meinst du dieses Video?
• Das ist der hässlichste Trend, den ich seit abgerundeten Ecken und großzügigem Padding gesehen habe. Hoffentlich verschwindet er so schnell wie möglich

[addons]

Hört auf mit dem Quatsch und kümmert euch lieber ordentlich um die Safari-Kompatibilität.