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

Transitions et protection des données dans les CSS

Sam Richard

Les propriétés personnalisées CSS, é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'incroyablement utiles aujourd'hui, elles présentent des lacunes qui peuvent les rendre difficiles à traiter: elles peuvent prendre n'importe quelle valeur et risquent d'être accidentellement remplacées par quelque chose d'inattendu, elles héritent toujours de leurs valeurs de leur parent et vous ne pouvez pas les migrer. Avec le niveau d'API CSS Properties and Values de Houdini, désormais disponible dans Chrome 78, ces lacunes sont transcendées, ce qui rend les propriétés CSS personnalisées incroyablement performantes.

Qu'est-ce que Houdini ?

Avant d'aborder la nouvelle API, parlons rapidement de Houdini. Le groupe de travail Houdini Task Force CSS-TAG, plus connu sous le nom de CSS Houdini ou simplement Houdini, vise à "développer des fonctionnalités qui expliquent la "magie" du style et de la mise en page sur le Web. L'ensemble des spécifications Houdini est conçu pour exploiter la puissance du moteur de rendu du navigateur, ce qui nous permet de mieux comprendre nos styles et d'étendre notre moteur de rendu. Il est ainsi possible de saisir des valeurs CSS en JavaScript, et de polyfiller ou d'inventer du code CSS sans impact sur les performances. Houdini a le potentiel de doper la créativité sur le Web.

Niveau d'API 1 des propriétés et des valeurs CSS

Le niveau d'API CSS Properties and Values (Houdini Props et 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 types, elles peuvent être remplacées de manière inattendue. Par exemple, réfléchissez à 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, les valeurs par défaut sont rétablies (noir pour color, transparent pour background). Avec Houdini Props et Vals, 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, et la manière dont il peut saisir et traiter cette propriété.

Anatomie d'une propriété enregistrée

L'enregistrement d'une propriété se présente comme suit:

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 Valeurs CSS et unités. La valeur par défaut est *.

inherits: boolean

Indique s'il 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 un espace de cette syntaxe. Par exemple, <length>+ serait une liste de longueurs séparées par un espace.
• Ajouter # 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 des syntaxes ou des identifiants signifie que l'une des options fournies est valide. Par exemple, <color># | <url> | magic autorise une liste de couleurs séparées par une virgule, une URL ou le mot magic.

Gotchas

Il y a deux pièges avec Houdini Props et Vals. Premièrement, une fois définie, il n'est plus possible de mettre à jour une propriété enregistrée existante. Si vous essayez de réenregistrer une propriété, une erreur indiquant qu'elle est déjà définie génèrera une erreur.

Deuxièmement, contrairement aux propriétés standards, les propriétés enregistrées ne sont pas validées lors de l'analyse. Elles sont plutôt validées lors de leur calcul. 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 fera pas appel à la valeur valide. Toutefois, une propriété non valide aura recours à 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 avantage 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, l'animation passe du rouge au vert. Si vous n'enregistrez pas la propriété, la propriété passe d'une couleur à l'autre. En effet, sans être enregistré, 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 migrer. Nous pouvons toutefois aller un peu plus loin dans cet exemple afin d'animer les dégradés CSS. Le 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;
}

Vous animez ainsi notre propriété personnalisée qui fait partie de linear-gradient, ce qui anime le dégradé linéaire. Consultez le Glitch ci-dessous pour voir le code complet en action et l'utiliser vous-même.

Conclusion

Houdini est en route vers les navigateurs et, avec lui, offre de toutes nouvelles façons de travailler et d'étendre les CSS. L'API Paint étant déjà disponible, et les accessoires personnalisés et les valeurs Vals, 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 attrayantes. D'autres informations sont également à venir dans la file d'attente des problèmes Houdini, où vous pouvez donner votre avis et découvrir les prochaines étapes pour Houdini. Houdini est là pour développer des fonctionnalités qui expliquent la "magie" du style et de la mise en page sur le Web. Alors, lancez-vous et utilisez ces fonctionnalités magiques à bon escient.

Photo de Maik Jonietz sur Unsplash