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

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Spring Boot中JSON数值溢出问题从报错到优雅解决办法

《SpringBoot中JSON数值溢出问题从报错到优雅解决办法》:本文主要介绍SpringBoot中JSON数值溢出问题从报错到优雅的解决办法,通过修改字段类型为Long、添加全局异常处理和... 目录一、问题背景:为什么我的接口突然报错了?二、为什么会发生这个错误?1. Java 数据类型的“容量”限制

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

SpringBoot请求参数接收控制指南分享

《SpringBoot请求参数接收控制指南分享》:本文主要介绍SpringBoot请求参数接收控制指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring Boot 请求参数接收控制指南1. 概述2. 有注解时参数接收方式对比3. 无注解时接收参数默认位置

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二

一文详解Java异常处理你都了解哪些知识

《一文详解Java异常处理你都了解哪些知识》:本文主要介绍Java异常处理的相关资料,包括异常的分类、捕获和处理异常的语法、常见的异常类型以及自定义异常的实现,文中通过代码介绍的非常详细,需要的朋... 目录前言一、什么是异常二、异常的分类2.1 受检异常2.2 非受检异常三、异常处理的语法3.1 try-

Java中的@SneakyThrows注解用法详解

《Java中的@SneakyThrows注解用法详解》:本文主要介绍Java中的@SneakyThrows注解用法的相关资料,Lombok的@SneakyThrows注解简化了Java方法中的异常... 目录前言一、@SneakyThrows 简介1.1 什么是 Lombok?二、@SneakyThrows