Valeur par défault et héritage des custom properties
Bonjour,
J'essaie de comprendre comment marchent les custom properties, et j'ai l'impression de ne m'être trompé quelque part. Je souhaite utiliser les nouvelles variables CSS à leur plein potentiel, c'est à dire comme de véritables propriétés personnalisée. J'essaie de tirer partie de leur héritage et valeur initiale en particulier.
Disons que j'ai:
Code:
1
2
3
4
5
6
7
8
9
10
| @property --logo-color {
syntax: "<color>";
inherits: true;
initial-value: red;
}
.green {
--logo-color: green;
color: var(--logo-color);
& .red {--logo-color: unset}
} |
Je sais que "color:initial" n'est pas du tout ce que j'attends, parce que la valeur par défaut de la propriété vient de la feuille de style par défaut du navigateur, dont personne n'a rien à f$$$$.
Mais je pensais que définir "--logo-color: initial" aurait l'effet de retourner à la valeur initiale faisant partie de la définition. Sans quoi, je n'y verrais aucun intérêt !
Et bien avec ce code plus haut, et disons
Code:
1
2
3
4
5
6
| <ul class="green">
<li><p>green</p></li>
<li><p>green</p>
<p class="red">red</p>
</li>
</ul> |
Rien ne se passe, tout reste vert.
Peu importe à quelle valeur je redéfinis la variable le changement n'opère pas, même si le developper tool prend bien note de la nouvelle valeur. Aucun changement quant à "color".
Est-ce un bug ? Firefox et chromium ont le même comportement pourtant.
Merci de votre aide !
