译者 | 祝涛
公司出品 | CSDN(ID:CSDNnews)
1994年,哈坤·利首度明确提出了CSS,到为止早已往后了近30年。十多年里,CSS出现了巨大变动的变动,2021年前夕CSS的情形怎样呢?下列是调查报告文本。
取样相关人员原产
沿海地区
此次调查报告投书相关人员主要就源自英国、白俄罗斯、新西兰、葡萄牙、瑞典、立陶宛和新西兰等北欧国家,进行调查相关人员原产在全世界。
年纪
进行调查样品的年纪原产主要就分散在24-34岁。
组织工作实战经验
此次进行调查的受调查者大多数是有5-20年组织工作实战经验的相关人员。
优点采用情形概要
下图根据分类划分,显示了各种优点的采用率。外圈的尺寸代表了了解这个优点的用户数量, 而内圈的尺寸代表了实际采用这个优点的用户数量。
布局
投书者更喜欢采用什么布局方式进行元素布局呢?讲到布局,大多数人就会想到Flex布局,从下表可以看出来,确实几乎所有受调查者都采用了Flexbox。CSS Flexbox布局模块可以更轻松地设计灵活的响应式布局结构,而无需采用浮动或定位,此外,所有现代浏览器均支持Flexbox属性。
在今年的进行调查中,Grid上升的趋势依然很快。Flex布局是一维布局,Grid布局是二维布局。Flex布局一次只能处理一个维度上的元素布局,一行或者一列。Grid布局是将容器划分成了“行”和“列”,产生了一个个的网格,有不少人认为,Grid比Flex更强大。
图形与图像
从下面的图表可以看出,Shape似乎一直不温不火,相比2020年的进行调查,Shape的采用程度有所下降。object-fit看起来受到了受调查者的欢迎,object-fit CSS属性指定可替换元素的文本应该怎样适应到其采用的高度和宽度确定的框,轻松地解决了图片的适配问题。
交互
采用者通常都怎样进行页面交互呢?进行调查显示,pointer-events最常用,pointer-events CSS属性指定在什么情形下 (如果有) 某个特定的图形元素可以成为鼠标事件的target。CSS滚动捕捉可以用来创建一个可滚动的容器,防止滚动时出现尴尬的滚动位置,创建更好的滚动体验。今年最新加入进行调查的scroll-timeline看起来还没什么人熟知。
排版
font-display一般与字体加载有关,如果用户不知道选择那个作为font-display的属性值,可以选择swap。
line-clamp属性可以限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他外来的WebKit属性,添加-WebKit-前缀。
CSS技术进行调查
预/后处理
进行调查结果显示,用户对PostCSS满意度最低,其次是Sass、Stylus、Less和Assembler CSS,但是在采用度和认知度上,Sass要高于PostCSS。
用户对前/后处理器的状态有多满意?进行调查显示,超过55%以上的用户还是比较满意的。
CSS框架
进行调查显示,2021年Tailwind CSS的满意度和关注度最低,而采用度和认知度最低的是Bootstrap。
总的来说,约40%的受调查者对CSS框架持满意态度。
CSS-in-JS
简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面。此次进行调查针对实现JavaScript编写CSS代码的库。
Emotion曾在2019年满意度第一,但是近几年一直呈下降趋势,此次进行调查显示,2021年,vanilla-extract满意度最低,CSS Modules的关注度最低,采用度和认知度最低的是Styled Components。
总体来说,受调查者对CSS-in-JS库的态度不是很明朗,有40.5%的受调查者给出了中立评价。这样看来,CSS-in-JS依旧没有成为CSS的主流技术。
CSS工具库进行调查
工具函数库
常用的工具函数库有Prettier 、Autoprefixer 、Stylelint 、PurgeCSS、 cssnano和PurifyCSS。
其他工具函数库
CSS采用环境进行调查
进行调查显示,受调查者最常在Chrome浏览器中进行测试,CSS早已越来越趋于多终端设备化,电脑桌面、智能手机和平板是主力军。
学习CSS的渠道进行调查
据进行调查,大多数人是通过自主学习的方式来学习CSS,也有一部分人是通过免费的在线课程来学习,而通过付费课程进行学习的人数较少。
下列是此次受调查者最常用的blog和杂志,以及他们关注的一些网站,可以给其他CSS学习者做一些参考。
总结
Web开发相关人员和Polypane的创建者Kilian Valkhof对这次的进行调查进行了总结,他表示,CSS早已作出了一些备受欢迎的改进。对于这个充满变动的时期他非常激动,他写道:“2022年,你编写CSS的方式很可能要从根本上改变了。这是一个难以置信又激动人心的时期,我们期待着来年所有令人惊叹的变动。”
值得注意的是,由于时间不够,2021年JavaScript情形进行调查延后到2022年1月。
笔者有作删减,原报告链接:
https://2021.stateofcss.com/zh-Hans/features