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

开发 前端
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 */
}

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

图片

正如在2021年看到的,绝大多数自定义属性的深度为零,这意味着它们的值中不包括其他自定义属性的值。深度为​​1​​​的属性数量有小幅增加,深度为​​2​​的数量则有小幅减少。然而,从数据上看,我们对自定义属性的使用在过去一年中并没有变得更加复杂。

责任编辑:华轩 来源: JavaScript 每日一练
相关推荐

2022-10-19 12:00:32

CSS 伪类伪元素

2023-01-09 17:10:54

2013-04-11 09:44:35

CSSGithub

2023-01-07 12:23:58

JavaScriptNode.js模块

2021-08-16 11:58:15

CSS颜色属性前端

2021-02-20 18:02:02

多云部署云服务Azure

2013-07-22 15:38:08

Java大师底层

2023-09-19 15:04:02

Github开源

2016-02-02 10:56:50

2019-02-19 15:13:27

JavaGitHub

2010-02-06 15:41:08

ibmdwJava

2011-06-21 09:22:39

网站

2010-02-24 15:27:17

ibmdw

2010-08-02 16:48:10

职场

2015-09-08 09:58:32

Docker Hub镜像仓库最受欢迎

2023-06-06 10:07:21

CIO数据技能

2014-05-30 10:11:33

Linux 命令

2021-10-27 10:12:54

DockerContainerdRunC

2010-02-06 15:43:46

ibmdwWeb开发

2022-03-15 08:41:57

Firefox扩展浏览器
点赞
收藏

51CTO技术栈公众号