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.
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-materialpour Liquid Glass ; -
-apple-system-blur-material,-apple-system-blur-material-thinet-apple-system-blur-material-ultra-thinpour les effets de flou ; - et plusieurs valeurs construites autour de
-apple-system-vibrancy-*pour les différents effets de « vibrance » des éléments translucides.
Apple utilise notamment la valeur -apple-system-glass-material-media-controls dans les contrôles multimédia de tvOS, système où les technologies du web l’ont emporté sur les technologies natives, pour favoriser le développement multiplateforme. Mais il y a un mais : ces propriétés ne peuvent pas être utilisées par les développeurs.
Rien ne les empêche de bricoler sur leur machine – Coote a pu créer une barre d’outils utilisant Liquid Glass au-dessus d’une carte MapboxGL – mais pour utiliser -apple-system-glass-material dans une webview, il faut activer une API privée. Or dura lex, sed lex, Apple n’accepte pas les applications touchant aux API privées dans son App Store.
Cette situation rappelle l’imbroglio autour de la police San Francisco. Il n’avait fallu que quelques heures pour trouver une manière de s’en servir sur le web, mais près d’un an pour qu’Apple fournisse une manière sanctionnée de le faire. Gageons que la firme de Cupertino finira par proposer un standard de gestion de l’apparence des éléments, comme elle l’avait fait pour le mode sombre il y a quelques années.
En attendant, il faudra s’en tenir à des bidouilles plus ou moins avancées pour imiter Liquid Glass. Le développeur Chris Feijoo propose ainsi d’utiliser la propriété backdrop-filter, qui permet d’obtenir un effet de flou ou de diffusion derrière un élément, pour reconstruire le « verre liquide » couche par couche. (Par un heureux hasard, la propriété -apple-system-glass-material est incompatible avec les éléments utilisant la propriété backdrop-filter).
Si vous êtes développeur web, son article bourré de simulateurs interactifs vaut le détour, mais vous remarquerez immédiatement la limite de son approche. En utilisant un filtre SVG avec backdrop-filter, il outrepasse la spécification CSS. Seul Chrome accepte cette « erreur », si bien que son effet ne fonctionne ni sur Firefox ni sur… Safari. Compliqué, qu’on vous disait.
