Effet glassmorphism et le css backdrop-filter

Bonjour,

J'essaye d'utiliser la propriété backdrop-filter pour donner un effet de glasmorphism à mon site wordpress, mais il ne semble pas être possible d'utiliser cette propriété car wp ne semble pas la re-connaitre.

Dans le plugin Simple Custom CSS, la propriété me retourne :
"Unknown property backdrop-filter" (cf pj)

Je ne comprend pas pourquoi, y a t'il une astuce pour l'utiliser ?

Bonne journée
Modifié par foebb (18 Jan 2021 - 10:19)

Ce qui est sûr : les propriétés CSS n'ont rien à voir avec WordPress. Autrement dit il n'y a pas de raison que la propriété backdrop-filter soit incompatible avec ce CMS ou un plugin quel qu'il soit étant donné qu'il s'agit de traitement en back-end et que le CSS est du front.

Maintenant :
1. Il s'agit d'une propriété CSS expérimentale, donc forcément potentiellement source de problème/compatibilité avec les navigateurs.
2. Sans voir le code on ne peut vous aider de toute façon.

Bien cordialement.

Bonjour,

Lorsque tu saisies du css dans l'éditeur du plugin "Simple Custom CSS", celui-ci vérifie si les propriétés css que tu as indiquées lui conviennent. Wordpress fait de même d'ailleurs quand on essaie de modifier du css via le menu "Apparence" -> "Personnaliser" -> "Css additionnel". Or, "backdrop-filter" semble ne pas être dans leurs listes de propriétés convenables.

Comme on allait pas se laisser embrouiller pour si peu, j'ai modifier le code du plugin et de wordpress. J'ai réussi à faire disparaitre le message d'erreur dans l'éditeur css du plugin. Et à faire marcher la propriété "backdrop-filter".

Les lignes à modifier :
1) dans le fichier wp-content/plugins/simple-custom-css/codemirror/css.js
ajouter "backdrop-filter", juste avant "backface-visibility" (attention à la virgule, il faut bien penser à la mettre juste après "backdrop-filter")
2) dans le fichier wp-content/plugins/simple-custom-css/codemirror/csslint.js
ajouter la ligne

"backdrop-filter"               : "<filter-function-list> | none",

juste avant la ligne

"backface-visibility"           : "visible | hidden",

3) dans le fichier wp-includes/js/codemirror/codemirror.min.js
ajouter "backdrop-filter", juste avant "backface-visibility" (attention à la virgule, il faut bien penser à la mettre juste après "backdrop-filter")
4) dans le fichier wp-includes/js/codemirror/csslint.js
ajouter la ligne

"backdrop-filter"               : "<filter-function-list> | none",

juste avant la ligne

"backface-visibility"           : "visible | hidden",

Amicalement,

Autant pour moi, j'avais oublié qu'on pouvait éditer du CSS en ligne avec WordPress.

@Olivier C : oui je trouve cela bien plus pratique d'avoir un onglet ouvert pour editer son css que de passer par un logiciel de type visual code..

@parsimonhi : Merci pour cette astuce ! En fait, j'ai retesté, l'effet fonctionne bien même avec cette alerte. Par contre le rendu n'est top sur mobiles..