Name: 關閉自定義道具的繼承比我想象的更有用 (Turning off inheritance on custom props is more useful than I'd thought)
Uploaded: 2024-09-04T14:49:23.000Z
Duration: 3 min 51 s

程度副詞

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.

請注意，外欄變成了兩欄，但內欄沒有變化。

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

這是因為父代的調用次數是 2，而自定義屬性總是繼承的。

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.

是以，2 的調用次數會傳遞到另一個容器中，這是我不希望發生的。不過幸運的是，現在我們可以註冊自定義屬性，而且所有瀏覽器都可以使用。

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

瀏覽器支持率略低於 90%，但所有瀏覽器都支持。

是以，我們可以說是應用程序屬性。

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 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.

默認為 true，但我們可以切換為 false。這裡的文法是最棘手的部分，我可以查一個列表，看看你想用什麼文法。

在這種情況下，它是一個簡單的好辦法。

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.

我還將鏈接到 Stephanie Eccles 撰寫的一篇文章，其中詳細介紹了使用註冊自定義屬性的許多非常好的用例。

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.

現在，如果我的操作正確，並且使用了正確的名稱，那麼我就註冊了我的屬性 call count，我說它是一個初始值為 1 的數字，並且繼承了 false。

現在，如果成功了，那就是成功了。

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.

事實上，無論我們怎麼做都沒用。

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.

實際上，我已經想到了一大堆好的使用案例，我現在就可以用它，所以我非常興奮。在此，我要感謝我的好幫手安德魯、菲利普、西蒙和蒂姆，以及我所有的贊助人和我所有的新頻道成員。

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.

當然，在下次見面之前，別忘了讓你的網絡角落變得更棒一點。