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
:
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 (à 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.
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.
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.