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月前
    |
    前端开发 JavaScript 开发者
    优化CSS重置过程:探索CSS层叠技术的应用与优势
    这篇文章介绍了一种名为CSS层叠的技术,用于优化CSS重置过程。它解释了CSS重置的概念,即通过删除浏览器默认样式来确保在不同浏览器上呈现一致的外观。然后,它引入了CSS层叠技术,以更好地控制样式的层次结构和优先级。
    |
    3月前
    |
    前端开发 UED
    不可或缺的前端技术之CSS选择器
    CSS选择器是前端开发中不可或缺的技术,它能够通过简洁而强大的语法来选择网页中的元素,并对其进行样式的设置。本文将介绍CSS选择器的基本用法和常见类型,帮助读者更好地掌握前端开发中的样式选择技巧。
    11 0
    |
    3月前
    |
    前端开发 API C++
    2022年CSS生态圈技术趋势!(上)
    2022年CSS生态圈技术趋势!
    |
    4月前
    |
    存储 前端开发 JavaScript
    基于前端技术原生HTML、JS、CSS 电子病历编辑器源码
    基于前端技术原生HTML、JS、CSS 电子病历编辑器源码
    76 0
    |
    6月前
    |
    XML 前端开发 JavaScript
    CSS3 技术中的数字 3 代表什么含义
    CSS3 技术中的数字 3 代表什么含义
    61 1
    |
    7月前
    |
    前端开发 UED 容器
    CSS 相关技术简介
    CSS(层叠样式表)是一种用于描述网页内容展示和布局的标记语言。它与 HTML 结合使用,为网页添加样式和美化效果。通过 CSS,我们可以控制文本的字体、颜色、大小,调整元素的边距和边框样式,甚至创建复杂的动画效果。
    53 0
    |
    8月前
    |
    前端开发 Android开发
    利用CSS实现轮播图效果
    媒体查询(Media Query)是CSS3新语法。 使用@media查询,可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机、Android手机,平板等设备都用得到媒体查询
    47 0
    |
    8月前
    |
    Web App开发 前端开发 算法
    探索现代CSS布局技术:Flexbox和Grid
    探索现代CSS布局技术:Flexbox和Grid
    探索现代CSS布局技术:Flexbox和Grid
    |
    11月前
    |
    前端开发 JavaScript 开发者
    《智能前端技术与实践》——第 2 章 前端开发基础 ——2.3 CSS 基础——2.3.1 CSS 的 3 种使用方法
    《智能前端技术与实践》——第 2 章 前端开发基础 ——2.3 CSS 基础——2.3.1 CSS 的 3 种使用方法
    |
    Web App开发 前端开发 iOS开发