Maîtriser le CSS : Enregistrement de propriétés personnalisées avec @property

Les propriétés personnalisées (également connues sous le nom de variables CSS) ont révolutionné la façon dont nous écrivons et maintenons le CSS. Elles nous permettent de définir des valeurs réutilisables, rendant nos feuilles de style plus flexibles et maintenables. Mais que se passerait-il si vous pouviez aller au-delà de la simple définition de valeurs ? Et si vous pouviez définir le type de valeur qu'une propriété personnalisée contient, ainsi que sa valeur initiale et son comportement d'héritage ? C'est là qu'intervient @property.

Qu'est-ce que @property ?

@property est une at-rule CSS qui vous permet d'enregistrer explicitement une propriété personnalisée auprès du navigateur. Ce processus d'enregistrement fournit au navigateur des informations sur le type attendu de la propriété, sa valeur initiale et si elle doit hériter de son élément parent. Cela débloque plusieurs capacités avancées, notamment :

• Vérification de type : Garantit que la propriété personnalisée se voit attribuer une valeur du type correct.
• Animation : Permet des transitions et des animations fluides pour les propriétés personnalisées de types spécifiques, comme les nombres ou les couleurs.
• Valeurs par défaut : Fournit une valeur de secours si la propriété personnalisée n'est pas explicitement définie.
• Contrôle de l'héritage : Détermine si la propriété personnalisée hérite de sa valeur de son élément parent.

Considérez cela comme l'ajout de la sécurité de type à vos variables CSS. Elle vous permet de créer des feuilles de style plus robustes et plus prévisibles.

La syntaxe de @property

La règle @property suit cette syntaxe de base :

@property --nom-propriete {
  syntaxe: '';
  herite: true | false;
  valeur-initiale: ;
}

Décomposons chaque partie :

• --nom-propriete : Le nom de la propriété personnalisée que vous souhaitez enregistrer. Il doit commencer par deux tirets (--).
• syntaxe : Définit le type de valeur attendu pour la propriété. C'est crucial pour la vérification de type et l'animation. Nous explorerons les valeurs de syntaxe disponibles en détail ci-dessous.
• herite : Une valeur booléenne indiquant si la propriété doit hériter de son élément parent. Par défaut, c'est false si non spécifié.
• valeur-initiale : La valeur par défaut pour la propriété si elle n'est pas explicitement définie sur un élément. Cela garantit qu'une valeur de secours est toujours disponible.

Comprendre le descripteur syntaxe

Le descripteur syntaxe est la partie la plus importante de la règle @property. Il indique au navigateur quel type de valeur attendre pour la propriété personnalisée. Voici quelques valeurs de syntaxe courantes :

