Donner des super pouvoirs 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 énorme changement 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 implémentent ces fonctionnalités de manière native. Que c'est émouvant!

L'un des ajouts les plus intéressants au CSS dans le cadre de Houdini est le
API Propriétés et Valeurs. Cette API suralimente vos propriétés CSS personnalisées (également connues sous le nom de variables CSS) en leur donnant une signification sémantique (définie par une syntaxe) et même des valeurs alternatives, permettant des tests CSS.

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

Voici un exemple de définition d'une propriété personnalisée (pensez: variable CSS), mais maintenant avec une syntaxe (type), une valeur initiale (support) et un booléen d'héritage (hérite-t-il de la valeur de son parent ou non?). La façon actuelle de le faire est de CSS.registerProperty () en JavaScript, mais dans Chromium 85 et versions ultérieures, le
@propriété la syntaxe sera compatible avec vos fichiers CSS:

CSS . registerProperty ( {
 nom : '--colorPrimary' ,
 syntaxe : ' ' ,
 initialValue : 'magenta' ,
 hérite : faux
 } ) ;

@property --colorPrimary {
 syntaxe : ' ' ;
 valeur initiale : magenta ;
 hérite : faux ;
 }

Maintenant, vous pouvez accéder --couleurPrimaire comme toute autre propriété personnalisée CSS, via
var (- colorPrimary). Cependant, la différence ici est que --couleurPrimaire il n'est pas lu uniquement comme une chaîne. Vous avez des données!

Valeurs alternatives

Comme pour toute autre propriété personnalisée, vous pouvez obtenir (en utilisant 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 lors de la substitution, le moteur de rendu CSS enverra la valeur initiale (son valeur de réserve) au lieu d'ignorer la ligne.

Prenons l'exemple suivant. Les --couleurPrimaire variable a un
valeur initiale de magenta. Mais le développeur lui a donné la valeur invalide "23". Sans @propriété, l'analyseur CSS ignorerait le code invalide. Maintenant, l'analyseur revient à magenta. Cela permet de véritables sauvegardes et tests dans CSS. Organiser!

.card {
 couleur d'arrière-plan : var ( --colorPrimary ) ;
 }
 .highlight-card {
 --couleurPrimaire : jaune ;
 couleur d'arrière-plan : var ( --colorPrimary ) ;
 }
 .another-card {
 --couleurPrimaire : 23 ;
 couleur d'arrière-plan : var ( --colorPrimary ) ;
 }

Syntaxe

Avec la fonction de syntaxe, vous pouvez maintenant écrire du CSS sémantique en spécifiant un type. Les types actuels autorisés comprennent:

• longueur
• numéro
• pourcentage
• pourcentage de longueur
• Couleur
• image
• URL
• entier
• angle
• temps
• résolution
• liste de transformation
• fonction de transformation
• identifiant-personnalisé (une chaîne d'identification personnalisée)

La définition d'une syntaxe permet au navigateur de vérifier les 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 transparente entre les valeurs de dégradé, car chaque déclaration de dégradé est analysée comme une chaîne.

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

Le navigateur sur la gauche prend en charge l'API Propriétés et valeurs Houdini, permettant une transition d'arrêt de dégradé en douceur. Le navigateur de droite ne le fait pas. Le navigateur non pris en charge ne peut comprendre ce changement que comme une chaîne allant du point A au point B. Il n'y a aucune possibilité d'interpoler les valeurs et par conséquent, aucune transition en douceur n'est observée.

Cependant, si vous déclarez le type de syntaxe lors de l'écriture de propriétés personnalisées et que vous utilisez ensuite ces propriétés personnalisées pour activer l'animation, vous verrez la transition. Vous pouvez instancier la propriété personnalisée --gradPoint aimer:

@supports ( arrière - plan: peindre ( quelque chose ) ) {
 @property --gradPoint {
 syntaxe : ' ' ;
 hérite : faux ;
 valeur initiale : 40% ;
 }
 }

Et puis quand il est temps de l'animer, vous pouvez mettre à jour la valeur de l'initiale 40% à 100%:

@supports ( arrière - plan: peindre ( quelque chose ) ) {
 .post: survoler,
 .post: focus {
 --gradPoint : 100% ;
 }
 }

Cela permettra désormais cette transition de dégradé en douceur.

conclusion

Les @propriété rule rend une technologie passionnante encore plus accessible en vous permettant d'écrire du CSS sémantiquement significatif dans le CSS lui-même. Pour plus d'informations sur CSS Houdini et l'API Properties and Values, consultez ces ressources:

photo par Christian Escobar sur Unsplash.