InMy.Live

Il est temps de me familiariser avec le CSS moderne. Il y a tellement de nouveautés en CSS que je connais trop peu. Pour changer cela, j’ai lancé #100DaysOfMoreOrLessModernCSS. Pourquoi un CSS plus ou moins moderne ? Parce que certains sujets porteront sur des fonctionnalités de pointe, tandis que d’autres existent depuis un certain temps déjà, mais j’ai juste peu ou pas d’expérience avec cela.

Le @property La règle vous permet d’enregistrer des propriétés personnalisées.

Vous pouvez déjà définir des propriétés personnalisées, mais la différence entre la définition et l’enregistrement est que la règle-at vous permet de spécifier le type et d’autres attributs.

@property --hue {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}

syntaxe

Le syntax descripteur spécifie la syntaxe (ou le type) de la propriété. Vous pouvez trouver une liste des noms de composants de syntaxe pris en charge dans la spécification.

@property --milliseconds {
syntax: '<integer>';
inherits: false;
}

hérite

Le inherits descripteur spécifie si la propriété hérite ou non de son parent.

@property --color-primary {
syntax: '<color>';
inherits: true;
}

valeur initiale

Le initial-value descripteur spécifie la valeur initiale de la propriété personnalisée.

@property --color-primary {
syntax: '<color>';
inherits: true;
initial-value: rgb(0 0 0);
}

Un exemple

Disons que nous avons un <button> et nous voulons faire la transition de la couleur d’arrière-plan sur :hover et :focus-visible.

button {
--h: 176;
--s: 74%;
--l: 60%;
--bg: hsl(var(--h) var(--s) var(--l));
background-color: var(--bg);
transition: background-color 1s;
}
button:is(:hover, :focus-visible) {
--h: 20;
}

Cela fonctionne bien, on obtient une belle transition de la première couleur à la deuxième couleur, mais si on veut animer juste la teinte pour obtenir un effet plus intéressant, on a pas de chance, car la valeur de --h est une chaîne que vous ne pouvez pas animer.

button {
--h: 176;
--s: 74%;
--l: 60%;
--bg: hsl(var(--h) var(--s) var(--l));
background-color: var(--bg);
transition: --h 1s;
}

Avec @property nous pouvons transformer la chaîne en nombre et l’animer.

@property --h {
initial-value: 0;
inherits: true;
syntax: '<number>';
}
button {
--h: 176;
--s: 74%;
--l: 60%;
--bg: hsl(var(--h) var(--s) var(--l));
background-color: var(--bg);
transition: --h 1.6s;
}

Voir sur CodePen.