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

Transitions et protection des données en CSS

19 sept. 2019

Propiedades personalizadas de CSS, también conocidas como Variables CSS, vous permet de définir vos propres propriétés en CSS et d'utiliser leurs valeurs dans tout votre CSS. Bien qu'ils soient incroyablement utiles aujourd'hui, ils ont des lacunes qui peuvent rendre difficile de travailler avec eux: ils peuvent prendre n'importe quelle valeur, de sorte qu'ils peuvent être accidentellement remplacés par quelque chose d'inattendu, ils héritent toujours de leurs valeurs de leurs parents, et vous ne peut pas faire la transition. Avec Houdini's Propriété et valeurs CSS API niveau 1, désormais disponible dans Chrome 78, ces lacunes sont surmontées, ce qui rend les propriétés personnalisées CSS incroyablement puissantes!

Qu'est-ce que Houdini?

Antes de hablar sobre la nueva API, hablemos de Houdini rápidamente. El grupo de trabajo CSS-TAG Houdini, más conocido como CSS Houdini o simplemente Houdini, existe para «desarrollar funciones que expliquen la ‘magia’ del estilo y el diseño en la web». La colección de Spécifications Houdini están diseñados para abrir el poder del motor de renderizado del le navigateur, lo que permite una visión más profunda de nuestros estilos y la capacidad de ampliar nuestro motor de renderizado. Con esto, finalmente es posible escribir valores CSS en JavaScript y polyfilling o inventar un nuevo CSS sin un impacto en el rendimiento. Houdini tiene el potencial de potenciar la creatividad en la la toile.

Propriété et valeurs CSS API niveau 1

Les Propriété et valeurs CSS API niveau 1 (Houdini Props and Vals) nous permet de structurer nos propriétés personnalisées. Voici la situation actuelle lors de l'utilisation de propriétés personnalisées:

.thing {
--ma-couleur: green;
}

Étant donné que les propriétés personnalisées n'ont pas de types, elles peuvent être remplacées de manière inattendue. Par exemple, considérez ce qui se passe si vous définissez --ma-couleur avec une URL.

.thing {
--ma-couleur: URL('not-a-color');
Couleur: var(--ma-couleur);
}

Ici parce que --ma-couleur il n'est pas écrit, 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 Couleur, transparent à Contexte). Avec Houdini Props and Vals, les propriétés personnalisées peuvent être inscrit pour que le navigateur sache quoi devrait être!

Maintenant la propriété personnalisée --ma-couleur est enregistré comme couleur! Cela indique au navigateur quels types de valeurs sont autorisés et comment il peut écrire et gérer cette propriété!

Anatomie d'une propriété enregistrée

L'enregistrement d'une propriété ressemble à ceci:

la fenêtre.CSS.registerProperty({
patate douce: '--my-color',
syntaxe: '<color>',
inherits: faux,
initialValue: 'black',
});

Prend en charge les options suivantes:

nom: chaîne

Le nom de la propriété personnalisée.

syntaxe: chaîne

Comment analyser la propriété personnalisée. Vous pouvez trouver une liste complète des valeurs possibles dans le Valeurs et unités CSS spécification. Par défaut à *.

hérite: booléen

S'il hérite de la valeur de son père. Par défaut à vrai.

initialValue: chaîne

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

Regardant de plus près syntaxe. Il existe un certain nombre de options valides
allant des nombres aux couleurs en passant par

les types. Cette syntaxe peut également être modifiée à l'aide des valeurs suivantes

• Ajout + signifie qu'il accepte une liste de valeurs séparées par des espaces à partir de cette syntaxe. Par exemple, + serait une liste de longueurs séparées par des espaces
• Ajout# signifie qu'il accepte une liste de valeurs séparées par des virgules de cette syntaxe. Par exemple, # ce serait une liste de couleurs séparées par des virgules
• Ajouter | entre la syntaxe ou les identificateurs signifie que l'une des options fournies est valide. Par exemple, # | | la magie autoriserait une liste de couleurs séparées par des virgules, une URL ou le mot la magie.

Gotchas

Il y a deux pièges avec Houdini Props et Waltz. La première est qu'une fois définie, il n'y a aucun moyen de mettre à jour une propriété enregistrée existante, et toute tentative de réenregistrer une propriété renverra une erreur indiquant qu'elle a déjà été définie.

Deuxièmement, contrairement aux propriétés standard, les propriétés enregistrées ne sont pas validées lorsqu'elles sont analysées. Au contraire, ils sont validés lorsqu'ils sont calculés. 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 à une propriété valide; une propriété non valide, cependant, reviendra à la valeur par défaut de la propriété enregistrée.

Animation des propriétés personnalisées

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

<scénario>
CSS.registerProperty({
patate douce: '--stop-color',
syntaxe: '<color>',
inherits: faux,
initialValue: 'blue',
});
</scénario>
<style>
bouton {
--stop-color: rapporter;
transition: --stop-color: 1s;
}
button:hover {
--stop-color: green;
}
</style>

Lorsque vous survolez le bouton, il s'animera du rouge au vert! Sans enregistrer la propriété, elle passera d'une couleur à une autre car, 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 transition. Cependant, 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:

bouton {
--stop-color: rapporter;
Contexte: gradient linéaire(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}

Cela animera notre propriété personnalisée qui fait partie de la gradient linéaire, animant ainsi notre dégradé linéaire. Jetez un œil au Glitch ci-dessous pour voir le code complet en action et jouer avec vous-même.

conclusion

Houdini est en route a los navigateurs y, con ello, formas completamente nuevas de trabajar y ampliar CSS. Con el API Paint Déjà livré et maintenant Custom Props and Waltz, notre boîte à outils créative s'agrandit, nous permettant de définir des propriétés CSS écrites et de les utiliser pour créer et animer de nouveaux designs passionnants. D'autres sont en route aussi, dans le La file d'attente des problèmes de Houdini où vous pouvez donner votre avis et voir la suite pour Houdini. Houdini existe pour développer des fonctionnalités qui expliquent la «magie» du style et du design sur le Web, alors sortez et profitez de ces fonctionnalités magiques.

photo par
Maik Jonietz
au
Unsplash