{"id":1184,"date":"2023-04-28T18:41:08","date_gmt":"2023-04-28T17:41:08","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1184"},"modified":"2024-11-18T22:53:42","modified_gmt":"2024-11-18T21:53:42","slug":"animer-variables-css","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2023\/04\/28\/animer-variables-css\/","title":{"rendered":"Animer les variables CSS"},"content":{"rendered":"\n

La semaine derni\u00e8re j’ai rapidement mentionn\u00e9 qu’il \u00e9tait maintenant possible d’animer les variables CSS.<\/p>\n\n\n\n

L’utilit\u00e9 des variables CSS<\/h2>\n\n\n\n

Les variables CSS<\/a> (\u00e9galement appel\u00e9es \u00ab\u00a0propri\u00e9tes personnalis\u00e9es\u00a0\u00bb) permettent de stocker des valeurs sp\u00e9cifiques. Et ces valeurs peuvent \u00eatre modifi\u00e9es par des \u00e9v\u00e9nement JS ou des pseudos classes CSS (comme par exemple :hover<\/code>).<\/p>\n\n\n\n

Elles se d\u00e9clarent et se modifient comme ceci : --my-property: 123;<\/code>, et s’utilisent comme cela : var(--my-property)<\/code>.<\/p>\n\n\n\n

L’int\u00e9ret de ces variables vient quand on a besoin de pr\u00e9ciser un seul param\u00e8tre dans une longue d\u00e9claration (comme par exemple une position dans une d\u00e9claration de d\u00e9grad\u00e9) ou alors pour indiquer une couleur qui peut \u00eatre amen\u00e9e \u00e0 changer et qui est utilis\u00e9e dans diff\u00e9rentes classes.<\/p>\n\n\n\n

Le probl\u00e8me de ces variables, c’est qu’il n’est pas possible de les animer. C’est l\u00e0 qu’intervient la at-rule @property<\/code><\/a>.<\/p>\n\n\n\n\n\n\n\n

Une nouvelle notation<\/h2>\n\n\n\n

Cette nouvelle syntaxe (actuellement impl\u00e9ment\u00e9e seulement dans les navigateurs de la famille Chromium) permettant de pr\u00e9ciser exactement le type de donn\u00e9es que contient cette variable, se pr\u00e9sente comme suit :<\/p>\n\n\n

\n@property --my-property {\n    syntax: <type de la variable>;\n    inherits: false;\n    initial-value: <valeur initiale>;\n}\n<\/pre><\/div>\n\n\n
La syntax<\/code> peut \u00eatre de type <color><\/code> ou encore <percentage><\/code> (voir la liste compl\u00e8te<\/a> sur MDN).<\/p>\n\n\n\n
La initial-value<\/code> (valeur initiale) doit \u00eatre indiqu\u00e9e avec l’unit\u00e9 correspondant \u00e0 la syntaxe : #1f1f1f<\/code> si il s’agit d’une couleur, 50%<\/code> si il s’agit d’un pourcentage…<\/p>\n\n\n\n
Application<\/h2>\n\n\n\n
Pour l’application de cette nouvelle notation, je vais revenir sur l’exemple d\u00e9j\u00e0 donn\u00e9 pr\u00e9c\u00e9demment d’un texte avec un d\u00e9grad\u00e9 bougeant au survol de la souris.<\/p>\n\n\n
\n\/* D\u00e9claration de la propri\u00e9t\u00e9 *\/\n@property --gradient-left-position {\n    syntax: '<percentage>';\n    inherits: false;\n    initial-value: 100%;\n}\n\n.gradient-text {\n    \/* On utilise la variable dans la d\u00e9claration *\/\n    background:radial-gradient(circle at var(--gradient-left-position) 50%, yellow, orange, red);                \n    \n    \/* On ne montre la couleur de fond que dans le texte *\/\n    background-clip: text; \n    -webkit-background-clip: text;\n    color: #0000;\n    font-weight: bold;\n    font-size: 2em;\n    \n    \/* R\u00e8gle de transition sur la propri\u00e9t\u00e9 *\/\n    transition: --gradient-left-position 2s;\n}\n\n.gradient-text:hover {\n    \/* On change la propri\u00e9t\u00e9 au survol de la souris *\/\n    --gradient-left-position: 0%;\n}\n<\/pre><\/div>\n\n\n
R\u00e9sultat<\/h2>\n\n\n\n
\/!\\ Compatible uniquement avec Chrome, Op\u00e9ra et Edge \/!\\<\/p>\n\n\n\n
Le petit bonhomme en mousse<\/span><\/p>\n