自定義屬性
自定義屬性(也稱為css變量)的使用量大增,2021年和2022年之間的增長也不例外。43%的頁面,包括桌面和移動端,都在使用自定義屬性,并且至少有一個var()函數。
正如去年所看到的,wordPress/ target=_blank class=infotextkey>WordPress是最常見的自定義屬性名稱的驅動者,這些很容易被-wp-*前綴所識別。繼這些之后,我們再次發現了很多顏色名稱 –-white、–-blue等等,用來指定該顏色的特定色調。
類型
自定義屬性的值包括一個類型。例如,--red: #EF2143 是給 --red 分配一個顏色值,而--multiplier: 2.5是分配一個數字值。從去年開始,這些類型有了一些變化。我們知道,設置顏色是自定義屬性最常見的用途,而且發現顏色類型的頁面數量正在增加。然而,就使用的份額而言,這已經從40%下降到30%。進入這個10%的是calc(),和作為值類型的images。。
屬性
雖然包括這些屬性的頁面數量增加了,但將自定義屬性作為一個值的屬性仍然與去年的順序大致相同。自定義屬性最有可能被用于color,這并不奇怪,因為創建顏色方案是這種功能的一個明顯用途。
然而,使用var()函數來設置 font-size 已經從列表中的第十位升至第五位,而設置justify-content的對齊值也進入了前十位。在2021年,有5%的移動頁面和4%的桌面頁面使用自定義屬性來設置這個對齊值,現在已經躍升到20%。從數據上看,這一增長似乎有一部分是由于WordPress的使用,例如,有5%的頁面使用-navigation-layout-justify自定義屬性。
函數
我們看到calc()已經開始作為自定義屬性的一個值類型而引人注目,而且它是迄今為止最常見的以這種方式使用的函數。緊隨其后的是 linear-gradient() 和用于設置帶有阿爾法通道的RGB顏色值的 rgba() 函數。在這之后是用于過渡和動畫的各種函數,顯示了自定義屬性在這一領域的使用越來越多。
復雜性
在其他自定義屬性的值中包含自定義屬性是可能的。考慮一下這個例子:
: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年看到的,絕大多數自定義屬性的深度為零,這意味著它們的值中不包括其他自定義屬性的值。深度為1的屬性數量有小幅增加,深度為2的數量則有小幅減少。然而,從數據上看,我們對自定義屬性的使用在過去一年中并沒有變得更加復雜。