28172 sujets

CSS et mise en forme, CSS3

[Résolu] Valeur initiale (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:
@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
<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 Smiley cligne
Modérateur
Bonjour,

la valeur à utilisé est initial et il faut redefinir aussi la regle.
@property --logo-color {
  syntax: "<color>";
  inherits: true;
  initial-value: red;
}
.green {
	--logo-color: green;
	color: var(--logo-color);
}
.red {
  --logo-color:initial;/* un reset */
color:var(--logo-color); /* on applique  la regle à nouveau si herité*/
}

ou sans heritage :
@property --logo-color {
  syntax: "<color>";
  inherits: false;/* pas d'heritage */
  initial-value: red;
}
.green {
	--logo-color: green;
	color: var(--logo-color);
}
.red {
color:var(--logo-color);/* au lieu de la couleur par défaut */
}


Firefox est dans les choux pour le moment , plutôt vérifier dans chrome par exemple.

cdt
Modifié par gcyrillus (01 Dec 2023 - 14:03)
Merci.
L'intérêt d'une custom property est qu'en changeant sa valeur, toutes les propriétés en dépendant sont mises à jour: je les utilise comme ça à plusieurs endroits. Mais là ça ne marche pas ? Pourquoi ? On dirait que la valeur dont hérite color n'est pas "var(--logo-color)" mais "red", ce qui n'est ni intuitif ni utile !
Modifié par evanescente-ondine (01 Dec 2023 - 14:41)
Modérateur
evanescente-ondine a écrit :
Merci.
L'intérêt d'une custom property est qu'en changeant sa valeur, toutes les propriétés en dépendant sont mises à jour: je les utilise comme ça à plusieurs endroits. Mais là ça ne marche pas ? Pourquoi ? On dirait que la valeur dont hérite color n'est pas "var(--logo-color)" mais "red", ce qui n'est ni intuitif ni utile !


Oula, je sens de la confusion (inherits à false ou true est plutôt intuitif pour moi):
A * Il y a inherits dans la propriété (la propriéte est réappliqué aux enfants)
B * color est aussi une propriété héritable , si pas redéfinie, elles prend celle du parent le plus proche ou elle est déclarée la dernière fois, sinon , la valeur par défaut utilisée par le navigateur.


je t'ai présente deux bloc de CSS fonctionnel en rapport direct avec ta structure de test.

un UL recevant la class .green et un enfant avec la class .red

une propriété définie pour color reglée sur red.
Dans l'un des bloc en exemple , cette propriété est héritable, donc réappliquée aux enfants. Il te faut donc bien la réinitialisé à sa valeur déclaré si tu veut retrouvé du rouge déjà modifié à partir de la class green ,et en rappelant cette variable réinitialisé dans ton selecteur .red.
Dans l'autre bloc, elle n'est pas héritable, donc appliqué uniquement à l’élément et la valeur de propriété reste celle d'origine pour les autres, il suffit juste de la faire appliqué sans devoir la réinitialisé.

Je te joins un codepen pour tester avec le navigateur Chrome avec un ul et un ol côte à côte : https://codepen.io/gc-nomade/pen/QWYZZgq survol le ol pour réinitialisé la valeur de propriété modifiée par la class .green du parent.

cdt
Modifié par gcyrillus (01 Dec 2023 - 15:52)
Meilleure solution
Ah, j'ai compris. Finalement ce n'est pas si utile pour le cas d'usage présent. 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. Le plus simple est de couvrir les éléments concernés par les changements avec les bon sélécteurs. Dans mon cas:

body, address, 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électeurs, et l'héritage fera son travail sur leur enfants.
Modifié par evanescente-ondine (01 Dec 2023 - 18:42)
Prévenir un modérateur
Répondre au sujet
Aller à