自定義屬性

自定義屬性（也稱為CSS變量）的使用量大增，2021年和2022年之間的增長(zhǎng)也不例外。43%的頁(yè)面，包括桌面和移動(dòng)端，都在使用自定義屬性，并且至少有一個(gè)var()函數(shù)。

正如去年所看到的，WordPress是最常見(jiàn)的自定義屬性名稱的驅(qū)動(dòng)者，這些很容易被-wp-*前綴所識(shí)別。繼這些之后，我們?cè)俅伟l(fā)現(xiàn)了很多顏色名稱 –-white、–-blue等等，用來(lái)指定該顏色的特定色調(diào)。

類型?

自定義屬性的值包括一個(gè)類型。例如，--red: #EF2143 是給 --red 分配一個(gè)顏色值，而--multiplier: 2.5是分配一個(gè)數(shù)字值。從去年開始，這些類型有了一些變化。我們知道，設(shè)置顏色是自定義屬性最常見(jiàn)的用途，而且發(fā)現(xiàn)顏色類型的頁(yè)面數(shù)量正在增加。然而，就使用的份額而言，這已經(jīng)從40%下降到30%。進(jìn)入這個(gè)10%的是calc()，和作為值類型的images。。

屬性?

雖然包括這些屬性的頁(yè)面數(shù)量增加了，但將自定義屬性作為一個(gè)值的屬性仍然與去年的順序大致相同。自定義屬性最有可能被用于color，這并不奇怪，因?yàn)閯?chuàng)建顏色方案是這種功能的一個(gè)明顯用途。

然而，使用var()函數(shù)來(lái)設(shè)置 font-size 已經(jīng)從列表中的第十位升至第五位，而設(shè)置justify-content的對(duì)齊值也進(jìn)入了前十位。在2021年，有5%的移動(dòng)頁(yè)面和4%的桌面頁(yè)面使用自定義屬性來(lái)設(shè)置這個(gè)對(duì)齊值，現(xiàn)在已經(jīng)躍升到20%。從數(shù)據(jù)上看，這一增長(zhǎng)似乎有一部分是由于WordPress的使用，例如，有5%的頁(yè)面使用-navigation-layout-justify自定義屬性。

函數(shù)

我們看到calc()已經(jīng)開始作為自定義屬性的一個(gè)值類型而引人注目，而且它是迄今為止最常見(jiàn)的以這種方式使用的函數(shù)。緊隨其后的是 linear-gradient() 和用于設(shè)置帶有阿爾法通道的RGB顏色值的 rgba() 函數(shù)。在這之后是用于過(guò)渡和動(dòng)畫的各種函數(shù)，顯示了自定義屬性在這一領(lǐng)域的使用越來(lái)越多。

復(fù)雜性

在其他自定義屬性的值中包含自定義屬性是可能的?？紤]一下這個(gè)例子:

:root {
  --base-hue: 335; /* depth = 0 */
  --base-color: hsl(var(--base-hue) 90% 50%); /* depth = 1 */
  --background: linear-gradient(var(--base-color), black); /* depth = 2 */
}

正如例子中的注釋所顯示的，這些子引用被鏈在一起的越多，自定義屬性的深度就越大。

正如在2021年看到的，絕大多數(shù)自定義屬性的深度為零，這意味著它們的值中不包括其他自定義屬性的值。深度為??1???的屬性數(shù)量有小幅增加，深度為??2??的數(shù)量則有小幅減少。然而，從數(shù)據(jù)上看，我們對(duì)自定義屬性的使用在過(guò)去一年中并沒(méi)有變得更加復(fù)雜。