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

Transitions et protection des données dans les CSS

Sam Richard

Propriétés CSS personnalisées, également appelées CSS variables, vous permettent de définir vos propres propriétés en CSS et d'utiliser leurs valeurs dans l'ensemble CSS Bien qu’incroyablement utiles aujourd’hui, elles ont des lacunes qui peuvent les rendre difficiles à traiter: ils peuvent prendre n'importe quelle valeur et être accidentellement remplacés par quelque chose d'inattendu, ils héritent toujours des valeurs par leur parent, et vous ne pouvez pas effectuer la transition. Grâce aux propriétés CSS d'Houdini et Valeur le niveau d'API 1, désormais disponibles dans Chrome 78, ces inconvénients sont dépassés, ce qui rend les CSS les propriétés personnalisées incroyablement efficaces !

Qu'est-ce que Houdini ?

Avant d'aborder la nouvelle API, parlons rapidement d'Houdini. La balise CSS-TAG Houdini Task Force, plus connu sous le nom de CSS Houdini ou simplement Houdini, existe pour "développer des fonctionnalités qui expliquent la "magie" de styles et de mises en page sur le Web". La collection des spécifications Houdini conçu pour exploiter toute la puissance du moteur de rendu du navigateur, permettant à la fois un aperçu plus approfondi de nos styles et de la possibilité d'étendre notre moteur de rendu. Ainsi, vous avez saisi des valeurs CSS en JavaScript, et vous avez utilisé un polyfill ou inventant de nouveaux CSS sans impact sur les performances sont enfin possibles. Houdini a le potentiel qui domine la créativité sur le Web.

Niveau 1 de l'API CSS Properties and Values

Le niveau d'API des propriétés et valeurs CSS 1 (accessoires Houdini et Vals) permet de structurer les propriétés personnalisées. Il s'agit de l'actuel lorsque vous utilisez des propriétés personnalisées:

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

Étant donné que les propriétés personnalisées n'ont pas de type, elles peuvent être remplacées de différentes manières. Par exemple, imaginez 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, l'API ne sait pas qu'une URL n'est pas valide la valeur de la couleur ! Lorsque nous l'utilisons, elle revient aux valeurs par défaut (noir pour color, transparente pour background). Avec les accessoires et valises Houdini, les propriétés personnalisées doit être enregistré pour que le navigateur sache ce qu'il devrait être !

La propriété personnalisée --my-color est maintenant enregistrée en tant que couleur. Cela indique au quels types de valeurs sont autorisés, et comment il peut les saisir et les traiter .

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

Découvrez comment analyser la propriété personnalisée. Vous trouverez la liste complète des valeurs possibles dans la spécification Valeurs et unités CSS. 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.

syntax se penche sur le sujet. Un certain nombre d'éléments valides d'entraînement allant des chiffres aux couleurs, <custom-ident> de données. 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 valeurs séparées par un espace longueurs
• L'ajout de # signifie qu'il accepte une liste de valeurs séparées par des virgules de cette syntaxe. Par exemple, <color># serait une liste de valeurs séparées par une virgule couleurs
• L'ajout de | entre les syntaxes ou les identifiants signifie que l'un des éléments fournis sont valides. Par exemple, <color># | <url> | magic autorise soit une liste de couleurs séparées par une virgule, une URL ou le mot magic.

Gotchas

Les accessoires Houdini et les valises sont deux pièges. Premièrement, une fois il n'y a aucun moyen de mettre à jour une propriété enregistrée existante et d'essayer le réenregistrement d'une propriété renverra une erreur indiquant qu'elle a déjà été définis.

Deuxièmement, contrairement aux propriétés standards, les propriétés enregistrées ne sont pas validées elles sont analysées. Ils sont validés lors du calcul. Cela signifie que que les valeurs non valides n'apparaissent pas comme non valides lors de l'inspection Propriétés, et inclure une propriété non valide après une propriété valide ne revient pas à la valeur valide ; une propriété non valide revient à la valeur enregistrée par défaut.

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: le et 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 s'anime du rouge au vert. Sans l'enregistrement de la propriété passe d'une couleur à l'autre. sans être enregistré, le navigateur ne sait pas à quoi s'attendre et la suivante, et ne peut donc pas garantir la possibilité de les migrer. Cet exemple permet d'animer les dégradés CSS encore plus loin. La 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;
}

Cette opération animera la propriété personnalisée qui fait partie de linear-gradient, et donc pour animer notre gradient linéaire. Consultez le Glitch ci-dessous pour voir le code complet en action et de jouer avec vous-même.

Conclusion

Houdini est en passe d'être présent dans les navigateurs de nouvelles façons d'utiliser et d'étendre les CSS. Avec la peinture API déjà expédiée Avec les props et valeurs personnalisées, notre boîte à outils s'élargit et nous permet définir des propriétés CSS typées et les utiliser pour créer et animer des éléments nouveaux et captivants ; conceptions. D'autres informations seront bientôt disponibles : numéro Houdini file d'attente où vous pouvez donner commentaires et découvrez les prochaines étapes pour Houdini. Houdini vise à développer des fonctionnalités qui explique la "magie" de style et de mise en page sur le Web, alors allez-y et utiliser ces fonctionnalités magiques à bon escient.

Photo de Maik Jonietz sur Afficher