关于前端:2022-最受欢迎的-CSS-变量属性函数以及颜色分别是什么

9次阅读

共计 1438 个字符，预计需要花费 4 分钟才能阅读完成。

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

自定义属性（也称为 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 */
}

正如例子中的正文所显示的，这些子援用被链在一起的越多，自定义属性的深度就越大。

正如在 2021 年看到的，绝大多数自定义属性的深度为零，这意味着它们的值中不包含其余自定义属性的值。深度为 1 的属性数量有小幅减少，深度为 2 的数量则有小幅缩小。然而，从数据上看，咱们对自定义属性的应用在过来一年中并没有变得更加简单。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。