Nous pouvons créer des variables en CSS assez facilement :
:root {
--scale: 1;
}Et on peut les déclarer sur n'importe quel élément :
.thing {
transform: scale(--scale);
}Encore mieux pour un exemple comme celui-ci est d'appliquer la variable sur une interaction utilisateur, disons :hover:
:root {
--scale: 1;
}
.thing {
height: 100px;
transform: scale(--scale);
width: 100px;
}
.thing:hover {
--scale: 3;
}Mais si nous voulions utiliser cette variable dans une animation… nada.
:root {
--scale: 1;
}
@keyframes scale {
from { --scale: 0; }
to { --scale: 3; }
}
/* Nope! */
.thing {
animation: scale .25s ease-in;
height: 100px;
width: 100px;
}C'est parce que la variable est reconnue comme une chaîne et ce dont nous avons besoin est un nombre qui peut être interpolé entre deux valeurs numériques. C'est là que nous pouvons faire appel @property pour non seulement enregistrer la variable en tant que propriété personnalisée, mais définir sa syntaxe sous forme de nombre :
@property --scale {
syntax: "<number>";
initial-value: 1;
inherits: true;
}Maintenant, nous obtenons l'animation!
Vous allez vouloir vérifier la prise en charge du navigateur depuis @property n'a atterri que dans Chrome (à partir de Version 85) au moment d'écrire ces lignes. Et si vous espérez le flairer avec @supports, nous n'avons actuellement pas de chance car il n'accepte pas les règles at comme valeurs… pour le moment. Cela changera une fois at-rule()devient une vraie chose.
