The Large Gotcha With Customized Properties

No Comments

I’ve seen this confuse greater than a handful of individuals just lately, together with myself, so I’m ensuring it’s written down.

Let’s chuck a few customized properties into CSS:

html {
–color-1: crimson;
–color-2: blue;
}

Let’s use them straight away to make a background gradient:

html {
–color-1: crimson;
–color-2: blue;

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

Now say there’s a few divs sitting on the web page:

<div></div>
<div class=”variation”></div>

Lemme model them up:

div {
background: var(–bg);
}

That absolutely works! Hell sure!

Now lemme model that variation. I don’t need it to go from crimson to blue, I need it to go from inexperienced to blue. Simple tacky, I’ll replace crimson to inexperienced:

html {
–color-1: crimson;
–color-2: blue;

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

Nope! (Sirens blaring, horns honking, livestock taking cowl).

That doesn’t work, pals.

The issue, as greatest I perceive it, is that –bg was by no means declared on both of the divs. It may possibly use –bg, as a result of it was declared increased up, however by the point it’s getting used there, the worth of it’s locked. Simply since you change another property that –bg occurs to make use of on the time it was declared, it doesn’t imply that property goes out trying to find locations it was used and updating all the pieces that’s used it as a dependency.

Ugh, that rationalization doesn’t really feel fairly proper. Nevertheless it’s the perfect I acquired.

The answer? Nicely, there are a couple of.

Resolution 1: Scope the variable to the place you’re utilizing it.

You could possibly do that:

html {
–color-1: crimson;
–color-2: blue;
}

div {
–bg: linear-gradient(to proper, var(–color-1), var(–color-2));
background: var(–bg);
}
.variant {
–color-1: inexperienced;
}

Now that –bg is asserted on each divs, the change to the –color-1 dependency does work.

Resolution 2: Comma-separate the selector the place you set many of the variables.

Say you do the widespread factor the place you set a bunch of variables on the :root. Then you definately run into this drawback. You possibly can simply add further selectors to that foremost declaration to ensure you hit the precise scope.

html,
div {
–color-1: crimson;
–color-2: blue;

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

In another maybe less-contrived instance, it would look one thing 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;
}

Resolution 3: Blanket Mode

Screw it — put the variables all over the place.

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

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

This isn’t a superb plan. I overheard a chat just lately by which a medium-sized web site skilled a 500ms web page rendering delay as a result of each draw to the web page wanted to compute all of the properties. It “works” nevertheless it’s one of many uncommon instances the place you possibly can trigger legit efficiency issues with a selector.

Resolution 4: Introduce a brand new “default” property and fallback

All credit score right here to Stephen Shaw who’s exploration on all this is without doubt one of the locations I noticed this confusion within the first place.

Let’s return to our first demonstration of this drawback:

html {
–color-1: crimson;
–color-2: blue;

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

What we wish to do is give ourselves two issues:

A technique to override the total backgroundA technique to overide a half of the gradient background

So we’re gonna do it this manner:

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

Discover that we haven’t declared –bg in any respect. It’s simply sitting there ready for a price, and if it ever will get one, that’s the worth that “wins.” However with out one, it’ll fall again to our –bg-default. Now…

If I set –color-1 or –color-2, it replaces that a part of the gradient as anticipated (as long as I do it on a selector that touches one of many divs).Or, I can set –bg to reset your complete background to no matter I need.

Seems like a pleasant technique to deal with issues.

CodePen Embed Fallback

Typically there are precise bugs with CSS customized properties. This isn’t one in all them. Although it type of feels like a bug to me, apparently it’s not. Simply a type of belongings you gotta learn about.

The put up The Large Gotcha With Customized Properties appeared first on CSS-Tips. You possibly can help CSS-Tips by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment