Donner des super pouvoirs aux variables CSS

CSS Houdini es un término general que cubre un conjunto de API de bajo nivel que exponen partes del motor de renderizado CSS y dan a los desarrolladores acceso al modelo de objetos CSS. Este es un gran cambio para el ecosistema CSS, ya que permite a los desarrolladores decirle al le navigateur cómo leer y analizar CSS personalizado sin esperar a que los proveedores de navigateurs implementen de forma nativa estas características. ¡Qué emocionante!

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 () au JavaScript, pero en Chromium 85 y posteriores, el
@propriété la syntaxe sera compatible avec vos fichiers CSS:

CSS.registerProperty({
patate douce: '--colorPrimary',
syntaxe: '<color>',
initialValue: 'magenta',
inherits: faux
});

@propriété --couleurPrimaire {
syntaxe: '<color>';
valeur initiale: magenta;
inherits: 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 de l'arrière plan: var(--couleurPrimaire); 
}
.highlight-card {
--couleurPrimaire: yellow;
Couleur de l'arrière plan: var(--couleurPrimaire); 
}
.another-card {
--couleurPrimaire: 23;
Couleur de l'arrière plan: var(--couleurPrimaire); 
}

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.

Para ilustrar este punto, le mostraré cómo animar un dégradé. Actualmente, no hay forma de animar (o interpolar) sin problemas entre los valores de gradiente, ya que cada declaración de gradiente se analiza como una cadena.

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 (Contexte: paint(something)) {
@propriété --gradPoint {
syntaxe: '<percentage>';
inherits: 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 (Contexte: paint(something)) {
.post:hover,
.post:focus {
--gradPoint: 100%;
}
}

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

conclusion

Les @propriété rule hace que una tecnología emocionante être aún más accesible al permitirle escribir CSS semánticamente significativo dentro del propio CSS. Para obtener más información sobre CSS Houdini y la API de propiedades y valores, consulte estos recursos:

photo par Christian Escobar sur Unsplash.