@property: donner des superpouvoirs aux variables CSS

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 majeur pour l'écosystème CSS, car il permet aux développeurs d'indiquer au navigateur comment lire et analyser les fichiers CSS personnalisés sans attendre que les fournisseurs de navigateurs fournissent une prise en charge intégrée de ces fonctionnalités. C'est génial !

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 ?). Pour ce faire, 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 !

Valeurs de remplacement

Comme pour toute autre propriété personnalisée, vous pouvez obtenir (en utilisant var) ou définir des valeurs (écriture/réécriture). Toutefois, avec les propriétés personnalisées Houdini, si vous définissez une valeur "falsey" 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 ignorerait le code non valide. L'analyseur utilise maintenant magenta. Cela permet de réaliser des remplacements et des tests réels dans le 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 dégradé est animé de 40 % à 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 des arrêts de dégradé. Ce n'est pas le cas du navigateur de droite. Le navigateur non compatible ne peut comprendre cette modification que comme une chaîne allant du point A au point B. Vous n'avez pas la possibilité d'interpoler les valeurs, et la transition n'est donc pas 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 :

Photo de Cristian Escobar sur Unsplash.