2022年CSS生态圈技术趋势!(上)https://developer.aliyun.com/article/1411408
选择器
(1)::marker
::marker
伪元素选中一个 list item 的 marker box,后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item
的元素或伪元素上,例如
(2):has()
CSS 函数式伪类 :has()
表示一个元素,如果作为参数传递的任何相对选择器在锚定到该元素时,至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数,提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。
(3):where()
CSS 伪类 :where()
接受选择器列表作为它的参数,将会选择所有能被该选择器列表中任何一条规则选中的元素。
其他功能
(1)变量
级联变量的 CSS 自定义属性是一个 CSS 模块,它允许创建可以反复使用的自定义属性。
(2)@supports
@supports
可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层,也可以嵌套在任何其他条件组规则中。
(3)will-change
will-change
属性为 web 开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏。
(4)** 功能符号**
CSS 功能符号是一种 CSS 值,可以表示更复杂的数据类型或调用特殊的数据处理或计算。
(5)@property
@property
是CSS Houdini API 的一部分,它允许开发者显式地定义他们的 css 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。@property 规则提供了一个直接在样式表中注册自定义属性的方式,而无需运行任何 JS 代码。有效的 @property
规则会注册一个自定义属性,就像 CSS.registerProperty(en-US) 函数被使用同样的参数调用了一样。
(6)@layer
@layer
声明了一个级联层,同一层内的规则将级联在一起,这给予了开发者对层叠机制的更多控制。
(7)::part()
::part
伪元素表示在 shadow DOM 中任何匹配 part 属性的元素。
(7) CSS 嵌套 原生 CSS 嵌套,不使用预处理器或后处理器。
(8)image-set()
image-set()
是一种让浏览器从给定集中选择最合适的 CSS 图像的方法,主要用于高像素密度屏幕。
(9)image()
image()
函数以类似于 url()
函数的方式定义 ,但增加了一些功能,包括指定图像的方向性、仅显示由媒体片段定义的图像的一部分以及指定纯色作为后备,以防无法渲染指定的图像。
CSS 框架
下面来看看随着时间的推移,一些热门 CSS 框架的保留率、兴趣率、使用率和认知率。
认知度低于 10% 的技术不包括在内。 每个比率定义如下:
- 保留率:会再次使用/(会再次使用+不会再次使用)
- 兴趣率:想学/(想学+没兴趣)
- 使用率:(会再次使用+不会再次使用)/总计
- 认知率:(总计 - 从未听说过)/总计
保留率:
兴趣率:
使用率:
认知率:
随着时间的推移,受访者对所调查技术的看法:
下表在中心轴的两侧划分了正面(“想学习”、“会再次使用”)和负面(“不感兴趣”、“不会再次使用”)体验,其中条形粗细表示了解某项技术的受访者数量:
其他工具使用情况如下:
CSS-in-JS
下面来看看随着时间的推移,一些热门 CSS-in-JS 框架的保留率、兴趣率、使用率和认知率。
保留率:
兴趣率:
使用率:
认知率:
随着时间的推移,受访者对所调查技术的看法:
下表在中心轴的两侧划分了正面(“想学习”、“会再次使用”)和负面(“不感兴趣”、“不会再次使用”)体验,其中条形粗细表示了解某项技术的受访者数量:
其他工具的使用情况;
下面是受访者对CSS-in-JS 库的现状满意情况:
其他工具
预处理器/后处理器的使用情况:
经常使用哪些实用程序或工具:
在开发期间,主要使用的浏览器:
CSS 用法
测试CSS的环境:
通常使用 CSS 做的项目类型:
分配编写 CSS(包括 HTML )和 JavaScript 代码的时间情况:
现有的 CSS 特性由于缺乏支持或浏览器之间的差异而难以使用的情况:
目前 CSS 缺少的特性:
其他与编写 CSS 相关的痛点:
对 Web 技术的总体状况满意情况:
对 CSS 的总体状态满意情况:
受访者数据
经验&年薪
下面是受访者工作经验与年薪的百分比分布情况:
语言
下面是受访者填写问卷使用的语言百分比分布情况,超过 60% 的受访者使用英语回答了此调查:
年龄
下面是受访者的年龄百分比分布情况,有超过 30% 的受访者年龄在25-35岁之间。值得注意的是,超过 35 岁的受访者占到了近 30%:
工作经验
下面是受访者的工作经验百分比分布情况:
公司规模
下面是受访者所在公司的规模百分比分布情况:
年薪
下面是受访者工作年薪百分比分布情况(美元/年):