Discussion :

[sentinel66]

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 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}
}

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 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>

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 !

[mathieu]

je crois que la syntaxe avec "& .red ..." n'est pas du css mais est utilisée avec un préprocesseur comme scss ou less.
est ce que c'est bien cela que vous utilisez ?

[sentinel66]

J'ai compris: les enfants héritent de la valeur de la propriété définie sur le parent (ou ancêtre), mais vu que celle-ci n'a pas été défini sur les enfants eux-mêmes la valeur est figée et non mise à jour quand la custom property change.
Bon, pas vraiment intuitif, ou plus c'est une logique, mais pas la seule à laquelle on aurait pu s'attendre.

Pour les gens dans ma position, le plus simple est de bien séléctionner les éléments concernés par les changements de la propriété.
Comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
body, body>nav, header {
  --font-weight: normal;
  --font-size: 1rem;
  --font-family: Roboto;
  --line-height: 1;
  --font: var(--font-weight) var(--font-size)/var(--line-height) var(--font-family);
  font: var(--font);
}

Puis changer des composantes de font dans les éléments couverts par les sélécteurs.
--