@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 des parties du moteur de rendu CSS et permettent aux développeurs d'accéder au modèle d'objet CSS. Il s'agit d'un changement important pour l'écosystème CSS, car il permet aux développeurs d'indiquer au navigateur comment lire et analyser le CSS personnalisé sans attendre que les fournisseurs de navigateurs fournissent une prise en charge intégrée de ces fonctionnalités. C'est tellement excitant !

L'API Properties and Values est l'une des nouveautés les plus intéressantes du CSS dans le cadre de Houdini.

Cette API améliore vos propriétés CSS personnalisées (également appelées variables CSS) en leur donnant une signification sémantique (définie par une syntaxe) et même des valeurs de remplacement, ce qui permet de tester le CSS.

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

Voici un exemple de définition d'une propriété personnalisée (pensez à une variable CSS), mais avec une syntaxe (type), une valeur initiale (valeur de remplacement) et une valeur booléenne d'héritage (hérite-t-elle de la valeur de son parent ou non ?). La méthode actuelle consiste à utiliser 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 simplement lu 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 (à l'aide de var) ou définir (écrire/réécrire) des valeurs, mais avec les propriétés personnalisées Houdini, si vous définissez une valeur fausse lorsque vous la remplacez, 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 un initial-value de magenta. Cependant, le développeur lui a attribué la valeur non valide "23". Sans @property, l'analyseur CSS ignore le code non valide. L'analyseur utilise désormais magenta. Cela permet de véritables remplacements et 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

Grâce à la fonctionnalité de syntaxe, vous pouvez désormais écrire du 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é)

Définir une syntaxe permet au navigateur de vérifier le typage 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 de dégradé, car chaque déclaration de dégradé est analysée en tant que chaîne.

En utilisant une propriété personnalisée avec une syntaxe "nombre", le dégradé de gauche affiche une transition fluide entre les valeurs d'arrêt. Le dégradé de droite utilise une propriété personnalisée par défaut (aucune syntaxe définie) et affiche une transition abrupte.

Dans cet exemple, le pourcentage d'arrêt du gradient est animé d'une valeur de départ de 40% à une valeur de fin de 100% via une interaction de survol. Vous devriez voir une transition fluide de cette couleur de dégradé supérieure vers le bas.

Le navigateur de gauche est compatible avec l'API Houdini Properties and Values, ce qui permet une transition fluide vers l'arrêt du dégradé. Le navigateur de droite ne le fait pas. Le navigateur non compatible ne peut comprendre cette modification que comme une chaîne allant du point A au point B. Il n'est pas possible d'interpoler les valeurs. Vous ne voyez donc pas cette transition fluide.

Toutefois, si vous déclarez un type de syntaxe lorsque vous écrivez des propriétés personnalisées, puis que vous utilisez ces propriétés personnalisées pour activer l'animation, la transition s'affiche. Vous pouvez instancier la propriété personnalisée --gradPoint comme suit :

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

Lorsque vous souhaitez 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.

Bordures en dégradé avec transition fluide. Voir la démonstration sur Glitch

Conclusion

La règle @property rend une technologie passionnante encore plus accessible en vous permettant d'écrire du CSS sémantiquement pertinent dans le CSS lui-même. Pour en savoir plus sur CSS Houdini et l'API Properties and Values, consultez ces ressources :

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

Photo de Cristian Escobar sur Unsplash.