@property - Des propriétés CSS typées

Dans l'Égypte antique, les prêtres possédaient un savoir secret de formules magiques qui conféraient aux objets des propriétés extraordinaires. Chaque formule avait un type strictement défini - elle pouvait agir sur des couleurs, des nombres ou des dimensions, et une utilisation incorrecte signifiait que la magie n'opérait pas. La règle @property en CSS fonctionne sur un principe similaire - elle te permet d'enregistrer formellement une propriété CSS personnalisée, en lui attribuant un type, une valeur initiale et des règles d'héritage. Grâce à cela, le navigateur « comprend » la signification de ta variable et peut l'animer.

Le problème des propriétés personnalisées classiques

Les variables CSS classiques (--name: value) sont traitées par le navigateur comme du texte brut. Le navigateur ne sait pas si --my-color est une couleur, un nombre ou autre chose. Conséquence : elles ne peuvent pas être animées en douceur :

1:root {
2  --gradient-start: gold;
3  --gradient-end: purple;
4}
5
6.box {
7  background: linear-gradient(var(--gradient-start), var(--gradient-end));
8  transition: --gradient-start 1s, --gradient-end 1s;
9}
10
11/* Cela NE fonctionnera PAS ! Le navigateur ne sait pas que ce sont des couleurs */
12.box:hover {
13  --gradient-start: crimson;
14  --gradient-end: navy;
15}

Le navigateur voit un changement d'une chaîne de texte à une autre et ne peut pas calculer les valeurs intermédiaires. Au lieu d'une transition fluide, la couleur change instantanément.

La solution : @property

La règle @property enregistre une propriété avec une définition de type complète :

1@property --gradient-start {
2  syntax: "<color>";
3  inherits: false;
4  initial-value: gold;
5}
6
7@property --gradient-end {
8  syntax: "<color>";
9  inherits: false;
10  initial-value: purple;
11}

Maintenant, le navigateur sait que --gradient-start et --gradient-end sont des couleurs. Il peut calculer les valeurs intermédiaires et réaliser une animation fluide !

Syntaxe de @property

Chaque déclaration @property requiert trois descripteurs obligatoires :

1@property --property-name {
2  syntax: "<type>";         /* Quel est le type de la valeur */
3  inherits: true | false;   /* Si les descendants héritent */
4  initial-value: value;     /* Valeur par défaut */
5}

Types disponibles (syntax)

inherits

• true - les descendants héritent de la valeur (comme les propriétés personnalisées classiques)
• false - les descendants n'héritent PAS ; chaque élément utilise initial-value

Animer des dégradés avec @property

C'est l'application la plus spectaculaire de @property - animer des propriétés qui normalement ne peuvent pas l'être :

1@property --hue {
2  syntax: "<number>";
3  inherits: false;
4  initial-value: 45;
5}
6
7.egyptian-glow {
8  --hue: 45;
9  background: linear-gradient(
10    135deg,
11    hsl(var(--hue), 80%, 50%),
12    hsl(calc(var(--hue) + 60), 70%, 40%)
13  );
14  transition: --hue 0.8s ease;
15}
16
17.egyptian-glow:hover {
18  --hue: 200;
19}

Grâce à @property, le navigateur sait que --hue est un nombre et peut passer en douceur de 45 à 200, animant ainsi tout le dégradé !

Animation continue avec @keyframes

1@property --angle {
2  syntax: "<angle>";
3  inherits: false;
4  initial-value: 0deg;
5}
6
7.rotating-border {
8  --angle: 0deg;
9  border: 3px solid transparent;
10  border-image: linear-gradient(
11    var(--angle),
12    #d4af37,
13    #1e3a5f,
14    #d4af37
15  ) 1;
16  animation: rotate-gradient 3s linear infinite;
17}
18
19@keyframes rotate-gradient {
20  to {
21    --angle: 360deg;
22  }
23}

Applications pratiques

1. Couleur d'arrière-plan animée

1@property --bg-color {
2  syntax: "<color>";
3  inherits: false;
4  initial-value: #d4af37;
5}
6
7.pharaoh-card {
8  background: var(--bg-color);
9  transition: --bg-color 0.5s ease;
10}
11
12.pharaoh-card:hover {
13  --bg-color: #1e3a5f;
14}

2. Pourcentage animé

1@property --progress {
2  syntax: "<percentage>";
3  inherits: false;
4  initial-value: 0%;
5}
6
7.pyramid-progress {
8  background: linear-gradient(
9    to right,
10    #d4af37 var(--progress),
11    #e8d7b0 var(--progress)
12  );
13  transition: --progress 1s ease;
14}
15
16.pyramid-progress.complete {
17  --progress: 100%;
18}

3. Dégradé multicolore avec animation

1@property --color-a {
2  syntax: "<color>";
3  inherits: false;
4  initial-value: #d4af37;
5}
6
7@property --color-b {
8  syntax: "<color>";
9  inherits: false;
10  initial-value: #8b6914;
11}
12
13.magic-gradient {
14  background: linear-gradient(135deg, var(--color-a), var(--color-b));
15  transition: --color-a 0.6s ease, --color-b 0.6s ease;
16}
17
18.magic-gradient:hover {
19  --color-a: #1e3a5f;
20  --color-b: #30d5c8;
21}

@property vs propriétés personnalisées classiques

Support des navigateurs

@property est pris en charge depuis Chrome 85 (2020), Edge 85, Safari 15.4 (2022) et Firefox 128 (2024). Tu peux l'utiliser en toute sécurité dans des projets modernes. Pour les navigateurs plus anciens, la propriété se comportera simplement comme une propriété personnalisée classique - sans animation, mais avec la valeur correcte.

1/* Repli - fonctionne toujours */
2.element {
3  --my-color: gold;
4  background: var(--my-color);
5}
6
7/* @property - ajoute la capacité d'animation */
8@property --my-color {
9  syntax: "<color>";
10  inherits: false;
11  initial-value: gold;
12}

@property est comme une formule magique des prêtres égyptiens - elle confère à tes variables CSS un véritable pouvoir, permettant au navigateur de comprendre leur signification et de créer des animations fluides et spectaculaires là où c'était auparavant impossible.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>@property - propriétés CSS typées</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <h1>@property - Les Formules Magiques des Pharaons</h1>
10
11    <section>
12        <h2>Gradient animé (impossible sans @property !)</h2>
13        <div class="gradient-box">Survole-moi</div>
14    </section>
15
16    <section>
17        <h2>Cadre rotatif</h2>
18        <div class="rotating-border">
19            <p>Animation de l'angle du gradient</p>
20        </div>
21    </section>
22
23    <section>
24        <h2>Barre de progression animée</h2>
25        <div class="progress-bar"></div>
26        <p class="hint">L'animation démarre automatiquement</p>
27    </section>
28</body>
29</html>