- [Instructor] Custom properties introduce

- [指導員]自定義屬性介紹

a new level of configuration and customization to CSS

對CSS的配置和定製達到一個新的水準

and being able to hook into

並能掛到

and manipulate these custom properties using JavaScript,

並使用JavaScript操作這些自定義屬性。

opens up a whole new dimension of possibilities.

開闢了一個全新的可能性層面。

In this example, I've used custom properties

在這個例子中，我使用了自定義屬性

to set the color and background color

來設置顏色和背景顏色

of each of the link items.

的每個鏈接項目。

You'll notice here, I'm setting up the color

你會注意到在這裡，我正在設置顏色

to use the custom property color,

來使用自定義屬性的顏色。

and then there's a fallback value, black,

然後有一個備份值，黑色。

if we don't have color defined,

如果我們沒有定義顏色。

and the same thing for background color.

而背景顏色也是如此。

There's a variable or a custom property called BG color

有一個變量或自定義屬性叫做BG顏色

and then a fallback call for transparent

然後再回過頭來調用透明的

if there is no custom property defined.

如果沒有定義自定義屬性。

I'm using these fallbacks because in the main style sheet,

我使用這些回退是因為在主樣式表中。

there is no custom properties to find.

沒有自定義屬性可供查找。

These two colors here,

這裡的這兩種顏色。

the color and background color are never defined.

的顏色和背景顏色從未被定義。

There are some other custom properties

還有一些其他的自定義屬性

defined at the very top.

定義在最上面。

If we go look, we have max width and white space,

如果我們去看，我們有最大的寬度和白色空間。

but there's no color and no BG color.

但沒有顏色，也沒有BG的顏色。

This is one example of how we can use custom properties

這就是我們如何使用自定義屬性的一個例子

to do really advanced styling for individual items

為個別項目做真正的高級造型設計

because although color and BG color are not defined

因為儘管顏色和BG顏色沒有被定義

in the style sheet,

樣式表中。

they are defined in line on one of the elements.

它們被定義在其中一個元素上的行。

You can see it here.

你可以在這裡看到它。

We have the element, then a style attribute,

我們有一個元素，然後是一個樣式屬性。

and then we have color and BG color defined

然後，我們有顏色和BG顏色的定義

and as a result,

而作為結果。

these custom properties kick in for this one element here.

這些自定義屬性在這裡為這一個元素啟動。

So that means we can define

是以，這意味著我們可以定義

how the styling is going to happen in our style sheet

在我們的樣式表中如何進行樣式設計

and then use custom properties only where necessary

然後只在必要時使用自定義屬性

in line in the elements themselves,

在元素本身中排隊。

which is really cool

這真是太酷了

and we can see how this could easily be extended

我們可以看到，這可以很容易地被擴展

using JavaScript by injecting custom property values

通過注入自定義屬性值，使用JavaScript

into elements when needed.

在需要的時候變成元素。

So this begs the obvious question,

是以，這引出了一個明顯的問題。

how do we access custom properties using JavaScript?

我們如何使用JavaScript訪問自定義屬性？

The answer is the same way we've been doing it so far.

答案是與我們迄今為止的做法相同。

So here's an example of how to access

是以，這裡有一個如何訪問的例子

the in line custom properties for that element.

該元素的行內自定義屬性。

We first go grab the element itself,

我們首先去抓住元素本身。

and then we say console.log(listItem), so the element,

然後我們說 console.log(listItem)，所以這個元素。

style, and then use getPropertyValue

樣式，然後使用getPropertyValue

and call for the property value.

並調用該屬性值。

Run this in the browser and you see in the console,

在瀏覽器中運行這個，你在控制檯中看到。

we have the value for that property.

我們有該屬性的值。

And this is the value of the custom property

而這是自定義屬性的值

defined in line.

行中定義。

We can go back and look at it.

我們可以回去看看。

It's this value right here.

就是這個價值，就在這裡。

You'll also notice I'm using get property value here

你還會注意到我在這裡使用了獲取屬性值的方法

because the custom property name starts with two dashes

因為自定義屬性名稱以兩個破折號開頭

and as we've now learned,

而且正如我們現在所瞭解的那樣。

two dashes as a JavaScript property name does not work.

用兩個破折號作為JavaScript屬性名是行不通的。

If we try to say listItemstyle.--color,

如果我們試圖說listItemstyle.--color.Collaboration.Collaboration.Collaboration.Collaboration.Chile

it simply wouldn't work.

它根本不會起作用。

It would be a syntax error,

這將是一個語法錯誤。

so here we have to use get property value.

所以在這裡我們必須使用獲取屬性值。

It also means we can't do some of this traversing

這也意味著我們不能做一些穿越的工作

that we've been doing previously

我們之前一直在做的

because the custom properties are just different.

因為自定義屬性只是不同。

So that's in line styles and it makes sense.

是以，這是符合風格的，是有意義的。

What about style sheets?

樣式表呢？

You'll remember in my style sheet,

你會記得在我的樣式表裡。

I've defined some custom properties here at the very top.

我在最上面定義了一些自定義屬性。

So this is the first rule.

所以這是第一條規則。

That means if I go and say document.styleSheets[0],

這意味著如果我去說document.styleSheets[0]。

I get the first style sheet.

我得到了第一個樣式表。

Then I can go in and grab the CSS rules

然後我可以進去抓取CSS規則

on the first element from that.

的第一個元素上。

So I'll say console.log(styleSheet).

所以我會說 console.log(styleSheet)。

That gives me the current style sheet

這給了我當前的樣式表

and then I'll say cssRules.

然後我就說cssRules。

And here I want the first rule

而在這裡，我希望第一條規則

so that has index number zero.

所以它的索引號為零。

And then I want to know about the custom properties.

然後我想知道自定義屬性的情況。

So here I have max width and white space.

是以，在這裡我有最大的寬度和白色空間。

So let's say style.getPropertyValue and --max=width.

所以我們說style.getPropertyValue和--max=width。

Save, back in the browser, 70 VW.

保存，回到瀏覽器中，70輛大眾汽車。

And that's really all there is to it.

而這真的是所有的事情了。

Custom properties behave exactly the same way

自定義屬性的行為方式完全相同

as any other CSS property.

就像任何其他的CSS屬性一樣。

The only thing you need to keep in mind is that

你需要牢記的唯一一點是

there are no JavaScript defined property names for these.

沒有JavaScript定義的這些屬性名稱。

So these camel case property names,

是以，這些駱駝字母大小寫的屬性名稱。

because the custom properties always start with dash dash.

因為自定義屬性總是以破折號開始。

So here you have to use getPropertyValue

所以這裡你必須使用getPropertyValue

to get at the property value.

來獲取屬性值。

(upbeat electronic music)

(歡快的電子音樂)