Une nouvelle ère commence pour les développeurs web : la règle @property, une des API CSS Houdini, est désormais entièrement compatible avec tous les navigateurs récents. Cette avancée vous offre un contrôle et une flexibilité inégalés pour vos propriétés CSS personnalisées, également connues sous le nom de variables CSS.
Qu'est-ce que la règle @property ?
La règle @property permet aux développeurs de définir le type de données et la valeur initiale des propriétés CSS personnalisées, améliorant ainsi la gestion des erreurs et offrant des possibilités créatives, comme l'animation des dégradés. À partir du 9 juillet 2024, cette fonctionnalité sera disponible dans les trois principaux moteurs de navigateur.
Avantages de la règle @property
Signification Sémantique
En utilisant la règle @property, vous pouvez définir un type (syntax) pour vos propriétés personnalisées. Cela permet au navigateur de comprendre le type de données que ces propriétés contiennent, comme des couleurs, des longueurs ou des nombres. Par exemple :
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Valeurs de Remplacement
Grâce à @property, les styles ne disparaîtront plus lorsque des valeurs non valides sont assignées à des propriétés. Le navigateur utilisera alors une valeur de remplacement :
:root {
--myColor: hotpink;
}
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Gestion des Erreurs Améliorée
L'amélioration de la sûreté du typage et la possibilité de définir des valeurs de remplacement offrent de nouvelles opportunités pour les tests et la validation directement dans votre CSS.
Création des Propriétés Personnalisées Avancées
Les propriétés personnalisées standard sont définies avec un double tiret (--). Cependant, pour bénéficier des avantages d'@property, il est recommandé de les enregistrer avec des détails supplémentaires :
:root {
--myColor: hotpink;
}
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Avec cette approche, si une valeur non valide est affectée à --myColor, le navigateur utilisera automatiquement la valeur de remplacement définie.
Exemple de Mise en Pratique : Arrière-plan en Dégradé Scintillant
Une des applications fascinantes de la règle @property est l'animation des propriétés complexes comme les dégradés. Par exemple, pour créer une carte avec un arrière-plan animé :
@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;
}
.card {
background: radial-gradient(
300px circle at 55% 60%,
var(--shine-2), transparent 100%),
radial-gradient(
farthest-side circle at 75% 30%,
var(--shine-1) 0%, var(--card-bg) 100%);
}
@keyframes animate-color-1 {
to {
--shine-1: orange;
}
}
@keyframes animate-color-2 {
to {
--shine-2: hotpink;
}
}
.card {
animation:
animate-color-1 8s infinite linear alternate,
animate-color-2 1s infinite linear alternate;
}
Conclusion
L'incorporation de la règle @property dans le CSS ouvre des possibilités incroyables pour les développeurs web. En nous permettant de définir des types et des valeurs initiales pour nos propriétés CSS personnalisées, elle offre une gestion d'erreurs avancée et des options de création inédites. La règle @property fait maintenant partie intégrante de notre boîte à outils de développeurs web.
