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
:
CSS.registerProperty({ name: '--colorPrimary', syntax: '<color>', initialValue: 'magenta', inherits: false });
@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.
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.
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 liés au CSSWG Houdini
Photo de Cristian Escobar sur Unsplash.