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

Una Kravets

Préparez-vous pour un bonus CSS ! La règle @property, qui fait partie des API CSS Houdini, est désormais entièrement compatible avec tous les navigateurs récents. 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). Vos feuilles de style sont ainsi 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 contenues dans votre propriété personnalisée (par exemple, des couleurs, des longueurs ou des nombres), ce qui permet d'éviter des résultats inattendus et de prendre en charge de nouvelles possibilités telles que l'animation des dégradés.
• Valeurs de remplacement:fini les styles qui disparaissent ! Utilisez @property afin de définir la valeur initiale d'une propriété personnalisée. Si une valeur non valide est attribuée ultérieurement, le navigateur utilise la valeur de remplacement que vous avez définie.
• Gestion des erreurs améliorée:la sûreté du typage améliorée et la possibilité de définir des valeurs de remplacement offrent 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 règle "standard", personnalisée, 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 des chaînes) est initialisée.

:root {
 --myColor: hotpink;
}

Pour bénéficier des avantages de ces "propriétés personnalisées avancées", y compris 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 nom et une valeur. Elle inclut le type de syntaxe et définit l'héritage sur true ou false.

L'avantage de cette approche est qu'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 mettait à jour cette propriété en lui attribuant un nombre comme valeur, toute utilisation de cette propriété échouerait. À l'aide de @property, une couleur de remplacement est définie, ainsi qu'un élément 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 création de remplacement est utilisée à la place.

Démonstration: Arrière-plan en dégradé scintillant

L'une des applications intéressantes de @property est l'animation fluide des propriétés qui étaient auparavant impossibles à transférer, comme les dégradés, qui sont perçus comme des images par le navigateur. Toutefois, si vous donnez un sens 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 carte avec une animation subtile en arrière-plan composée de deux dégradés radiaux qui changent de couleur sur différentes timelines:

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;
}

Ensuite, vous y accédez pour créer l'arrière-plan du 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 des images clés:

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

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

Animez chacun d'entre eux:

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

Conclusion

Les propriétés personnalisées enregistrées au format CSS constituent une fonctionnalité très efficace qui étend le langage CSS en fournissant un sens et un contexte aux variables CSS. Maintenant que @property est dans la référence, ce superpouvoir CSS gagne en puissance.

Autres ressources à lire

• Documents Web MDN
• @property: donnez des superpouvoirs aux variables CSS