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 personnalisées CSS, également appelées variables CSS, vous permettent de définir vos propres propriétés dans le CSS et d'utiliser leurs valeurs dans l'ensemble de votre CSS. Bien qu'ils soient incroyablement utiles aujourd'hui, ils présentent des lacunes qui peuvent les rendre difficiles à utiliser : ils peuvent prendre n'importe quelle valeur et peuvent donc être accidentellement remplacés par quelque chose d'inattendu, ils héritent toujours de leurs valeurs de leur parent et vous ne pouvez pas les faire passer par une transition. Avec le niveau d'API 1 des propriétés et valeurs CSS d'Houdini, désormais disponible dans Chrome 78, ces inconvénients sont dépassés, ce qui rend les propriétés personnalisées CSS incroyablement performantes.

Qu'est-ce que Houdini ?

Avant de parler de la nouvelle API, parlons rapidement de Houdini. La CSS-TAG Houdini Task Force, plus connue sous le nom de CSS Houdini ou simplement de Houdini, a pour but de "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 permet à la fois de mieux comprendre nos styles et de l'étendre. Il est ainsi possible de saisir des valeurs CSS en JavaScript, et d'effectuer un polyfill ou d'inventer un nouveau CSS sans impact sur les performances. Houdini a le potentiel de stimuler la créativité sur le Web.

API CSS Properties and Values, niveau 1

Le niveau d'API 1 des propriétés et valeurs CSS (props et vals Houdini) 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;
}

Étant donné qu'elles n'ont pas de type, les propriétés personnalisées 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 saisi, il ne sait pas qu'une URL n'est pas une valeur de couleur valide. Lorsque nous l'utilisons, elle revient aux valeurs par défaut (noir pour color, transparente pour background). Avec les accessoires 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 maintenant 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

Voici comment procéder pour 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

Découvrez comment analyser la propriété personnalisée. Vous trouverez la liste complète des valeurs possibles dans les spécifications Valeurs et unités CSS. La valeur par défaut est *.

inherits: boolean

Indique si l'élément 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.

syntax se penche sur le sujet. Il existe un certain nombre d'options valides, allant des nombres aux couleurs aux 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 de cette syntaxe séparées par des espaces. Par exemple, <length>+ correspond à une liste de longueurs séparées par un espace.
• L'ajout de # signifie qu'il accepte une liste de valeurs de cette syntaxe séparées par une virgule. Par exemple, <color># correspond à une liste de couleurs séparées par une virgule.
• Ajouter | entre des syntaxes ou des 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.

Pièges

Il existe deux pièges à éviter avec les accessoires 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 de réenregistrer une propriété, une erreur s'affiche, indiquant 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 lors de leur 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 qu'inclure une propriété non valide après une propriété valide ne reviendra pas à la propriété valide. Toutefois, une propriété non valide revient à 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 en plus de la vérification de 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. Si la propriété n'est pas enregistrée, elle 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 passer. Cet exemple peut ê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 animera ainsi notre dégradé linéaire. Consultez Glitch ci-dessous pour voir le code complet en action et l'essayer vous-même.

Conclusion

Houdini arrive dans les navigateurs, et avec lui, de nouvelles façons de travailler avec le CSS et de l'étendre. L'API Paint étant déjà disponible, et désormais les accessoires et valeurs personnalisés, nous élargissons notre boîte à outils de création. Nous pouvons ainsi définir des propriétés CSS typées et les utiliser pour créer et animer de nouvelles conceptions captivantes. D'autres nouveautés sont à venir dans la file d'attente des problèmes Houdini, où vous pourrez donner votre avis et découvrir ce qui attend Houdini. Houdini a pour mission de 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 par Maik Jonietz sur Unsplash