@property: donner des superpouvoirs aux variables CSS

Una Kravets

CSS Houdini est un terme générique qui couvre un ensemble d'API de bas niveau qui exposent certaines parties du moteur de rendu CSS et donnent aux développeurs l'accès au modèle d'objet CSS. Il s'agit d'une énorme pour l'écosystème CSS, car il permet aux développeurs d'indiquer au navigateur de lire et d'analyser des CSS personnalisés sans attendre la réponse des fournisseurs de navigateurs la prise en charge intégrée de ces fonctionnalités. C'est génial !

L'un des ajouts les plus intéressants au CSS dans la gamme Houdini est Propriétés et valeurs API.

Cette API optimise vos propriétés CSS personnalisées (communément appelées variables CSS) en leur attribuant une signification sémantique (définie par une syntaxe) et même les valeurs de remplacement, ce qui permet d'effectuer des tests CSS.

Écrire des propriétés personnalisées Houdini

Voici un exemple de définition d'une propriété personnalisée (variable CSS, par exemple). avec une syntaxe (type), une valeur initiale (remplacement) et une valeur d'héritage booléenne ( hérite ou non de la valeur de son parent ?). La méthode actuelle est via CSS.registerProperty() en JavaScript, mais dans les navigateurs compatibles, vous pouvez utiliser @property:

Fichier JavaScript distinct (Chromium 78)

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

Inclus dans le fichier CSS (Chromium 85)

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Vous pouvez désormais accéder à --colorPrimary comme n'importe quelle autre propriété CSS personnalisée, via var(--colorPrimary) Cependant, la différence ici est que --colorPrimary n'est pas comme une chaîne. Il contient des données !

Lorsque vous écrivez une propriété personnalisée enregistrée avec un syntax spécifié, vous devez également inclure un initial-value.

Valeurs de remplacement

Comme pour toute autre propriété personnalisée, vous pouvez obtenir (en utilisant var) ou définir (écrire/réécrire), mais avec des propriétés personnalisées Houdini, si vous définissez une valeur "falsey" lors de son remplacement, le moteur de rendu CSS envoie la valeur initiale (sa valeur de remplacement) au lieu d'ignorer la ligne.

Prenons l'exemple ci-dessous. La variable --colorPrimary a une valeur initial-value sur magenta. Mais le développeur lui a donné l'autorisation non valide la valeur "23". Sans @property, l'analyseur CSS ignore les code incorrect. L'analyseur utilise maintenant magenta. Cela permet de véritables remplacements et de tests dans CSS. Excellent !

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

Syntaxe

Avec la fonctionnalité de syntaxe, vous pouvez désormais écrire du code CSS sémantique en spécifiant un type. Les types actuellement autorisés sont les suivants:

• length
• number
• percentage
• length-percentage
• color
• image
• url
• integer
• angle
• time
• resolution
• transform-list
• transform-function
• custom-ident (chaîne d'identifiant personnalisé)

La définition d'une syntaxe permet au navigateur de vérifier le type des propriétés personnalisées. Cela présente de nombreux avantages.

Pour illustrer ce point, je vais vous montrer comment animer un dégradé. Actuellement, il n'existe aucun moyen d'animer (ou d'interpoler) de manière fluide entre les valeurs du gradient, car chaque déclaration de gradient est analysée en tant que chaîne.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Utiliser une propriété personnalisée avec un "nombre" la syntaxe du dégradé, le dégradé de gauche entre les valeurs des arrêts. Le dégradé de droite utilise une propriété personnalisée par défaut. (aucune syntaxe définie) et présente une transition brusque.

Dans cet exemple, le pourcentage d'arrêt du gradient est animé à partir d'un point de 40% et une valeur de fin de 100% via un survol avec la souris. Vous devriez voir une transition en douceur de cette couleur en dégradé supérieur vers le bas.

Le navigateur de gauche est compatible avec l'API Houdini Properties and Values, permettant ainsi une transition fluide de l'arrêt du dégradé. Ce n'est pas le cas du navigateur de droite. La un navigateur non compatible ne peut comprendre ce changement que comme une chaîne du point A au point B. Vous n'avez pas la possibilité d'interpoler les valeurs. La transition n'est donc pas fluide.

Toutefois, si vous déclarez le type de syntaxe lors de l'écriture de propriétés personnalisées et que vous utilisez ces propriétés personnalisées pour activer l'animation, la transition apparaît. Toi Vous pouvez instancier la propriété personnalisée --gradPoint comme suit:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

Ensuite, au moment de l'animer, vous pouvez remplacer la valeur 40% initiale par 100%:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

La transition en dégradé se fera maintenant en douceur.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Passage fluide des bordures en dégradé Voir la démonstration sur Glitch

Conclusion

La règle @property rend cette technologie encore plus accessible ce qui vous permet d'écrire directement du code CSS pertinent d'un point de vue sémantique. Pour apprendre sur le CSS Houdini et l'API Properties and Values, consultez ces ressources:

• Houdini est-il prêt ?
• Référence MDN sur Houdini
• Propriétés personnalisées plus intelligentes avec la nouvelle API d'Houdini
• File d'attente des problèmes liés au CSSWG Houdini

Photo de Cristian Escobar sur Unsplash.