Liquid Glass sur le web : c’est possible, mais c’est compliqué

Il y a vingt ans, les « thèmes » qui permettaient d’imiter Mac OS X sur le web étaient une distraction. Aujourd’hui, ils ne sont pas loin d’être une nécessité. Ce qui a changé ? La disparition des applications natives « chimiquement pures » et l’intégration de plus en plus poussée de webviews mêlant des éléments venus du système et des éléments venus du web. Ce qui pose une question: peut-on recréer Liquid Glass dans une webview ? La réponse est, comme souvent, plus compliquée qu’on le voudrait.

Image Chris Feijoo/MacGeneration.

En fouillant les sources du projet WebKit, le développeur Alastair Coote a déniché la propriété -apple-visual-effect dans plusieurs feuilles de style CSS. D’après nos propres recherches, elle semble prendre en charge l’ensemble des « matériaux » de Liquid Glass:

-apple-system-glass-material pour Liquid Glass ;

-apple-system-blur-material, -apple-system-blur-material-thin et -apple-system-blur-material-ultra-thin pour les effets de flou ;
et plusieurs...