2022年CSS生态圈技术趋势!(上)

简介: 2022年CSS生态圈技术趋势!

22.webp.jpg12 月 7 日,一年一度的 State of CSS 调查结果正式公布!2022 年 CSS 状况调查于 2022 年 10 月 1 日至 11 月 1 日进行,共收到了 14310 份回复。下面就来通过这份调查结果看看 2022 年 CSS 生态圈的技术趋势!

State of CSS  旨在确定 Web 开发生态系统中即将出现的趋势,以帮助开发人员做出技术选择。因此,这些调查的重点是预测未来几年会发生什么,而不是分析现在流行什么,这就是为什么不包括当前最广泛使用的功能或技术的原因。此外,浏览器供应商会使用调查数据来确定功能的优先级并为Interop 2022 等计划提供信息。

State of CSS 2022 调查结果2022.stateofcss.com/


功能概述


下面是受访者对不同类别 CSS 新特性的了解和使用情况。其中,外圈的大小对应的是知道某个功能的用户总数(知道+用过的受访者),而内圈代表实际使用过的用户(用过的受访者)。

1.webp.jpg

下面来分别看一下受访者近三年对这些新 CSS 特性的了解和使用情况。

布局

(1)子网格

将更深层次的子网格嵌套到父网格中:

2.webp.jpg

(2)书写模式

书写模式是一个 CSS 模块,它定义了各种国际书写模式,例如从左到右、从右到左、双向和垂直。

3.webp.jpg

(3)逻辑属性

逻辑属性与值是 CSS 的一个模块,其引入的属性与值能做从逻辑角度控制布局,而不是从物理、方向或维度来控制。

4.webp.jpg

(4)纵横比

aspect-ratio 属性为 box 容器规定了一个期待的纵横比,这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。

5.webp.jpg

(5)content-visibility

content-visibility 属性控制元素是否完全渲染其内容,从而允许用户代理在需要时可以省略大量的布局和渲染工作。 它使用户代理能够跳过元素的渲染工作(包括布局和绘制)直到需要它——这使得初始页面加载速度更快。

6.webp.jpg

(6)gap (grid-gap)

gap 属性是用来设置网格行与列之间的间隙(gutters),该属性是 row-gapcolumn-gap 的简写形式。

7.webp.jpg8.webp.jpg

(7)容器查询

容器查询允许我们查看容器大小,并根据容器大小而不是视口或其他设备特征将样式应用于内容。

9.webp.jpg

形状和图形

(1)

是一种 CSS 数据类型,用于描述当元素重叠时,颜色应当如何呈现。它被用于 background-blend-modemix-blend-mode 属性。

11.webp.jpg

(2)filter

filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

12.webp.jpg

(3)backdrop-filter

backdrop-filter 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

13.webp.jpg

颜色

(1)color()

color() 函数符号允许在特定的指定颜色空间中指定颜色。

14.webp.jpg

(2)accent-color

accent-color 属性为某些元素生成的用户界面控件设置强调色。

15.webp.jpg

(3)

CSS 数据类型 表示一种标准 RGB 色彩空间(sRGB color space)的颜色。一个颜色可以包括一个alpha 通道透明度值,来表明颜色如何与它的背景色混合(composite)。

(4)color-mix()

color-mix() 函数采用两个颜色值,并返回将它们在给定颜色空间中按给定数量混合的结果。

16.webp.jpg

(5)lch()

lch() 函数表示 LCH 颜色空间中的给定颜色。它与 lab() 具有相同的 L 轴,但使用极坐标 C(色度)和 H(色调)。

17.webp.jpg

(6)相对颜色

18.webp.jpg

(7)渐变色彩空间

19.webp.jpg

交互

(1)滚动快照

滚动快照是 CSS 的模块,它引入滚动捕捉位置,它强制滚动位置,即 滚动容器的滚动端口在滚动操作完成后可能结束的滚动位置。

21.webp.jpg

(2)overscroll-behavior

overscroll-behavior 属性是 overscroll-behavior-xoverscroll-behavior-y 属性的合并写法,让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。

23.webp.jpg

(3)touch-action

touch-action 属性用于设置触摸屏用户如何操纵元素的区域 (例如,浏览器内置的缩放功能)。

23.webp.jpg

