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'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 l'API de niveau 1 des propriétés et valeurs CSS de Houdini, désormais disponible dans Chrome 78, ces lacunes sont transcendé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. 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". La collection de spécifications Houdini est conçue pour exploiter toute la puissance du moteur de rendu du navigateur, ce qui permet d'obtenir des insights plus détaillés sur nos styles et de pouvoir étendre notre moteur de rendu. Les valeurs CSS typées en JavaScript et le polyfilling ou l'invention de nouveaux CSS sans impact sur les performances sont enfin possibles. Houdini a le potentiel de booster 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, il revient aux valeurs par défaut (noir pour color, transparent pour background). Avec les accessoires et les valeurs Houdini, les propriétés personnalisées peuvent être enregistrées afin que le navigateur sache ce qu'il doit ê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

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

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.

Examen approfondi de syntax. Il existe un certain nombre d'options valides, allant des nombres aux couleurs aux types <custom-ident>. Vous pouvez également modifier ces syntaxes à 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 telles 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 sera pas remplacée par la propriété valide. Une propriété non valide sera toutefois remplacée par 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. Sans enregistrer la propriété, elle passe d'une couleur à l'autre. En effet, sans enregistrement, 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 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. Avec l'API Paint déjà disponible et maintenant les propriétés et valeurs personnalisées, notre boîte à outils de création s'étend, ce qui nous permet de définir des propriétés CSS typées et de les utiliser pour créer et animer de nouvelles conceptions passionnantes. 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 but de 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.

Photo par Maik Jonietz sur Unsplash