The Big Gotcha With Custom Properties

Recently I found that many people (including myself) are confused by this feature of CSS custom attributes, so I decided to record it.

Let's add a few custom properties in CSS:

html {
  --color-1: red;
  --color-2: blue;
}

We use them immediately to create a background gradient:

html {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}

Now suppose there are two divs on the page:

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

Let's style them:

div {
  background: var(--bg);
}

This works completely! marvelous!

Now let's modify the style. I don't want it to change from red to blue, I want it to change from green to blue. It's very simple, I updated the red to green:

html {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}
div {
  background: var(--bg);
}
.variation {
  --color-1: green;
}

invalid! (The sirens are loud, the horns are loud, and domestic animals are hiding everywhere).

Friends, this doesn't work.

As far as I understand, the problem is that --bg has never been declared on any div. It can use --bg because it is declared at a higher level, but when it is used, its value has been locked. Just because you changed the other attributes used when --bg declaration does not mean that the attribute will look for all the locations where it is used as a dependency and update everything that uses it.

Alas, this explanation doesn't feel right. But this is the best explanation I can think of.

Solution? Well, there are a few.

Solution 1: Limit the variable scope to where it is used.

You can do this:

html {
  --color-1: red;
  --color-2: blue;
}

div {
  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
  background: var(--bg);
}
.variation {
  --color-1: green;
}

Now --bg is declared on both divs, and changes to --color-1 dependencies do work.

Solution 2: Set selectors for most variables with comma separated.

Suppose you did the common operations of setting a bunch of variables in :root . Then you run into this problem. You can simply add extra selectors to the main declaration to make sure you hit the correct range.

html,
div {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}
div {
  background: var(--bg);
}
.variation {
  --color-1: green;
}

In some other examples that may not be too far-fetched, it might look like this:

:root,
.button,
.whatever-it-is-a-bandaid {
  --padding-inline: 1rem;
  --padding-block: 1rem;
  --padding: var(--padding-block) var(--padding-inline);
}

.button {
  padding: var(--padding);
}
.button.less-wide {
  --padding-inline: 0.5rem;
}

Solution 3: Comprehensive Mode

Go to his - put variables everywhere.

* {
  --access: me;
  --whereever: you;
  --want: to;

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

This is not a good solution. I've heard a chat recently where one of the medium-sized sites was delayed by 500ms due to page rendering, because every draw of the page requires all attributes to be calculated. It "works", but this is one of the few examples where you can cause legitimate performance issues through selectors.

Solution 4: Introduce new "default" properties and fallback

All the credit here is credited to Stephen Shaw, who I saw first in his exploration of all of this content.

Let's go back to where we first demonstrated this question:

html {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}

What we have to do is give ourselves two things:

1. A way to cover the entire background
2. A way to cover part of a gradient background

So we have to do this:

html {
  --color-1: red;
  --color-2: blue;
}
div {
  --bg-default: linear-gradient(to right, var(--color-1), var(--color-2));
  background: var(--bg, var(--bg-default));
}

Note that we do not declare --bg at all. It just sits there waiting for a value, and if it gets a value, it is the value of "winning". But if not, it will fall back to our --bg-default . Now……

1. If I set --color-1 or --color-2 , it replaces that part of the gradient as expected (as long as I do this on a selector that touches one of the divs).
2. Alternatively, I can set --bg to reset the entire background to whatever I want.

It feels like a good way to deal with it.

Sometimes there is indeed an error in CSS custom properties. But that's not one of them. Even if it's a bit like a bug to me, obviously it's not. Just one of those things you have to know.

The above is the detailed content of The Big Gotcha With Custom Properties. For more information, please follow other related articles on the PHP Chinese website!