大家好。我是库格兹。12月7日，年度CSS状态调查结果正式公布！2022年CSS状况调查于2022年10月1日至11月1日进行，共收到14,310份回复。让我们通过调查结果来看看2022年CSS生态的技术趋势吧！StateofCSS旨在确定Web开发生态系统中即将出现的趋势，以帮助开发人员做出技术选择。因此，这些调查的重点是预测未来几年会发生什么，而不是分析现在流行什么，这就是为什么没有包括使用最广泛的功能或技术的原因。此外，浏览器供应商使用调查数据来确定功能的优先级并为Interop2022等计划提供信息。CSS2022状态调查结果：https://2022.stateofcss.com/功能概述以下是调查受访者对不同类别的新的CSS特性。其中，外圈的大小对应的是知道一个功能的用户总数（知道+用过的受访者），而内圈代表的是实际使用过的用户（用过的受访者）。让我们来看看受访者在过去三年中对这些CSS新特性的理解和使用情况。布局(1)Subgrids将更深的子网格嵌套到父网格中：(2)WritingModesWritingModes是一个CSS模块，它定义了各种国际书写模式，例如从左到右、从右到左、双向和垂直。(3)逻辑属性逻辑属性和值是CSS的一个模块，它们引入的属性和值可以从逻辑的角度来控制布局，而不是从物理的、方向或维度的角度。(4)aspectratioaspect-ratio属性为盒子容器指定一个预期的纵横比，可用于计算自动尺寸和服务于其他布局功能。(5)content-visibilitycontent-visibility属性控制元素是否完全呈现其内容，允许用户代理在需要时省略大量布局和呈现工作。它使用户代理能够跳过元素的渲染工作（包括布局和绘画）直到需要它——这使得初始页面加载速度更快。(6)间隙(grid-gap)Gap属性用于设置网格行与列之间的间隙（gutters），该属性是row-gap和column-gap的缩写形式。(7)容器查询容器查询允许我们查看容器大小并根据容器大小而不是视口或其他设备特性将样式应用于内容。形状和图形(1)是一种CSS数据类型，用于描述当元素重叠时颜色应该如何显示。它用于background-blend-mode和mix-blend-mode属性。(2)filterfilter属性将模糊或颜色偏移等图形效果应用于元素。过滤器通常用于调整图像、背景和边框的渲染。(3)backdrop-filterbackground-filter属性允许您向元素后面的区域添加图形效果（例如模糊或颜色偏移）。因为它适用于元素后面的所有元素，所以元素或其背景必须至少部分透明才能看到效果。Color(1)color()color()函数符号允许在特定指定的颜色空间中指定颜色。(2)accent-coloraccent-color属性为某些元素生成的用户界面控件设置强调色。(3)CSS数据类型表示标准RGB色彩空间（sRGB色彩空间）中的一种颜色。一种颜色可以包含一个alpha通道透明度值，以指示该颜色如何与其背景颜色合成。(4)color-mix()color-mix()函数取两个颜色值，并返回在给定颜色空间中按给定量混合它们的结果。(5)lch()lch()函数表示LCH颜色空间中的给定颜色。它与lab()具有相同的L轴，但使用极坐标C（色度）和H（色调）。(6)相对颜色(7)渐变色空间交互(1)滚动快照滚动快照是CSS的一个模块，引入了滚动捕获位置，强制滚动位置，即滚动容器的滚动端口可能会滚动操作完成后结束滚动Location。(2)overscroll-behavioroverscroll-behavior属性是overscroll-behavior-x和overscroll-behavior-y属性的组合，允许你控制浏览器在过度滚动时的行为——即滚动到边界.(3)touch-actiontouch-action属性用于设置触摸屏用户如何操作元素的区域（例如浏览器内置的缩放功能）。(4)scroll-behavior当用户手动导航或者CSSOM滚动API触发滚动操作时，scroll-behavior属性指定了滚动框的滚动行为。任何其他滚动，例如由用户行为引起的滚动，都不受此属性的影响。影响。在根元素上指定此属性时，它适用于视口。(5)scrollbar-gutterscrollbar-gutter属性允许为滚动条预留空间，防止随着内容的增长不必要的布局变化，同时避免在不需要滚动时产生不必要的视觉效果。排版(1)font-displayfont-display属性决定了一个@font-face在不同的下载时间和可用时间下如何显示。(2)-webkit-line-clampwebkit-line-clamp属性可以将块容器中的内容限制在指定的行数内。它仅在display属性设置为-webkit-box或-webkit-inline-box并且-webkit-box-orient(en-US)属性设置为vertical时有效。（3）可变字体可变字体（Variablefonts）是OpenType字体规范的一种演变，它允许将同一种字体的多种变体整合到一个单一的字体文件中。这样就无需将不同宽度、粗细或样式的字体拆分为单独的字体文件。您只需要传递CSS和一行@font-face引用即可获得包含在该单个文件中的各种字体变体。本文介绍了如何在Web上使用可变字体。(4)字体调色板辅助功能(1)prefers-reduced-motionCSS媒体查询特性prefers-reduced-motion用于检测用户系统是否启用了动画缩小功能。(2)prefers-color-schemeprefers-color-scheme媒体特性用于检测用户是否将系统的主题色设置为亮色或暗色。(3)prefers-reduced-dataprefers-reduced-data媒体特性用于检测用户是否请求了消耗较少互联网流量的网页内容。(4)color-contrast()color-contrast()可以得到一个颜色值并将其与其他颜色值的列表进行比较，从列表中选出对比度最高的值。(5)color-schemecolor-scheme属性允许一个元素指示一个它可以轻松渲染的配色方案。操作系统配色方案的常见选择是“浅色”和“深色”，或者“白天模式”和“夜间模式”。当用户选择其中一种配色方案时，操作系统会调整用户界面。这包括表单控件、滚动条和CSS系统颜色的使用值。(6)prefers-contrastprefers-contrast媒体特征用于检测用户是否请求以较低或较高对比度呈现网页内容。(7)forced-colorsforced-colorsmediafunction用于检测useragent是否启用了forced-color模式，在该模式下，它会在页面上强制使用用户选择的有限调色板。强制颜色模式的一个示例是Windows高对比度模式。(8):focus-visible当元素匹配:focus伪类并且客户端(UA)的启发式引擎决定焦点应该可见时（在这种情况下，许多浏览器默认显示“焦点框”。）,:focus-visible伪类才会生效。此选择器可用于根据用户的输入方法（鼠标与键盘）显示不同形式的焦点。选择器(1)::marker::marker伪元素选择列表项的标记框，通常包含项目符号或数字。它适用于任何具有display:list-item集的元素或伪元素，例如和。(2):has()CSS函数伪类：has()表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时至少匹配一个元素。这个伪类提供了一种通过将容错相对选择器列表作为参数来选择引用元素的父元素或前一个兄弟元素的方法。(3)::where()CSS伪类：where()接受一个选择器列表作为它的参数，并且将选择所有可以被选择器列表中的任何规则选择的元素。其他功能(1)变量级联变量的CSS自定义属性是一个CSS模块，它允许创建可以反复使用的自定义属性。(2)@supports@supports可以指定依赖于浏览器中一个或多个特定CSS特性的支持声明。这称为属性查询。此规则可以放在代码的顶层，或嵌套在任何其他条件组规则中。(3)will-changewill-change属性为web开发者提供了一种将元素发生变化通知浏览器的方法，以便浏览器在元素属性真正发生变化之前提前做好相应的优化准备。这种优化可以提前准备部分复杂的计算工作，让页面的响应更快更灵敏。(4)函数符号CSS函数符号是可以表示更复杂数据类型或调用特殊数据处理或计算的CSS值。(5)@property@property是CSSHoudiniAPI的一部分，允许开发者显式定义他们的css自定义属性，允许属性类型检查，设置默认值，定义自定义属性是否可以被继承。@property规则提供了一种无需运行任何JS代码即可直接在样式表中注册自定义属性的方法。有效的@property规则注册一个自定义属性，就像使用相同参数调用CSS.registerProperty(en-US)函数一样。(6)@layer@layer声明了一个级联层，同一层的规则会级联在一起，让开发者对级联机制有更多的控制权。(7)::part()::part伪元素表示影子DOM中与part属性匹配的任何元素。(7)CSS嵌套原生CSS嵌套，不使用预处理器或后处理器。(8)image-set()image-set()是浏览器从给定集合中选择最合适的CSS图像的一种方法，主要用于高像素密度屏幕。(9)image()image()函数以类似于url()函数的方式定义，但增加了一些特性，包括指定图像的方向性，仅显示媒体片段定义的部分图像,并指定纯色作为无法渲染指定图像的备用方法。CSS框架让我们来看看一些流行的CSS框架随着时间的推移的保留率、兴趣、使用率和认知率。认知度低于10%的技术被排除在外。各比例定义如下：留存率：会再用/（会再用+不会再用）兴趣率：想学/（想学+不感兴趣）使用率：（会再用+不会'tuseagain)/AggregateAwarenessRate:(Total-NeverHeardOf)/AggregateRetentionRate:InterestRate:UsageRate:AwarenessRate:Respondents'PerceptionsOfSurveyedTechnologies随着时间的推移：下表中轴为正（“想学习”、“会再次使用”）和负面（“不感兴趣”、“不会再次使用”）体验被划分在的两边，其中条形粗细表示了解一项技术的受访者数量：其他工具使用:CSS-in-JS以下是一些流行的CSS-in-JS框架随时间的保留率、兴趣、使用率和认知率。RetentionRate:InterestRate:UsageRate:AwarenessRate:受访者对被调查技术随时间变化的看法：下表分为正向（“想学”、“会再用”）和负向（“不感兴趣”、“不会再次使用”）经验，其中条形的粗细表示了解某项技术的受访者数量：其他工具的使用；以下是受访者对CSS-in-JS库现状的看法满意度：其他工具预处理器/后处理器使用：经常使用哪些实用程序或工具：在开发过程中，使用的主要浏览器：CSS使用测试CSS的环境：通常用CSS完成项目类型：分配时间编写CSS（包括HTML）和JavaScript代码情况：现有的CSS功能由于缺乏支持或浏览器之间存在差异而难以使用情况：目前缺少CSS功能：其他与编写CSS相关的痛苦point:对Web技术整体状况的满意度：对CSS整体状况的满意度：受访者数据经验&年薪下面是受访者工作经验和年薪的百分比分布：语言下面是受访者使用的语言填写问卷语言百分比分布，超过60%的受访者用英语回答调查：年龄下面是年龄百分比从受访者的参与分布来看，超过30%的受访者年龄在25-35岁之间。值得注意的是，近30%的受访者年龄在35岁以上：工作经验以下是受访者工作经验的百分比分布：以下是受访者所在公司规模的百分比分布：以下是年薪受访者职位薪资百分比分布（美元/年）：