(4)scroll-behavior

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,scroll-behavior 属性为一个滚动框指定滚动行为,其他任何的滚动,例如那些由于用户行为而产生的滚动,不受这个属性的影响。在根元素中指定这个属性时,它反而适用于视窗。

24.webp.jpg

(5)scrollbar-gutter

scrollbar-gutter 属性允许为滚动条保留空间,防止随着内容的增长而发生不必要的布局更改,同时在不需要滚动时避免不必要的视觉效果。

55.webp.jpg

排版

(1)font-display

font-display 属性决定了一个 @font-face 在不同的下载时间和可用时间下是如何展示的。

1.webp.jpg

(2)-webkit-line-clamp

webkit-line-clamp 属性可以把块容器中的内容限制为指定的行数。它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical 时才有效果。

2.webp.jpg

(3)可变字体

可变字体(Variable fonts)是 OpenType 字体规范上的演进,它允许将同一字体的多个变体统合进单独的字体文件中。从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。你只需通过 CSS 与一行@font-face 引用,即可获取包含在这个单一文件中的各种字体变体。本文将介绍如何在 Web 中使用可变字体。

3.webp.jpg

(4)字体调色板

735147ff94ee4c35b488c0c130b3060e_tplv-k3u1fbpfcp-zoom-in-crop-mark_1512_0_0_0.webp.jpg


辅助功能


(1)prefers-reduced-motion

CSS 媒体查询特性 prefers-reduced-motion 用于检测用户的系统是否被开启了动画减弱功能。

5.webp.jpg

(2)prefers-color-scheme

prefers-color-scheme 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

6.webp.jpg

(3)prefers-reduced-data

prefers-reduced-data 媒体特性用于检测用户是否请求了消耗较少互联网流量的网络内容。

7.webp.jpg

(4)color-contrast()

color-contrast() 可以获取一个颜色值并将其与其他颜色值列表进行比较,从列表中选择具有最高对比度的值。

8.webp.jpg

(5)color-scheme

color-scheme 属性允许元素指示它可以轻松渲染的配色方案。操作系统配色方案的常见选择是“亮”和“暗”,或者是“白天模式”和“夜间模式”。当用户选择其中一种配色方案时,操作系统会对用户界面进行调整。这包括表单控件、滚动条和 CSS 系统颜色的使用值。

9.webp.jpg

(6)prefers-contrast

prefers-contrast媒体特性用于检测用户是否请求以较低或较高对比度渲染 Web 内容。

10.webp.jpg

(7)forced-colors

forced-colors 媒体功能用于检测用户代理是否启用了强制颜色模式,在这种模式下,它会在页面上强制使用用户选择的有限调色板。forced-colors 模式的一个示例是 Windows 高对比度模式。

11.webp.jpg

(8):focus-visible

当元素匹配:focus伪类并且客户端 (UA) 的启发式引擎决定焦点应当可见 (在这种情况下很多浏览器默认显示“焦点框”。) 时,:focus-visible 伪类将生效。这个选择器可以有效地根据用户的输入方式 (鼠标 vs 键盘) 展示不同形式的焦点。

12.webp.jpg


2022年CSS生态圈技术趋势!(下)https://developer.aliyun.com/article/1411409

相关文章
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
47 6
|
2月前
|
移动开发 前端开发 JavaScript
除了 CSS3,还有哪些技术可以实现动画效果?
除了 CSS3,还有哪些技术可以实现动画效果?
72 5
|
3月前
|
前端开发 开发者 UED
CSS不同技术的探讨
【10月更文挑战第11天】 CSS不同技术的探讨
|
3月前
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术
|
3月前
|
前端开发 开发者 UED
CSS技术的演变与应用
【10月更文挑战第11天】CSS技术的演变与应用
|
5月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
65 3
|
5月前
|
存储 前端开发 安全
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
38 2
|
5月前
|
Web App开发 前端开发
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
47 2
|
5月前
|
缓存 前端开发 JavaScript
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
37 2
|
5月前
|
移动开发 JavaScript 前端开发
基于CSS3、原生JS、Vue3.0技术各自实现序列帧动画效果
这篇文章展示了如何使用纯CSS3、原生JavaScript以及Vue 3.0技术来实现序列帧动画效果,并通过代码示例和动画效果展示了每种方法的实现过程和最终效果。
196 0

热门文章

最新文章