Utilisation de @Property pour les propriétés personnalisées CSS

Chrome prend désormais en charge la déclaration de propriétés personnalisées CSS à l'aide de @property et fournit des informations plus détaillées que les chaînes. Cet article explore cette fonctionnalité en profondeur.

Dans le passé, la déclaration de propriétés personnalisées CSS était la suivante:

 html {
  --Stop: 50%;
}

Nous pouvons maintenant utiliser @property pour fournir plus de détails:

 @property --stop {
  Syntaxe: "<percentage> "
  valeur initiale: 50%;
  hérite: faux;
}</percentage>

Le navigateur sait maintenant que cette propriété personnalisée est un pourcentage, pas une chaîne. D'autres types utiles incluent<integer></integer> et<color></color> . En transmettant des informations au navigateur de cette façon, nous obtenons de nouvelles capacités, telles que la transition entre deux valeurs.

Cependant, dans les applications pratiques, il est important de noter que les propriétés qui doivent être en transition doivent être clairement spécifiées ( transition simple ne peut pas être mise en œuvre). La démonstration suivante reproduit les exemples de l'article Una Kravetz:

Notez que j'anime la position du point d'arrêt des couleurs (pourcentage), mais j'ai également essayé d'animer la couleur elle-même, mais cela ne fonctionne toujours pas. Je pensais à l'origine que cette nouvelle fonctionnalité pourrait y parvenir. Les gens ont longtemps été confus quant à l'incapacité d'animer les gradients. (Voir l'article d'Ana Tudor.)

Pour les navigateurs qui ne prennent pas en charge les propriétés personnalisées, nous pouvons redémarrer les propriétés à un niveau supérieur pour fournir un support. Cela semble un peu drôle. Safari montre l'intérêt pour cette technologie basée à Houdini, mais n'a pas encore été soutenue. Firefox? La situation n'est pas claire, et ils l'ont marqué comme "digne de prototypage" avant les licenciements.

@property peut également résoudre l'étrange problème de secours des propriétés personnalisées CSS:

Comme toutes les autres propriétés personnalisées, vous pouvez obtenir (en utilisant var ) ou définir des valeurs (écrire / réécrire), mais pour les propriétés personnalisées de Houdini, si vous définissez une fausse valeur lors de l'écrasement, le moteur de rendu CSS enverra la valeur initiale (sa valeur de repli) au lieu d'ignorer la ligne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!