微信搜索【GreatMovetotheWorld】，第一时间与大家分享前端行业动态、学习路径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。自定义属性自定义属性（也称为CSS变量）的使用量激增，2021年至2022年之间的增长也不例外。43%的页面（包括桌面版和移动版）都在使用自定义属性并且至少有一个var()函数。正如去年所见，WordPress是自定义属性名称最常见的驱动程序，这些很容易通过-wp-*前缀识别。在这些之后，我们再次找到许多颜色名称--white、--blue等，它们指定该颜色的特定阴影。类型自定义属性的值包括类型。例如，--red:#EF2143为--red分配了一个颜色值，而--multiplier:2.5分配了一个数值。与去年相比，这些类型发生了一些变化。我们知道，设置颜色是自定义属性最常见的用途，被查出是颜色类型的页面越来越多。然而，就使用的份额而言，这已经从40%下降到30%。进入这10%的是calc()和作为值类型的图像。.属性虽然包含这些属性的页面数量有所增加，但将自定义属性作为值的属性与去年的顺序大致相同。自定义属性最有可能用于颜色，这并不奇怪，因为创建配色方案是此类功能的明显用途。但是，使用var()函数设置font-size从榜单的第十位上升到第五位，设置justify-content为justify也进入了前十。2021年，5%的移动页面和4%的桌面页面使用自定义属性来设置这种对齐方式，现在已经跃升至20%。查看数据，似乎部分增长是由于WordPress的使用，例如，5%的页面使用-navigation-layout-justify自定义属性。函数我们已经看到calc()作为自定义属性的值类型开始受到关注，它是迄今为止以这种方式使用的最常见的函数。接下来是linear-gradient()和rgba()函数，用于使用alpha通道设置RGB颜色值。在此之后是各种用于转换和动画的功能，显示了自定义属性在该领域的使用越来越多。复杂性可以在其他自定义属性的值中包含自定义属性。考虑这个例子::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，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。交流有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