• * : Permet n'importe quelle valeur. C'est la syntaxe la plus permissive et elle reproduit essentiellement le comportement d'une variable CSS standard sans enregistrement. Utilisez ceci avec parcimonie.
• <longueur> : Attend une valeur de longueur (par exemple, 10px, 2em, 50%). Cela permet des animations fluides entre différentes valeurs de longueur.
• <nombre> : Attend une valeur numérique (par exemple, 1, 3.14, -5). Utile pour animer des propriétés numériques comme l'opacité ou l'échelle.
• <pourcentage> : Attend une valeur de pourcentage (par exemple, 25%, 100%).
• <couleur> : Attend une valeur de couleur (par exemple, #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). Permet des transitions et des animations de couleurs fluides.
• <image> : Attend une valeur d'image (par exemple, url(image.jpg), linear-gradient(...)).
• <entier> : Attend une valeur entière (par exemple, 1, -10, 0).
• <angle> : Attend une valeur d'angle (par exemple, 45deg, 0.5rad, 200grad). Utile pour animer les rotations.
• <temps> : Attend une valeur de temps (par exemple, 1s, 500ms). Utile pour contrôler les durées ou les délais d'animation via des propriétés personnalisées.
• <resolution> : Attend une valeur de résolution (par exemple, 300dpi, 96dpi).
• <liste-transformation> : Attend une liste de fonctions de transformation (par exemple, translateX(10px) rotate(45deg)). Permet d'animer des transformations complexes.
• <identifiant-personnalise> : Attend un identifiant personnalisé (une chaîne de caractères). Similaire à une enum.
• <chaine> : Attend une valeur de chaîne (par exemple, "Bonjour le monde"). Soyez prudent avec ceci, car l'animation de chaînes n'est généralement pas prise en charge.
• Syntaxes personnalisées : Vous pouvez créer des syntaxes plus complexes en combinant les éléments ci-dessus et les opérateurs | (ou), [] (groupement), + (un ou plusieurs), * (zéro ou plusieurs), et ? (zéro ou un). Par exemple : <longueur> | <pourcentage> permet soit une longueur, soit une valeur en pourcentage.

Choisir la syntaxe correcte est essentiel pour exploiter toute la puissance de @property.

Exemples pratiques de @property

Examinons quelques exemples pratiques de l'utilisation de @property dans votre CSS.

Exemple 1 : Animation de la couleur de fond

Supposons que vous souhaitiez animer la couleur de fond d'un bouton. Vous pouvez utiliser @property pour enregistrer une propriété personnalisée pour la couleur de fond, puis l'animer à l'aide de transitions CSS.

@property --couleur-fond {
  syntaxe: '<couleur>';
  herite: false;
  valeur-initiale: #fff;
}

.bouton {
  couleur-fond: var(--couleur-fond);
  transition: --couleur-fond 0.3s ease;
}

.bouton:hover {
  --couleur-fond: #f00; /* Rouge */
}

Dans cet exemple, nous enregistrons la propriété personnalisée --couleur-fond avec la syntaxe <couleur>, ce qui signifie qu'elle attend une valeur de couleur. La valeur-initiale est définie sur blanc (#fff). Lorsque le bouton est survolé, la --couleur-fond est changée en rouge (#f00), et la transition anime en douceur le changement de couleur de fond.

Exemple 2 : Contrôle du rayon de bordure avec un nombre

Vous pouvez utiliser @property pour contrôler le rayon de bordure d'un élément et l'animer.

@property --rayon-bordure {
  syntaxe: '<longueur>';
  herite: false;
  valeur-initiale: 0px;
}

.boite-arrondie {
  rayon-bordure: var(--rayon-bordure);
  transition: --rayon-bordure 0.5s ease;
}

.boite-arrondie:hover {
  --rayon-bordure: 20px;
}

Ici, nous enregistrons --rayon-bordure comme une <longueur>, en nous assurant qu'elle accepte des valeurs de longueur comme px, em ou %. La valeur initiale est 0px. Lors du survol de la .boite-arrondie, le rayon de bordure est animé à 20px.

Exemple 3 : Animation d'un décalage d'ombre

Disons que vous voulez animer le décalage horizontal d'une ombre portée.

@property --ombre-decalage-x {
  syntaxe: '<longueur>';
  herite: false;
  valeur-initiale: 0px;
}

.boite-ombre {
  ombre-portee: var(--ombre-decalage-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --ombre-decalage-x 0.3s ease;
}

.boite-ombre:hover {
  --ombre-decalage-x: 10px;
}

Dans ce cas, --ombre-decalage-x est enregistré comme une <longueur>, et sa valeur initiale est 0px. La propriété ombre-portee utilise cette propriété personnalisée pour son décalage horizontal. Au survol, le décalage est animé à 10px.

Exemple 4 : Utilisation de <identifiant-personnalise> pour le th�mage

La syntaxe <identifiant-personnalise> vous permet de définir un ensemble de valeurs de chaînes prédéfinies, créant ainsi efficacement une énumération pour vos variables CSS. C'est utile pour le th�mage ou le contrôle d'�tats distincts.

@property --theme {
  syntaxe: '<identifiant-personnalise>';
  herite: true;
  valeur-initiale: clair;
}

:root {
  --theme: clair; /* Th�me par d�faut */
}

body {
  couleur-fond: var(--theme) == clair ? #fff : #333;
  couleur: var(--theme) == clair ? #000 : #fff;
}

.theme-sombre {
  --theme: sombre;
}

Ici, --theme est enregistré avec la syntaxe <identifiant-personnalise>. Bien que nous ne listions pas explicitement les identifiants autorisés dans la règle @property elle-même, le code implique qu'il s'agit de clair et sombre. Le CSS utilise ensuite une logique conditionnelle (var(--theme) == clair ? ... : ...) pour appliquer différents styles en fonction du th�me actuel. L'ajout de la classe theme-sombre à un élément basculera le th�me sur sombre. Notez que la logique conditionnelle utilisant var() n'est pas du CSS standard et nécessite souvent des préprocesseurs ou du JavaScript. Une approche plus standard utiliserait des classes CSS et le cascade :

@property --theme {
  syntaxe: '<identifiant-personnalise>';
  herite: true;
  valeur-initiale: clair;
}

:root {
  --theme: clair;
}

body {
  couleur-fond: #fff;
  couleur: #000;
}

body[data-theme="sombre"] {
  couleur-fond: #333;
  couleur: #fff;
}

/* Basculement du th�me via JavaScript */
/* document.body.setAttribute('data-theme', 'sombre'); */

Dans cet exemple révisé, nous utilisons un attribut data-theme sur l'élément body pour contrôler le th�me. Le JavaScript (commenté) serait utilisé pour basculer l'attribut entre clair et sombre. C'est une approche plus robuste et standard du th�mage avec des variables CSS.

Avantages de l'utilisation de @property

L'utilisation de @property offre plusieurs avantages :

• Lisibilité et maintenabilité améliorées du code : En définissant explicitement le type de valeur attendu pour une propriété personnalisée, vous rendez votre code plus compréhensible et moins sujet aux erreurs.
• Capacités d'animation améliorées : @property permet des transitions et des animations fluides pour les propriétés personnalisées, ouvrant de nouvelles possibilités pour la création d'interfaces utilisateur dynamiques et attrayantes.
• Meilleures performances : Les navigateurs peuvent optimiser le rendu des éléments utilisant des propriétés personnalisées enregistrées, ce qui entraîne une amélioration des performances.
• Sécurité de type : Le navigateur valide que la valeur attribuée correspond à la syntaxe déclarée, empêchant les comportements inattendus et facilitant le débogage. Ceci est particulièrement utile dans les grands projets où de nombreux développeurs contribuent à la base de code.
• Valeurs par défaut : Assurer qu'une propriété personnalisée a toujours une valeur valide, même si elle n'est pas explicitement définie, évite les erreurs et améliore la robustesse de votre CSS.

Compatibilité navigateur

Fin 2023, @property bénéficie d'une bonne prise en charge par les navigateurs, mais pas universelle. Elle est prise en charge dans la plupart des navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Cependant, les anciens navigateurs peuvent ne pas la prendre en charge. Vérifiez toujours les informations les plus récentes sur la compatibilité des navigateurs sur des sites comme Can I use... avant d'utiliser @property en production.

Pour gérer les anciens navigateurs, vous pouvez utiliser des requêtes de fonctionnalité (@supports) pour fournir des styles de secours :

@supports (--propriete: valeur) {
  /* Styles utilisant @property */
}

@supports not (--propriete: valeur) {
  /* Styles de secours pour les navigateurs ne supportant pas @property */
}

Remplacez --propriete et valeur par une propriété personnalisée réelle et sa valeur.

Quand utiliser @property

Envisagez d'utiliser @property dans les scénarios suivants :

• Lorsque vous devez animer des propriétés personnalisées : C'est le cas d'utilisation principal de @property. L'enregistrement de la propriété avec la syntaxe correcte permet des animations fluides.
• Lorsque vous souhaitez imposer la sécurité de type pour les propriétés personnalisées : Si vous voulez vous assurer qu'une propriété personnalisée contient toujours une valeur d'un type spécifique, utilisez @property pour l'enregistrer.
• Lorsque vous souhaitez fournir une valeur par défaut pour une propriété personnalisée : Le descripteur valeur-initiale vous permet de spécifier une valeur de secours.
• Dans les grands projets : @property améliore la maintenabilité du code et évite les erreurs, ce qui le rend particulièrement bénéfique pour les grands projets avec de nombreux développeurs.
• Lors de la création de composants réutilisables ou de systèmes de conception : @property peut aider à assurer la cohérence et la prévisibilité dans vos composants.

Erreurs courantes à éviter

• Oublier le descripteur syntaxe : Sans le descripteur syntaxe, le navigateur ne connaîtra pas le type de valeur attendu, et les animations ne fonctionneront pas correctement.
• Utiliser la mauvaise valeur de syntaxe : Choisir la mauvaise syntaxe peut entraîner des comportements inattendus. Assurez-vous de sélectionner la syntaxe qui reflète fidèlement le type de valeur attendu.
• Ne pas fournir de valeur-initiale : Sans valeur initiale, la propriété personnalisée peut être indéfinie, entraînant des erreurs. Fournissez toujours une valeur par défaut raisonnable.
• Abuser de * comme syntaxe : Bien que pratique, l'utilisation de * annule les avantages de la vérification de type et de l'animation. Utilisez-le uniquement lorsque vous avez réellement besoin d'autoriser n'importe quel type de valeur.
• Ignorer la compatibilité navigateur : Vérifiez toujours la compatibilité navigateur et fournissez des styles de secours pour les anciens navigateurs.

@property et CSS Houdini

@property fait partie d'un ensemble plus large d'API appelé CSS Houdini. Houdini permet aux développeurs d'accéder au moteur de rendu du navigateur, leur donnant un contrôle sans précédent sur le processus de style et de mise en page. D'autres API Houdini incluent :

• Paint API : Permet de définir des images de fond et des bordures personnalisées.
• Animation Worklet API : Fournit un moyen de créer des animations haute performance qui s'exécutent directement dans le thread compositeur du navigateur.
• Layout API : Permet de définir des algorithmes de mise en page personnalisés.
• Parser API : Donne accès au parseur CSS du navigateur.

@property est une API Houdini relativement simple à apprendre, mais elle ouvre la porte à l'exploration de fonctionnalités Houdini plus avancées.

Conclusion

@property est une puissante at-rule CSS qui débloque des capacités avancées pour les propriétés personnalisées. En enregistrant les propriétés personnalisées auprès du navigateur, vous pouvez imposer la sécurité de type, permettre des animations fluides et améliorer la robustesse globale de votre code CSS. Bien que la prise en charge par les navigateurs ne soit pas universelle, les avantages de l'utilisation de @property, en particulier dans les grands projets et les systèmes de conception, en font un outil précieux pour le développement web moderne. Adoptez @property et faites passer vos compétences CSS au niveau supérieur !