28111 sujets

CSS et mise en forme, CSS3

[Résolu] Custom properties et cascade

Bonjour,
Je suis à la recherche d'une explication afin de comprendre la modification que j'ai faite pour que cela fonctionne. Je pensais qu'une variable css déclarée au niveau de ::root était utilisable partout.
Mon code simplifié :

<body id="top" class="grid-body" >
<div class="blockgroup content-width">



:root {
--max-width-content: 650px;
}
.content-width {
	max-width: var(--max-width-content);	
	margin-left: auto;
	margin-right: auto;	
}

Ce qui ne fonctionne pas :

.grid-body.mode-article {
--max-width-content: 850px;
}

ou

.mode-article {
--max-width-content: 850px;
}

Par contre cela fonctionne si au lieu de : root je fais

.grid-body {
--max-width-content: 650px;
}

Modifié par cpalo (07 Dec 2021 - 06:17)
Modérateur
Salut,

Qu'est-ce qui "ne marche pas" ?

Et je ne comprends pas le lien entre --max-width-main et --max-width-content... si tu ne lis que var(--max-width-content); alors que tu modifies --max-width-main normal que ca ne change pas

Sinon root c'est avec un seul : si tu en mets deux ce sont des pseudo éléments comme ::before par exemple ca le perturbe peut être :
:root {
--max-width-content: 650px;
}


Bonne nuit
Bonjour,
J'ai corrigé les erreurs de frappe pour que ma question soit plus compréhensible.
Ce qui ne marche pas c'est quand je fais:

<body id="top" class="grid-body mode-article" >

Modifié par cpalo (07 Dec 2021 - 06:19)
Modérateur
Salut,

Ca marche très bien. Exemple avec des couleurs pour que le test soit plus visuel mais ca marche aussi avec les max-width : https://jsfiddle.net/d6rf79tb/

C'est pour ca que je te demande ce qui "ne marche pas" selon toi.
Tu attends quoi comme résultat ?
Effectivement cela fonctionne.. j'ai testé en rajoutant aux couleurs des largeurs.
En fait ce qui ne marche pas, c'est avec mon code "plus complet'

--max-width-main: 650px;
--max-width-content: calc(var(--max-width-main) * 1.5);

ou

--max-width-main: 650px;
--max-width-content: var(--max-width-main) ;



.mode-article {
--max-width-main: 800px;
}

Et dans ce cas la nouvelle valeur avec .mode-article n'est pas prise en compte dans --max-width-content
Modérateur
Ok on arrive (enfin) au nerf de la guerre Smiley lol

Ton soucis c'est la var dans la var. C'est une histoire de scope de variable. Ce n'est pas pareil d'écrire :
:root {
  --max-width-main: 50px;
  --max-width-content: calc(var(--max-width-main) * 2);
}
.wrapper {
  --max-width-main: 200px;
}
.content {
	max-width: var(--max-width-content);
}

et
:root {
  --max-width-main: 50px;
}
.wrapper {
  --max-width-main: 200px;
}
.content {
	max-width: calc(var(--max-width-main) * 2);
}


Dans le premier exemple, dans .content, --max-width-content renvoie à la variable dans root, et dans root --max-width-content est égal à calc(var(--max-width-main) * 2) mais avec le --max-width-main: 50px; (et oui on est dans root maintenant, pas dans .content).

Dans le second exemple j'ai déplacé le calc dans le .content donc l'appel à --max-width-main se fait dans le scope du .wrapper et on peut profiter de la nouvelle valeur.
Meilleure solution
Je remets au propre mon code en tenant compte de ton apport... et je fais un retour.
Encore merci. C'est bien pris en compte.
Je vais bien vérifier mes containers imbriqués pour corriger cela.
Cordialement
Sujet clos
Aller à