Propriétés personnalisées plus intelligentes avec la nouvelle API de Houdini

Transitions et protection des données en CSS

Sam Richard

Les propriétés CSS personnalisées, également appelées variables CSS, vous permettent de définir vos propres propriétés en CSS et d'utiliser leurs valeurs dans l'ensemble de votre CSS. Bien qu'elles soient incroyablement utiles aujourd'hui, elles présentent des inconvénients qui peuvent compliquer leur utilisation : elles peuvent prendre n'importe quelle valeur et être accidentellement remplacées par une valeur inattendue, elles héritent toujours de leurs valeurs de leur parent et vous ne pouvez pas les faire passer d'un état à un autre. Avec l'API CSS Properties and Values de niveau 1 de Houdini, désormais disponible dans Chrome 78, ces lacunes sont comblées, ce qui rend les propriétés CSS personnalisées incroyablement puissantes.

Qu'est-ce que Houdini ?

Avant de parler de la nouvelle API, parlons rapidement de Houdini. Le groupe de travail CSS-TAG Houdini, plus connu sous le nom de CSS Houdini ou simplement Houdini, a pour objectif de "développer des fonctionnalités qui expliquent la 'magie' du style et de la mise en page sur le Web". La collection de spécifications Houdini est conçue pour exploiter la puissance du moteur de rendu du navigateur, ce qui permet d'obtenir des informations plus détaillées sur nos styles et d'étendre notre moteur de rendu. Grâce à cela, il est enfin possible de saisir des valeurs CSS en JavaScript et de polyfiller ou d'inventer de nouvelles propriétés CSS sans impact sur les performances. Houdini a le potentiel de décupler la créativité sur le Web.

API CSS Properties and Values de niveau 1

L'API CSS Properties and Values de niveau 1 (Houdini Props and Vals) nous permet de structurer nos propriétés personnalisées. Voici la situation actuelle lorsque vous utilisez des propriétés personnalisées :

.thing {
  --my-color: green;
}

Comme les propriétés personnalisées n'ont pas de type, elles peuvent être remplacées de manière inattendue. Par exemple, voyons ce qui se passe si vous définissez --my-color avec une URL.

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

Ici, comme --my-color n'est pas typé, il ne sait pas qu'une URL n'est pas une valeur de couleur valide. Lorsque nous l'utilisons, il revient aux valeurs par défaut (noir pour color, transparent pour background). Avec les propriétés et valeurs Houdini, les propriétés personnalisées peuvent être enregistrées afin que le navigateur sache ce qu'elles devraient être.

La propriété personnalisée --my-color est désormais enregistrée en tant que couleur. Cela indique au navigateur les types de valeurs autorisés, ainsi que la manière dont il peut saisir et traiter cette propriété.

Anatomie d'une propriété enregistrée

Voici comment enregistrer une propriété :

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Il prend en charge les options suivantes :

name: string

Nom de la propriété personnalisée.

syntax: string

Comment analyser la propriété personnalisée. Vous trouverez la liste complète des valeurs possibles dans la spécification CSS Values and Units (Valeurs et unités CSS). La valeur par défaut est *.

inherits: boolean

Indique si elle hérite de la valeur de son parent. La valeur par défaut est true.

initialValue: string

Valeur initiale de la propriété personnalisée.

Examinons syntax de plus près. Il existe un certain nombre d'options valides, allant des nombres aux couleurs, en passant par les types <custom-ident>. Ces syntaxes peuvent également être modifiées à l'aide des valeurs suivantes :

• L'ajout de + signifie qu'il accepte une liste de valeurs séparées par des espaces de cette syntaxe. Par exemple, <length>+ serait une liste de longueurs séparées par un espace.
• L'ajout de # signifie qu'il accepte une liste de valeurs séparées par une virgule de cette syntaxe. Par exemple, <color># serait une liste de couleurs séparées par une virgule.
• L'ajout de | entre les syntaxes ou les identifiants signifie que toutes les options fournies sont valides. Par exemple, <color># | <url> | magic autorise une liste de couleurs séparées par une virgule, une URL ou le mot magic.

Gotchas

Il existe deux pièges avec les propriétés et les valeurs Houdini. La première est qu'une fois définie, il n'est pas possible de mettre à jour une propriété enregistrée existante. Si vous essayez d'enregistrer à nouveau une propriété, une erreur s'affiche pour indiquer qu'elle a déjà été définie.

Deuxièmement, contrairement aux propriétés standards, les propriétés enregistrées ne sont pas validées lorsqu'elles sont analysées. Elles sont plutôt validées lorsqu'elles sont calculées. Cela signifie que les valeurs non valides n'apparaîtront pas comme non valides lors de l'inspection des propriétés de l'élément, et que l'inclusion d'une propriété non valide après une propriété valide ne reviendra pas à la propriété valide. Toutefois, une propriété non valide reviendra à la valeur par défaut de la propriété enregistrée.

Animer des propriétés personnalisées

Une propriété personnalisée enregistrée offre un bonus amusant au-delà de la vérification du type : la possibilité de l'animer. Voici un exemple d'animation de base :

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

Lorsque vous pointez sur le bouton, il passe du rouge au vert. Sans enregistrer la propriété, elle passe d'une couleur à l'autre, car, sans être enregistrée, le navigateur ne sait pas à quoi s'attendre entre une valeur et la suivante, et ne peut donc pas garantir la possibilité de les faire passer. Cet exemple peut toutefois être poussé plus loin pour animer des dégradés CSS. Le code CSS suivant peut être écrit avec la même propriété enregistrée :

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

Cela animera notre propriété personnalisée qui fait partie de linear-gradient, et donc notre dégradé linéaire. Consultez le Codepen ci-dessous pour voir le code complet en action et l'essayer vous-même.

Conclusion

Houdini est en cours de déploiement sur les navigateurs, et avec lui, de toutes nouvelles façons de travailler avec CSS et de l'étendre. Avec l'API Paint déjà disponible et désormais les propriétés et valeurs personnalisées, notre boîte à outils de création s'agrandit, ce qui nous permet de définir des propriétés CSS typées et de les utiliser pour créer et animer des conceptions nouvelles et passionnantes. D'autres fonctionnalités sont également en préparation dans la file d'attente des problèmes Houdini, où vous pouvez donner votre avis et voir ce qui est prévu pour Houdini. Houdini a été conçu pour développer des fonctionnalités qui expliquent la "magie" du style et de la mise en page sur le Web. Alors, n'hésitez pas à utiliser ces fonctionnalités magiques.