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:
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$$$$.
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
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} }
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
Rien ne se passe, tout reste vert.
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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>
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 !
Partager