【前端趋势调查系列】带你看看前端生态圈的技术趋势state-of-css 2023详细解读

593 阅读8分钟

往期文章:

【带你看看前端生态圈的技术趋势】state-of-js 2021 & state-of-css 2021 详细解读

【年更】带你看看前端生态圈的技术趋势 state-of-css 2022 & state-of-js 2022 详细解读

一、写在前面

  • 本次分享的数据来源是state-of-css是前端生态圈中非常有影响力的且规模很大的数据调查。
  • 由于这个分享话题很大,涉及到的技术很多,所以很多可以深挖的技术只能一笔带过,但能出现在本次调查里的,都是有一定闪光点且有一定热度的技术,如果感兴趣的话可以深入了解。
  • state-of-js 2023调查仍在进行中,有调查结果了之后我也会第一时间为大家解读。
  • 如果这篇文章有其他意见或更好的建议,欢迎大家多多指教。

二、CSS特性

2-1、总览

下图根据技术分类划分,显示了各种特性的采用率。外圈的尺寸代表了了解这个特性的用户数量, 而内圈的尺寸代表了实际使用这个特性的用户数量。

分组区分特性:

热门特性使用率变化:

  • 在布局方面,flexbox的gap属性是使用率最高的特性,@container query容器查询进步幅度最大。
  • 在图形、图像、颜色方面,css-filters使用率最高,currentcolor进步幅度最大。
  • 在交互和选择器这两个方面中,scroll-behavior和:has()选择器的使用率仍在逐年上升,而:has()的进步幅度达到了16%,是今年所有css特性中,进步幅度最大的特性。
  • 而对于其它特性,css variables使用率最高,css nesting进步幅度最大。

接下来我会分模块挑选出一批「实用率较高」或「增长速度较快」的特性为大家进行解读。

2-2、详细分析

布局

flexbox的gap属性使用率在今年进步了10%,目前已经超过了90%,普及率非常高了。

developer.mozilla.org/en-US/docs/…

caniuse.com/flexbox-gap

容器查询的使用率仍然较低,只有26%,但进步幅度有14%,非常可观。

developer.mozilla.org/en-US/docs/…

caniuse.com/css-contain…

图形、图像与颜色

css滤镜效果在今年使用率也达到了75%,从2019年开始逐年上升。

developer.mozilla.org/en-US/docs/…

caniuse.com/css-filters

backdrop-filter今年使用率突破了50%,进步幅度6%。(图形、图像、颜色这个分类下的特性,基本今年都进步了6%左右)

developer.mozilla.org/zh-CN/docs/…

caniuse.com/css-backdro…

min-content/max-content/fit-content这类关键字,今年也增加了6%的使用率。

developer.mozilla.org/en-US/docs/…

caniuse.com/intrinsic-w…

currentcolor今年使用率也突破了50%,进步幅度7%,是进步幅度最大的特性。

developer.mozilla.org/en-US/docs/…

caniuse.com/currentcolo…

交互

在所有的交互特性中,scroll-behavior仍然是使用率最高的那一个,而且进步幅度也有7%。

developer.mozilla.org/en-US/docs/…

caniuse.com/css-scroll-…

选择器

在所有CSS特性中,今年最亮眼的就是:has()选择器了,它今年不仅使用率突破了50%,而且进步幅度达到了17%,是所有特性中使用率进步最大的特性。

developer.mozilla.org/en-US/docs/…

caniuse.com/css-has

其它特性

CSS变量使用率突破了90%,已经被广泛使用了。

developer.mozilla.org/en-US/docs/…

caniuse.com/css-variabl…

CSS比较函数在原地踏步了两年之后,使用率又提升了4%。

developer.mozilla.org/en-US/docs/…

caniuse.com/css-math-fu…

CSS嵌套仍然没有被所有浏览器厂商支持,所以使用率并不高,只有26%,但进步幅度还是很可观的,有13%的使用率进步。

developer.chrome.com/articles/cs…

三、CSS技术

3-1、CSS 框架

使用率:

满意度:

  • 从使用率上来说:

    • Bootstrap仍然处于领先位置。
    • tailwind css经过这几年的发展,使用率已经超过了50%,「原子化CSS」已经被越来越多的开发者认可了。
    • 国产框架Antd这两年一直在15%左右波动,目前处于一个比较稳定的状态。
  • 而在满意度方面,也能看到很多有意思的事情:

    • 首先是Bootstrap——虽然他使用率一直是第一,但是满意度一直在逐年降低,今年已经快要跌破30%了,看得出来大部分开发者对于它是越来越不满意的。

    • tailwind css随着使用人数的增加,满意度也一直在降,今年它终于从蝉联三年满意度第一的位置跌到了第三,但总的来说还算是很不错的成绩了。

    • 而今年的黑马当属Open Props,「原子化CSS」的思想在CSS变量中得以应用,通过下面的方式你就能使用Open Props定制好的CSS样式了。

      • @import "https://unpkg.com/open-props";
        
        .card {
          border-radius: var(--radius-2);
          padding: var(--size-fluid-3);
          box-shadow: var(--shadow-2);
        
          &:hover {
            box-shadow: var(--shadow-3);
          }
          @media (--motionOK) {
            animation: var(--animation-fade-in);
          }
        }
        

