2022 最受欢迎的 CSS 变量、属性、函数以及颜色分别是什么

自订特性

自订特性（也称作CSS表达式）的采用量减少，2021年和2022年间的快速增长也不值得一提。43%的网页，主要包括图形界面和终端端，都在采用自订特性，因此最少有两个var()表达式。

正像今年所看见的，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 */ }

正像例子中的注释所显示的，那些子引用被链在一起的越多，自订特性的深度就越大。