CSS Houdini est un terme générique qui désigne un ensemble d'API de bas niveau qui exposent certaines parties du moteur de rendu CSS et permettent aux développeurs d'accéder au modèle CSS Object Model. 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 code CSS personnalisé sans attendre que les fournisseurs de navigateurs fournissent une compatibilité intégrée pour ces fonctionnalités. C'est génial !
L'API Properties and Values est l'un des ajouts les plus intéressants au CSS dans le cadre de Houdini.
Cette API optimise vos propriétés personnalisées CSS (é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 réaliser des tests CSS.
Écrire des propriétés personnalisées Houdini
Voici un exemple de définition d'une propriété personnalisée (par exemple, une variable CSS), mais avec une syntaxe (type), une valeur initiale (remplacement) et une valeur booléenne d'héritage (hérite-t-elle ou non de la valeur de son parent ?). La méthode actuelle consiste à utiliser CSS.registerProperty() en JavaScript, mais dans les navigateurs compatibles, vous pouvez utiliser @property:
CSS.registerProperty({
name: '--colorPrimary',
syntax: '',
initialValue: 'magenta',
inherits: false
});
@property --colorPrimary {
syntax: '';
initial-value: magenta;
inherits: false;
}
Vous pouvez désormais accéder à --colorPrimary comme toute autre propriété personnalisée CSS 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 (écrire/réécrire), mais avec les propriétés personnalisées Houdini, si vous définissez une valeur "false" lors de son remplacement, le moteur de rendu CSS enverra la valeur initiale (sa valeur de remplacement) au lieu d'ignorer la ligne.
Prenons l'exemple ci-dessous. La variable --colorPrimary présente une valeur 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 revient maintenant à magenta. Cela permet de véritables remplacements et de tests 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
Avec la fonctionnalité syntaxique, vous pouvez maintenant écrire du code CSS sémantique en spécifiant un type. Les types actuellement autorisés sont les suivants:
lengthnumberpercentagelength-percentagecolorimageurlintegerangletimeresolutiontransform-listtransform-functioncustom-ident(chaîne d'identifiant personnalisée)
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 de gradient, car chaque déclaration de gradient 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 constater une transition en douceur de cette couleur de dégradé supérieur vers le bas.
Le navigateur de gauche est compatible avec l'API Houdini Properties and Values, ce qui permet une transition en douceur des arrêts de dégradé. Le navigateur de droite ne la suit pas. Le navigateur non compatible ne peut comprendre cette modification que sous la forme d'une chaîne allant d'un point A au point B. Il n'est pas possible d'interpoler les valeurs, et la transition ne devrait donc pas être 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 s'affichera. Vous pouvez instancier la propriété personnalisée --gradPoint comme suit:
/* Check for Houdini support & register property */
@supports (background: paint(something)) {
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
}
Ensuite, au moment de l'animer, vous pouvez remplacer la valeur de l'élément 40% initial par 100%:
@supports (background: paint(something)) {
.post:hover,
.post:focus {
--gradPoint: 100%;
}
}
La transition en dégradé est ainsi fluide.
Conclusion
La règle @property rend une technologie intéressante encore plus accessible en vous permettant d'écrire du code CSS pertinent d'un point de vue sémantique dans le CSS lui-même. Pour en savoir plus sur le CSS Houdini et l'API Properties and Values, consultez ces ressources:
- Houdini est-il prêt ?
- Référence de MN Houdini
- Propriétés personnalisées plus intelligentes avec la nouvelle API de Houdini
- File d'attente des problèmes Houdini CSSWG
Photo de Cristian Escobar sur Unsplash.