3-3、CSS-in-JS 框架

使用率:

满意度:

  • CSS-in-JS框架这两年的发展总的来说趋于稳定。
  • 从使用率来看,依然是Styled Components、CSS Modules、Styled JSX、Emotion这几个老朋友。
  • 从满意度来说,绝大部分CSS-in-JS框架的满意度都是在下跌的(别看像是Styled System、Styled JSX的排名往上涨了,但是看满意度的数值的话,都是往下跌的)。CSS Modules算是CSS-in-JS框架的常青树了,满意度一直稳定在85%左右,排名第一。去年的黑马vanilla-extract满意度也一直再往下走,看起来开发者们在使用过这个框架后仍然对其不是特别满意。

四、浏览器环境与设备

下面这张图显示了开发者们会在哪些浏览器中进行开发和测试

可以看到排名前三的是Chrome、Firefox、Edge,仍然是老牌的PC浏览器。在移动端浏览器中,Chrome Android、Safari iOS、Chrome iOS排名前三。而我们的老朋友IE 11,基本已经入土了。

五、CSS使用情况

5-1、开发CSS和JS的时间占比

在开发者们开发CSS和JS的时间占比统计中,可以看到绝大部分开发者都是CSS-JS四六开,还有0.4%的开发者比较极端,100% 使用JS来开发样式。

5-2、遇到浏览器兼容问题的特性

在开发者们认为比较头痛的CSS浏览器兼容问题中,:has()选择器、CSS原生嵌套、@container Queries容器查询位列前三。

5-3、开发者认为CSS缺失的功能

在开发者们认为CSS缺失的功能中:

  • animate-to-auto排名第一,这个选项具体是指「CSS过渡动画效果支持宽高为auto的容器」,详细可参考:css-tricks.com/using-css-t…

  • Masonry Layout排名第二,这是一种更灵活的网格布局方案,目前仍为一个实验性的特性,如下图。详细可参考:developer.mozilla.org/en-US/docs/…

  • 排名第三的是老生常谈的话题了,SVG-in-CSS,也就是在CSS中支持SVG的语法。

六、今年 CSS 最大的亮点

使用率进步最多的特性

  • :has()选择器以17%的进步幅度成为今年使用率进步最多的特性

收到最多评论的特性

  • Subgrid是今年开发者评论数最多的特性

满意度最高的技术

  • Open Props作为今年CSS技术的黑马,以91%的满意度成为今年满意度最高的技术。
  • 官网:open-props.style/

最多次被提及的技术

  • Panda是一个服务端渲染友好的CSS-in-JS框架,解决了一些传统CSS-in-JS框架在服务端渲染中出现的问题,是今年被提及最多次的技术。
  • 官网:panda-css.com/docs/overvi…

七、总结

如果让我用三个词来总结今年的CSS生态调查的话,那我会使用「去框架化」、「深度原子化」、「服务端友好化」这三个词。

先说「去框架化」,在今年的生态调查中,我们发现了一个有趣的现象——随着较新的 CSS 功能的使用趋势上升,CSS 框架的使用和满意度均呈下降趋势。这代表着两方面:一方面是当前原生CSS的功能已经相对完善了;另一方面是浏览器厂商会比以前更快地跟进新功能,使开发者们能及时使用上这些新功能了,比如说:has()选择器,或者是CSS原生嵌套等。

然后是「深度原子化」,在这两年CSS领域中,讨论度最高的就是tailwind css,以及它的原子化css样式。而经过几年的发展,50%+的使用率和80%+的满意度已经证明了开发者们对于原子化CSS是买账的,随之而来的就是更进一步的原子化,比如Open Props,原子化CSS变量。而在未来,也许还会有更多、更深度的原子化的框架出现。

最后是「服务端友好化」,随着这两年SSR的发展,以及Next.js等框架的流行,CSS在SSR场景下也暴露出了许多在CSR场景中未曾遇到的问题——尤其是在CSS-in-JS领域,很多老牌的框架在SSR场景的表现都不尽如人意(比如Emotion),而这些也都是下一代CSS-in-JS框架着力解决的问题。在未来,我们应该也能看到更多的SSR友好的框架,而对于那些已有的框架,支持SSR场景,也变得更加重要了起来。