Le gros gotcha avec des propriétés personnalisées

Récemment, j'ai constaté que beaucoup de gens (y compris moi-même) sont confus par cette fonctionnalité des attributs personnalisés CSS, j'ai donc décidé de l'enregistrer.

Ajoutons quelques propriétés personnalisées dans CSS:

 html {
  --Color-1: rouge;
  --Color-2: bleu;
}

Nous les utilisons immédiatement pour créer un dégradé de fond:

 html {
  --Color-1: rouge;
  --Color-2: bleu;

  --BG: Linear-Gradient (à droite, var (- Color-1), var (- Color-2));
}

Supposons maintenant qu'il y a deux divs sur la page:

<div></div>
<div></div>

Stytchons-les:

 div {
  Contexte: var (- bg);
}

Cela fonctionne complètement! merveilleux!

Modifions maintenant le style. Je ne veux pas qu'il passe du rouge au bleu, je veux qu'il passe du vert au bleu. C'est très simple, j'ai mis à jour le rouge au vert:

 html {
  --Color-1: rouge;
  --Color-2: bleu;

  --BG: Linear-Gradient (à droite, var (- Color-1), var (- Color-2));
}
div {
  Contexte: var (- bg);
}
.Variation {
  --Color-1: vert;
}

invalide! (Les sirènes sont bruyantes, les cornes sont bruyantes et les animaux domestiques se cachent partout).

Amis, cela ne fonctionne pas.

Pour autant que je comprenne, le problème est que --bg n'a jamais été déclaré sur aucune div. Il peut utiliser --bg car il est déclaré à un niveau supérieur, mais lorsqu'il est utilisé, sa valeur a été verrouillée. Ce n'est pas parce que vous avez changé les autres attributs utilisés lorsque --bg ne signifie pas que l'attribut recherchera tous les emplacements où il est utilisé comme dépendance et mettra à jour tout ce qui l'utilise.

Hélas, cette explication ne semble pas bien. Mais c'est la meilleure explication à laquelle je peux penser.

Solution? Eh bien, il y en a quelques-uns.

Solution 1: Limitez la portée variable à l'endroit où il est utilisé.

Vous pouvez faire ceci:

 html {
  --Color-1: rouge;
  --Color-2: bleu;
}

div {
  --BG: Linear-Gradient (à droite, var (- Color-1), var (- Color-2));
  Contexte: var (- bg);
}
.Variation {
  --Color-1: vert;
}

Maintenant --bg est déclaré sur les deux divs et les modifications des dépendances --color-1 fonctionnent.

Solution 2: Définissez les sélecteurs pour la plupart des variables avec des virgules séparées.

Supposons que vous ayez fait les opérations communes de la définition d'un tas de variables dans :root . Ensuite, vous rencontrez ce problème. Vous pouvez simplement ajouter des sélecteurs supplémentaires à la déclaration principale pour vous assurer que vous appuyez sur la bonne plage.

 html,
div {
  --Color-1: rouge;
  --Color-2: bleu;

  --BG: Linear-Gradient (à droite, var (- Color-1), var (- Color-2));
}
div {
  Contexte: var (- bg);
}
.Variation {
  --Color-1: vert;
}

Dans d'autres exemples qui peuvent ne pas être trop farfelus, cela pourrait ressembler à ceci:

 :racine, 
.bouton,
. tout ce qui est-est-bandaid {
  --padding-inline: 1rem;
  --Padding-Block: 1rem;
  --padding: var (- padding-block) var (- padding-inline);
}

.bouton {
  rembourrage: var (- rembourrage);
}
.Button.less-wide {
  --padding-inline: 0,5rem;
}

Solution 3: mode complet

Allez dans ses variables partout.

 * {
  - Access: Moi;
  - partout: vous;
  --Want: à;

  --hogwild: var (- access) var (- partout);
}

Ce n'est pas une bonne solution. J'ai récemment entendu un chat où l'un des sites de taille moyenne a été retardé de 500 ms en raison du rendu de la page, car chaque tirage de la page nécessite que tous les attributs soient calculés. Cela "fonctionne", mais c'est l'un des rares exemples où vous pouvez provoquer des problèmes de performances légitimes par le biais de sélecteurs.

Solution 4: introduire de nouvelles propriétés «par défaut» et se replient

Tout le crédit ici est crédité à Stephen Shaw, que j'ai vu d'abord dans son exploration de tout ce contenu.

Revenons à l'endroit où nous avons démontré cette question pour la première fois:

 html {
  --Color-1: rouge;
  --Color-2: bleu;

  --BG: Linear-Gradient (à droite, var (- Color-1), var (- Color-2));
}

Ce que nous devons faire, c'est nous donner deux choses:

1. Une façon de couvrir l'ensemble de l'arrière-plan
2. Une façon de couvrir une partie d'un fond dégradé

Nous devons donc faire ceci:

 html {
  --Color-1: rouge;
  --Color-2: bleu;
}
div {
  --BG-Default: Linear-Gradient (à droite, var (- Color-1), var (- Color-2));
  Contexte: var (- bg, var (- bg-default));
}

Notez que nous ne déclarons pas du tout --bg du tout. Il est juste là en attendant une valeur, et s'il obtient une valeur, c'est la valeur de "gagner". Mais sinon, il retombera à notre --bg-default . Maintenant……

1. Si je définis --color-1 ou --color-2 , il remplace cette partie du gradient comme prévu (tant que je le fais sur un sélecteur qui touche l'un des divs).
2. Alternativement, je peux définir --bg pour réinitialiser l'ensemble de l'arrière-plan à ce que je veux.

Cela ressemble à un bon moyen de y faire face.

Parfois, il y a en effet une erreur dans les propriétés personnalisées CSS. Mais ce n'est pas l'un d'eux. Même si c'est un peu comme un bug pour moi, ce n'est évidemment pas. Juste une de ces choses que vous devez savoir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!