2021年度全球CSS报告新鲜出炉,JavaScript调查推迟到明年

本文主要是介绍2021年度全球CSS报告新鲜出炉,JavaScript调查推迟到明年,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

这篇关于2021年度全球CSS报告新鲜出炉,JavaScript调查推迟到明年的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/740000

相关文章

SpringBoot使用Apache Tika检测敏感信息

《SpringBoot使用ApacheTika检测敏感信息》ApacheTika是一个功能强大的内容分析工具,它能够从多种文件格式中提取文本、元数据以及其他结构化信息,下面我们来看看如何使用Ap... 目录Tika 主要特性1. 多格式支持2. 自动文件类型检测3. 文本和元数据提取4. 支持 OCR(光学

Java内存泄漏问题的排查、优化与最佳实践

《Java内存泄漏问题的排查、优化与最佳实践》在Java开发中,内存泄漏是一个常见且令人头疼的问题,内存泄漏指的是程序在运行过程中,已经不再使用的对象没有被及时释放,从而导致内存占用不断增加,最终... 目录引言1. 什么是内存泄漏?常见的内存泄漏情况2. 如何排查 Java 中的内存泄漏?2.1 使用 J

JAVA系统中Spring Boot应用程序的配置文件application.yml使用详解

《JAVA系统中SpringBoot应用程序的配置文件application.yml使用详解》:本文主要介绍JAVA系统中SpringBoot应用程序的配置文件application.yml的... 目录文件路径文件内容解释1. Server 配置2. Spring 配置3. Logging 配置4. Ma

Java 字符数组转字符串的常用方法

《Java字符数组转字符串的常用方法》文章总结了在Java中将字符数组转换为字符串的几种常用方法,包括使用String构造函数、String.valueOf()方法、StringBuilder以及A... 目录1. 使用String构造函数1.1 基本转换方法1.2 注意事项2. 使用String.valu

java脚本使用不同版本jdk的说明介绍

《java脚本使用不同版本jdk的说明介绍》本文介绍了在Java中执行JavaScript脚本的几种方式,包括使用ScriptEngine、Nashorn和GraalVM,ScriptEngine适用... 目录Java脚本使用不同版本jdk的说明1.使用ScriptEngine执行javascript2.

Spring MVC如何设置响应

《SpringMVC如何设置响应》本文介绍了如何在Spring框架中设置响应,并通过不同的注解返回静态页面、HTML片段和JSON数据,此外,还讲解了如何设置响应的状态码和Header... 目录1. 返回静态页面1.1 Spring 默认扫描路径1.2 @RestController2. 返回 html2

Spring常见错误之Web嵌套对象校验失效解决办法

《Spring常见错误之Web嵌套对象校验失效解决办法》:本文主要介绍Spring常见错误之Web嵌套对象校验失效解决的相关资料,通过在Phone对象上添加@Valid注解,问题得以解决,需要的朋... 目录问题复现案例解析问题修正总结  问题复现当开发一个学籍管理系统时,我们会提供了一个 API 接口去

Java操作ElasticSearch的实例详解

《Java操作ElasticSearch的实例详解》Elasticsearch是一个分布式的搜索和分析引擎,广泛用于全文搜索、日志分析等场景,本文将介绍如何在Java应用中使用Elastics... 目录简介环境准备1. 安装 Elasticsearch2. 添加依赖连接 Elasticsearch1. 创

Spring核心思想之浅谈IoC容器与依赖倒置(DI)

《Spring核心思想之浅谈IoC容器与依赖倒置(DI)》文章介绍了Spring的IoC和DI机制,以及MyBatis的动态代理,通过注解和反射,Spring能够自动管理对象的创建和依赖注入,而MyB... 目录一、控制反转 IoC二、依赖倒置 DI1. 详细概念2. Spring 中 DI 的实现原理三、

SpringBoot 整合 Grizzly的过程

《SpringBoot整合Grizzly的过程》Grizzly是一个高性能的、异步的、非阻塞的HTTP服务器框架,它可以与SpringBoot一起提供比传统的Tomcat或Jet... 目录为什么选择 Grizzly?Spring Boot + Grizzly 整合的优势添加依赖自定义 Grizzly 作为