La semaine dernière j’ai rapidement mentionné qu’il était maintenant possible d’animer les variables CSS.

L’utilité des variables CSS

Les variables CSS (également appelées « propriétes personnalisées ») permettent de stocker des valeurs spécifiques. Et ces valeurs peuvent être modifiées par des événement JS ou des pseudos classes CSS (comme par exemple :hover).

Elles se déclarent et se modifient comme ceci : --my-property: 123;, et s’utilisent comme cela : var(--my-property).

L’intéret de ces variables vient quand on a besoin de préciser un seul paramètre dans une longue déclaration (comme par exemple une position dans une déclaration de dégradé) ou alors pour indiquer une couleur qui peut être amenée à changer et qui est utilisée dans différentes classes.

Le problème de ces variables, c’est qu’il n’est pas possible de les animer. C’est là qu’intervient la at-rule @property.

Une nouvelle notation

Cette nouvelle syntaxe (actuellement implémentée seulement dans les navigateurs de la famille Chromium) permettant de préciser exactement le type de données que contient cette variable, se présente comme suit :

@property --my-property {
    syntax: <type de la variable>;
    inherits: false;
    initial-value: <valeur initiale>;
}

La syntax peut être de type <color> ou encore <percentage> (voir la liste complète sur MDN).

La initial-value (valeur initiale) doit être indiquée avec l’unité correspondant à la syntaxe : #1f1f1f si il s’agit d’une couleur, 50% si il s’agit d’un pourcentage…

Application

Pour l’application de cette nouvelle notation, je vais revenir sur l’exemple déjà donné précédemment d’un texte avec un dégradé bougeant au survol de la souris.

/* Déclaration de la propriété */
@property --gradient-left-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%;
}

.gradient-text {
    /* On utilise la variable dans la déclaration */
    background:radial-gradient(circle at var(--gradient-left-position) 50%, yellow, orange, red);                
    
    /* On ne montre la couleur de fond que dans le texte */
    background-clip: text; 
    -webkit-background-clip: text;
    color: #0000;
    font-weight: bold;
    font-size: 2em;
    
    /* Règle de transition sur la propriété */
    transition: --gradient-left-position 2s;
}

.gradient-text:hover {
    /* On change la propriété au survol de la souris */
    --gradient-left-position: 0%;
}

Résultat

/!\ Compatible uniquement avec Chrome, Opéra et Edge /!\

Le petit bonhomme en mousse

Edit : depuis juillet 2024, les propriétés CSS sont supportées par Firefox (voir la release note).