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

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

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


选择器

(1)::marker

::marker 伪元素选中一个 list item 的 marker box,后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item的元素或伪元素上,例如

  • 和。
  • 13.webp.jpg

    (2):has()

    CSS 函数式伪类 :has() 表示一个元素,如果作为参数传递的任何相对选择器在锚定到该元素时,至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数,提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

    14.webp.jpg

    (3):where()

    CSS 伪类 :where() 接受选择器列表作为它的参数,将会选择所有能被该选择器列表中任何一条规则选中的元素。

    15.webp.jpg

    其他功能

    (1)变量

    级联变量的 CSS 自定义属性是一个 CSS 模块,它允许创建可以反复使用的自定义属性。

    16.webp.jpg

    (2)@supports

    @supports 可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层,也可以嵌套在任何其他条件组规则中。

    17.webp.jpg

    (3)will-change

    will-change 属性为 web 开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏。

    18.webp.jpg

    (4)** 功能符号**

    CSS 功能符号是一种 CSS 值,可以表示更复杂的数据类型或调用特殊的数据处理或计算。

    19.webp.jpg

    (5)@property

    @property 是CSS Houdini API 的一部分,它允许开发者显式地定义他们的 css 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。@property 规则提供了一个直接在样式表中注册自定义属性的方式,而无需运行任何 JS 代码。有效的 @property 规则会注册一个自定义属性,就像 CSS.registerProperty(en-US) 函数被使用同样的参数调用了一样。

    20.webp.jpg

    (6)@layer

    @layer 声明了一个级联层,同一层内的规则将级联在一起,这给予了开发者对层叠机制的更多控制。

    21.webp.jpg

    (7)::part()

    ::part 伪元素表示在 shadow DOM 中任何匹配 part 属性的元素。

    22.webp.jpg(7) CSS 嵌套 原生 CSS 嵌套,不使用预处理器或后处理器。

    23.webp.jpg

    (8)image-set()

    image-set() 是一种让浏览器从给定集中选择最合适的 CSS 图像的方法,主要用于高像素密度屏幕。

    24.webp.jpg

    (9)image()

    image() 函数以类似于 url() 函数的方式定义 ,但增加了一些功能,包括指定图像的方向性、仅显示由媒体片段定义的图像的一部分以及指定纯色作为后备,以防无法渲染指定的图像。

    25.webp.jpg

    CSS 框架

    下面来看看随着时间的推移,一些热门 CSS 框架的保留率、兴趣率、使用率和认知率。

    认知度低于 10% 的技术不包括在内。 每个比率定义如下:

    • 保留率:会再次使用/(会再次使用+不会再次使用)
    • 兴趣率:想学/(想学+没兴趣)
    • 使用率:(会再次使用+不会再次使用)/总计
    • 认知率:(总计 - 从未听说过)/总计

    保留率:

    31.webp.jpg

    兴趣率:

    32.webp.jpg

    使用率:

    44.webp.jpg

    认知率:

    33.webp.jpg

    随着时间的推移,受访者对所调查技术的看法:

    34.webp.jpg

    下表在中心轴的两侧划分了正面(“想学习”、“会再次使用”)和负面(“不感兴趣”、“不会再次使用”)体验,其中条形粗细表示了解某项技术的受访者数量:

    35.webp.jpg

    其他工具使用情况如下:

    36.webp.jpg

    CSS-in-JS

    下面来看看随着时间的推移,一些热门 CSS-in-JS 框架的保留率、兴趣率、使用率和认知率。

    保留率:

    41.webp.jpg

    兴趣率:

    42.webp.jpg

    使用率:

    43.webp.jpg

    认知率:

    45.webp.jpg

    随着时间的推移,受访者对所调查技术的看法:

    46.webp.jpg

    下表在中心轴的两侧划分了正面(“想学习”、“会再次使用”)和负面(“不感兴趣”、“不会再次使用”)体验,其中条形粗细表示了解某项技术的受访者数量:

    47.webp.jpg

    其他工具的使用情况;

    48.webp.jpg

    下面是受访者对CSS-in-JS 库的现状满意情况:

    49.webp.jpg

    其他工具

    预处理器/后处理器的使用情况:

    51.webp.jpg

    经常使用哪些实用程序或工具:

    52.webp.jpg

    在开发期间,主要使用的浏览器:

    53.webp.jpg

    CSS 用法

    测试CSS的环境:

    66.webp.jpg

    通常使用 CSS 做的项目类型:

    65.webp.jpg

    分配编写 CSS(包括 HTML )和 JavaScript 代码的时间情况:

    67.webp.jpg

    现有的 CSS 特性由于缺乏支持或浏览器之间的差异而难以使用的情况:

    68.webp.jpg

    目前 CSS 缺少的特性:

    69.webp.jpg

    其他与编写 CSS 相关的痛点:

    76.webp.jpg

    对 Web 技术的总体状况满意情况:

    77.webp.jpg

    对 CSS 的总体状态满意情况:


    受访者数据


    经验&年薪

    下面是受访者工作经验与年薪的百分比分布情况:

    321.webp.jpg

    语言

    下面是受访者填写问卷使用的语言百分比分布情况,超过 60% 的受访者使用英语回答了此调查:

    322.webp.jpg

    年龄

    下面是受访者的年龄百分比分布情况,有超过 30% 的受访者年龄在25-35岁之间。值得注意的是,超过 35 岁的受访者占到了近 30%:

    323.webp.jpg

    工作经验

    下面是受访者的工作经验百分比分布情况:

    53.webp.jpg

    公司规模

    下面是受访者所在公司的规模百分比分布情况:

    54.webp.jpg

    年薪

    下面是受访者工作年薪百分比分布情况(美元/年):

    55.webp.jpg

    相关文章
    |
    2月前
    |
    前端开发 开发者 UED
    CSS不同技术的探讨
    【10月更文挑战第11天】 CSS不同技术的探讨
    |
    2月前
    |
    存储 前端开发 JavaScript
    CSS:现代Web设计的不同技术
    【10月更文挑战第11天】 CSS:现代Web设计的不同技术
    |
    2月前
    |
    前端开发 开发者 UED
    CSS技术的演变与应用
    【10月更文挑战第11天】CSS技术的演变与应用
    |
    4月前
    |
    前端开发 开发者 容器
    探索现代Web开发中的CSS Grid布局技术
    【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
    58 3
    |
    4月前
    |
    存储 前端开发 安全
    【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
    【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
    34 2
    |
    4月前
    |
    Web App开发 前端开发
    【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
    【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
    32 2
    |
    4月前
    |
    缓存 前端开发 JavaScript
    【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
    【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
    34 2
    |
    4月前
    |
    移动开发 JavaScript 前端开发
    基于CSS3、原生JS、Vue3.0技术各自实现序列帧动画效果
    这篇文章展示了如何使用纯CSS3、原生JavaScript以及Vue 3.0技术来实现序列帧动画效果,并通过代码示例和动画效果展示了每种方法的实现过程和最终效果。
    152 0
    |
    5月前
    |
    前端开发
    css图标合并——ClipPath Sprites技术
    css图标合并——ClipPath Sprites技术
    48 1
    |
    5月前
    |
    前端开发 索引 Python
    技术心得:xpath、CSS定位方法
    技术心得:xpath、CSS定位方法
    52 0