I was doing something else, preparing for another video, and I came across something that gave me a really good reason to register a custom property to prevent inheritance.

I want to show you what that was because I think it's one of the things with registered custom properties that goes under the radar. So you'll see here I have a container type set on a whole bunch of different things.

And these things here that we see on the side are living inside of containers.

And what they're doing is they're using this grid columns that's right here.

And then you can see I have when containers are different widths.

I can switch when there's gonna be columns.

But I also can say if we have two columns or three columns. And so here, my main layout with the image and this other thing should switch to two columns.

And then this other area that's lower down here should switch over to three columns if there's enough room for it, but it's broken.

Because when it gets bigger, all of a sudden it goes to two columns and this area here also goes to two columns.

But this should either be zero or three columns, or I guess one or three columns. So to help you understand what's actually happening there, because it took me a second to understand what was actually going on, is we're gonna change the outline that's on these elements when they get to the two column world here.

So it should either be three columns or then it can switch over to the dotted one when we get to two.

And notice how the outside one went to two columns, but the inside one didn't change.

So why is that becoming two columns?

And it's because the parent is getting this call count of two, and custom properties are always inherited.

So that call count of two is being passed down into this other container, which I don't want to happen. But luckily now we can register custom properties, and this is in all browsers now.

Browser support's just below 90%, but it is in all of the browsers.

So we can say app property.

And the app property, we wanna do three different things here.

We can have a syntax, which we'll talk about in a second.

We have an initial value, which is just whatever the default value is.

So in this case, it would be one for one column.

And then we also have an inherits.

And by default, that is true, but we can switch that over to false. The syntax here is sort of the trickiest part, and I would just look up a list for what you might wanna put for your syntax.

In this case, it's a nice, simple one.

We can do a number.

You have color, you have length, you have percentage.

There's a whole bunch of stuff you can actually put in there.

I'm also gonna link to an article by Stephanie Eccles that breaks down a lot of really good use cases for using registered custom properties.

It's over on moderncss.dev.

It's linked in the description.

Really, really good article.

Strongly recommend that you give it a read if you wanna know more about registering custom properties and some of the use cases you might have for them. Now, one thing I haven't done here is said what property this is actually on.

So to name it, I just come here, and that was my call count, I think is what I called it.

So now, if I did that correctly, and I'm using the right name there, so I'm registering my property call count, and I'm saying it's a number with an initial value of one and inherits a false.

And now, if that worked, it did.

Look at that.

We get to here.

This one gets the two columns, but that two columns doesn't get passed down over to this guy right here.

And then when we shrink that back down, it goes like that.

And what we're actually gonna do, let's just change my widths here to be a bit smaller.

Actually, that's not gonna work no matter what we do.

Oh, there we go.

We eventually get up to the three right there just to show that it can kick in in the right spot once those get wide enough as well. But now we have the two of them working independently from one another, not causing any issues with each other, which is just really good.

And this actually, I've thought of a whole bunch of good use cases that I can use this for now, so I'm pretty excited about it. And with that, I would like to thank my enablers of awesome, Andrew, Philip, Simon, and Tim, as well as all of my patrons and all my new channel members.

And there's some new patrons too.

Thank you all so very much for signing up.

And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.