@property: Variables CSS nouvelle génération désormais compatibles avec les navigateurs universels

Una Kravets

Publié le 12 juillet 2024

Préparez-vous à découvrir une nouvelle fonctionnalité CSS ! La règle @property, qui fait partie de l'ensemble d'API CSS Houdini, est désormais entièrement compatible avec tous les navigateurs modernes. Cette fonctionnalité révolutionnaire offre de nouveaux niveaux de contrôle et de flexibilité pour les propriétés CSS personnalisées (également appelées variables CSS), ce qui rend vos feuilles de style plus intelligentes et plus dynamiques.

Avantages de @property

  • Signification sémantique:utilisez @property pour définir un type (syntaxe) pour vos propriétés personnalisées. Cela indique au navigateur le type de données stockées dans votre propriété personnalisée (par exemple, des couleurs, des longueurs ou des nombres), ce qui évite les résultats inattendus et permet de nouvelles possibilités, comme l'animation des dégradés.
  • Valeurs de remplacement:plus de styles qui disparaissent ! Utilisez @property pour définir une valeur initiale pour une propriété personnalisée. Si une valeur non valide est attribuée ultérieurement, le navigateur utilise de manière appropriée la valeur de remplacement définie.
  • Mise à niveau de la gestion des erreurs:la sécurité des types améliorée et la possibilité de définir des solutions de remplacement ouvrent de nouvelles possibilités de test et de validation directement dans votre CSS.

Créer des propriétés personnalisées avancées

Pour créer une propriété personnalisée "standard", définissez un nom de propriété précédé d'un -- et attribuez une valeur à cette propriété. La valeur de ces propriétés personnalisées est analysée en tant que chaîne par le navigateur.

L'exemple suivant montre comment une propriété personnalisée par défaut (basée sur une chaîne) est initialisée.

:root {
 --myColor: hotpink;
}

Pour profiter des avantages de ces "propriétés personnalisées avancées", y compris de la sémantique au-delà d'une chaîne, enregistrez votre propriété personnalisée CSS avec @property.

Dans cet exemple, la même propriété personnalisée est initialisée avec @property.

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

La propriété personnalisée initialisée avec @property fournit beaucoup plus de détails qu'un simple nom et une valeur. Il inclut le type de syntaxe et définit l'héritage sur "true" ou "false".

L'avantage de cette approche est que, avec la propriété standard, vous vous attendez à ce que cette propriété contienne une couleur en tant que valeur, et vous allez utiliser cette couleur ailleurs dans la feuille de style. Si quelqu'un devait modifier cette propriété pour qu'elle contienne un nombre comme valeur, toute utilisation de la propriété ailleurs échouerait. Avec @property, une couleur de remplacement est définie, ainsi qu'un syntax qui déclare que cette propriété doit contenir une valeur de couleur. Si une valeur autre qu'une couleur est utilisée, la valeur de remplacement est utilisée à la place.

Démo: Fond dégradé scintillant

L'une des applications intéressantes de @property est l'animation fluide des propriétés pour lesquelles la transition était auparavant impossible, comme les dégradés, qui sont perçus comme des images par le navigateur. Toutefois, si vous attribuez une signification syntaxique aux variables via @property, vous pouvez les utiliser dans une instruction de gradient. Vous décrivez maintenant une animation entre deux valeurs déclarées dans le dégradé, ce qui active l'animation. Prenons l'exemple suivant: une fiche avec une animation d'arrière-plan subtile composée de deux dégradés radiaux qui changent de couleur sur différentes échelles temporelles:

Utilisation de @property pour animer les couleurs dans un dégradé d'arrière-plan.

Pour ce faire, configurez les valeurs de vos propriétés personnalisées en tant que couleurs:

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: lavender;
}

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

Vous y accédez ensuite pour créer l'arrière-plan dégradé initial:

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

Vous devez également mettre à jour les valeurs dans les images clés:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

et animez chacun des éléments suivants:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

Conclusion

Les propriétés personnalisées enregistrées CSS sont une fonctionnalité très puissante qui étend le langage CSS en fournissant un sens et un contexte aux variables CSS. Maintenant que @property est disponible dans la version de référence, cette super-puissance CSS gagne en puissance.

Autres ressources à lire