大家好。我是 CUGGZ。

12 月 7 日，一年一度的 State of CSS 調(diào)查結(jié)果正式公布！2022 年 CSS 狀況調(diào)查于 2022 年 10 月 1 日至 11 月 1 日進(jìn)行，共收到了 14310 份回復(fù)。下面來(lái)通過(guò)調(diào)查結(jié)果看看 2022 年 CSS 生態(tài)圈的技術(shù)趨勢(shì)！

State of CSS  旨在確定 Web 開(kāi)發(fā)生態(tài)系統(tǒng)中即將出現(xiàn)的趨勢(shì)，以幫助開(kāi)發(fā)人員做出技術(shù)選擇。因此，這些調(diào)查的重點(diǎn)是預(yù)測(cè)未來(lái)幾年會(huì)發(fā)生什么，而不是分析現(xiàn)在流行什么，這就是為什么不包括當(dāng)前最廣泛使用的功能或技術(shù)的原因。此外，瀏覽器供應(yīng)商會(huì)使用調(diào)查數(shù)據(jù)來(lái)確定功能的優(yōu)先級(jí)并為 Interop 2022 等計(jì)劃提供信息。

State of CSS 2022 調(diào)查結(jié)果：https://2022.stateofcss.com/

功能概述

下面是受訪者對(duì)不同類別 CSS 新特性的了解和使用情況。其中，外圈的大小對(duì)應(yīng)的是知道某個(gè)功能的用戶總數(shù)（知道+用過(guò)的受訪者），而內(nèi)圈代表實(shí)際使用過(guò)的用戶（用過(guò)的受訪者）。

下面來(lái)分別看一下受訪者近三年對(duì)這些新 CSS 特性的了解和使用情況。

布局

（1）子網(wǎng)格

將更深層次的子網(wǎng)格嵌套到父網(wǎng)格中：

（2）書(shū)寫(xiě)模式

書(shū)寫(xiě)模式是一個(gè) CSS 模塊，它定義了各種國(guó)際書(shū)寫(xiě)模式，例如從左到右、從右到左、雙向和垂直。

（3）邏輯屬性

邏輯屬性與值是 CSS 的一個(gè)模塊，其引入的屬性與值能做從邏輯角度控制布局，而不是從物理、方向或維度來(lái)控制。

（4）縱橫比

??aspect-ratio?? 屬性為 box 容器規(guī)定了一個(gè)期待的縱橫比，這個(gè)縱橫比可以用來(lái)計(jì)算自動(dòng)尺寸以及為其他布局函數(shù)服務(wù)。

（5）content-visibility

??content-visibility?? 屬性控制元素是否完全渲染其內(nèi)容，從而允許用戶代理在需要時(shí)可以省略大量的布局和渲染工作。它使用戶代理能夠跳過(guò)元素的渲染工作（包括布局和繪制）直到需要它——這使得初始頁(yè)面加載速度更快。

（6）gap (grid-gap)

??gap?? 屬性是用來(lái)設(shè)置網(wǎng)格行與列之間的間隙（gutters），該屬性是 ??row-gap?? 和 ??column-gap?? 的簡(jiǎn)寫(xiě)形式。

（7）容器查詢

容器查詢?cè)试S我們查看容器大小，并根據(jù)容器大小而不是視口或其他設(shè)備特征將樣式應(yīng)用于內(nèi)容。

形狀和圖形

（1）<blend-mode>

<blend-mode> 是一種 CSS 數(shù)據(jù)類型，用于描述當(dāng)元素重疊時(shí)，顏色應(yīng)當(dāng)如何呈現(xiàn)。它被用于 background-blend-mode 和 mix-blend-mode 屬性。

（2）filter

??filter?? 屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像、背景和邊框的渲染。

（3）backdrop-filter

??backdrop-filter?? 屬性可以讓你為一個(gè)元素后面區(qū)域添加圖形效果（如模糊或顏色偏移）。因?yàn)樗m用于元素背后的所有元素，為了看到效果，必須使元素或其背景至少部分透明。

顏色

（1）color()

color() 函數(shù)符號(hào)允許在特定的指定顏色空間中指定顏色。

（2）accent-color

accent-color 屬性為某些元素生成的用戶界面控件設(shè)置強(qiáng)調(diào)色。

（3）<color>

CSS 數(shù)據(jù)類型 <color> 表示一種標(biāo)準(zhǔn) RGB 色彩空間（sRGB color space）的顏色。一個(gè)顏色可以包括一個(gè)alpha 通道透明度值，來(lái)表明顏色如何與它的背景色混合（composite）。

（4）color-mix()

color-mix() 函數(shù)采用兩個(gè)顏色值，并返回將它們?cè)诮o定顏色空間中按給定數(shù)量混合的結(jié)果。

（5）lch()

lch() 函數(shù)表示 LCH 顏色空間中的給定顏色。它與 lab() 具有相同的 L 軸，但使用極坐標(biāo) C（色度）和 H（色調(diào)）。

（6）相對(duì)顏色

（7）漸變色彩空間

交互

（1）滾動(dòng)快照

滾動(dòng)快照是 CSS 的模塊，它引入滾動(dòng)捕捉位置，它強(qiáng)制滾動(dòng)位置，即 滾動(dòng)容器的滾動(dòng)端口在滾動(dòng)操作完成后可能結(jié)束的滾動(dòng)位置。

（2）overscroll-behavior

overscroll-behavior 屬性是 overscroll-behavior-x 和 overscroll-behavior-y 屬性的合并寫(xiě)法，讓你可以控制瀏覽器過(guò)度滾動(dòng)時(shí)的表現(xiàn)——也就是滾動(dòng)到邊界。

（3）touch-action

touch-action 屬性用于設(shè)置觸摸屏用戶如何操縱元素的區(qū)域 (例如，瀏覽器內(nèi)置的縮放功能)。

（4）scroll-behavior

當(dāng)用戶手動(dòng)導(dǎo)航或者 CSSOM scrolling API 觸發(fā)滾動(dòng)操作時(shí)，scroll-behavior 屬性為一個(gè)滾動(dòng)框指定滾動(dòng)行為，其他任何的滾動(dòng)，例如那些由于用戶行為而產(chǎn)生的滾動(dòng)，不受這個(gè)屬性的影響。在根元素中指定這個(gè)屬性時(shí)，它反而適用于視窗。

（5）scrollbar-gutter

scrollbar-gutter? 屬性允許為滾動(dòng)條保留空間，防止隨著內(nèi)容的增長(zhǎng)而發(fā)生不必要的布局更改，同時(shí)在不需要滾動(dòng)時(shí)避免不必要的視覺(jué)效果。

排版

（1）font-display

font-display 屬性決定了一個(gè) @font-face 在不同的下載時(shí)間和可用時(shí)間下是如何展示的。

（2）-webkit-line-clamp

webkit-line-clamp? 屬性可以把塊容器中的內(nèi)容限制為指定的行數(shù)。它只有在 display? 屬性設(shè)置成 -webkit-box? 或者 -webkit-inline-box? 并且 -webkit-box-orient? (en-US) 屬性設(shè)置成 vertical? 時(shí)才有效果。

（3）可變字體

可變字體（Variable fonts）是 OpenType 字體規(guī)范上的演進(jìn)，它允許將同一字體的多個(gè)變體統(tǒng)合進(jìn)單獨(dú)的字體文件中。從而無(wú)需再將不同字寬、字重或不同樣式的字體分割成不同的字體文件。你只需通過(guò) CSS 與一行@font-face 引用，即可獲取包含在這個(gè)單一文件中的各種字體變體。本文將介紹如何在 Web 中使用可變字體。

（4）字體調(diào)色板

輔助功能

（1）prefers-reduced-motion

CSS 媒體查詢特性 prefers-reduced-motion 用于檢測(cè)用戶的系統(tǒng)是否被開(kāi)啟了動(dòng)畫(huà)減弱功能。

（2）prefers-color-scheme

prefers-color-scheme 媒體特性用于檢測(cè)用戶是否有將系統(tǒng)的主題色設(shè)置為亮色或者暗色。

（3）prefers-reduced-data

prefers-reduced-data 媒體特性用于檢測(cè)用戶是否請(qǐng)求了消耗較少互聯(lián)網(wǎng)流量的網(wǎng)絡(luò)內(nèi)容。

（4）color-contrast()

color-contrast() 可以獲取一個(gè)顏色值并將其與其他顏色值列表進(jìn)行比較，從列表中選擇具有最高對(duì)比度的值。?

（5）color-scheme

color-scheme 屬性允許元素指示它可以輕松渲染的配色方案。操作系統(tǒng)配色方案的常見(jiàn)選擇是“亮”和“暗”，或者是“白天模式”和“夜間模式”。當(dāng)用戶選擇其中一種配色方案時(shí)，操作系統(tǒng)會(huì)對(duì)用戶界面進(jìn)行調(diào)整。這包括表單控件、滾動(dòng)條和 CSS 系統(tǒng)顏色的使用值。

（6）prefers-contrast

prefers-contrast媒體特性用于檢測(cè)用戶是否請(qǐng)求以較低或較高對(duì)比度渲染 Web 內(nèi)容。

（7）forced-colors

forced-colors 媒體功能用于檢測(cè)用戶代理是否啟用了強(qiáng)制顏色模式，在這種模式下，它會(huì)在頁(yè)面上強(qiáng)制使用用戶選擇的有限調(diào)色板。forced-colors 模式的一個(gè)示例是 Windows 高對(duì)比度模式。

（8）:focus-visible

當(dāng)元素匹配:focus偽類并且客戶端 (UA) 的啟發(fā)式引擎決定焦點(diǎn)應(yīng)當(dāng)可見(jiàn) (在這種情況下很多瀏覽器默認(rèn)顯示“焦點(diǎn)框”。) 時(shí)，:focus-visible 偽類將生效。這個(gè)選擇器可以有效地根據(jù)用戶的輸入方式 (鼠標(biāo) vs 鍵盤(pán)) 展示不同形式的焦點(diǎn)。

選擇器

（1）::marker

::marker 偽元素選中一個(gè) list item 的 marker box，后者通常含有一個(gè)項(xiàng)目符號(hào)或者數(shù)字。它作用在任何設(shè)置了display: list-item的元素或偽元素上，例如<li>和<summary>。

（2）:has()

CSS 函數(shù)式偽類 :has() 表示一個(gè)元素，如果作為參數(shù)傳遞的任何相對(duì)選擇器在錨定到該元素時(shí)，至少匹配一個(gè)元素。這個(gè)偽類通過(guò)把可容錯(cuò)相對(duì)選擇器列表作為參數(shù)，提供了一種針對(duì)引用元素選擇父元素或者先前的兄弟元素的方法。

（3）:where()

CSS 偽類 :where()? 接受選擇器列表作為它的參數(shù)，將會(huì)選擇所有能被該選擇器列表中任何一條規(guī)則選中的元素。

其他功能

（1）變量

級(jí)聯(lián)變量的 CSS 自定義屬性是一個(gè) CSS 模塊，它允許創(chuàng)建可以反復(fù)使用的自定義屬性。

（2）@supports

@supports 可以指定依賴于瀏覽器中的一個(gè)或多個(gè)特定的 CSS 功能的支持聲明。這被稱為特性查詢。該規(guī)則可以放在代碼的頂層，也可以嵌套在任何其他條件組規(guī)則中。

（3）will-change

will-change 屬性為 web 開(kāi)發(fā)者提供了一種告知瀏覽器該元素會(huì)有哪些變化的方法，這樣瀏覽器可以在元素屬性真正發(fā)生變化之前提前做好對(duì)應(yīng)的優(yōu)化準(zhǔn)備工作。這種優(yōu)化可以將一部分復(fù)雜的計(jì)算工作提前準(zhǔn)備好，使頁(yè)面的反應(yīng)更為快速靈敏。

（4）功能符號(hào)

CSS 功能符號(hào)是一種 CSS 值，可以表示更復(fù)雜的數(shù)據(jù)類型或調(diào)用特殊的數(shù)據(jù)處理或計(jì)算。

（5）@property

@property 是CSS Houdini API 的一部分，它允許開(kāi)發(fā)者顯式地定義他們的 css 自定義屬性, 允許進(jìn)行屬性類型檢查、設(shè)定默認(rèn)值以及定義該自定義屬性是否可以被繼承。@property 規(guī)則提供了一個(gè)直接在樣式表中注冊(cè)自定義屬性的方式，而無(wú)需運(yùn)行任何 JS 代碼。有效的 @property 規(guī)則會(huì)注冊(cè)一個(gè)自定義屬性，就像 CSS.registerProperty(en-US) 函數(shù)被使用同樣的參數(shù)調(diào)用了一樣。

（6）@layer

@layer 聲明了一個(gè)級(jí)聯(lián)層，同一層內(nèi)的規(guī)則將級(jí)聯(lián)在一起，這給予了開(kāi)發(fā)者對(duì)層疊機(jī)制的更多控制。

（7）::part()

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

（7） CSS 嵌套 原生 CSS 嵌套，不使用預(yù)處理器或后處理器。

（8）image-set()

image-set() 是一種讓瀏覽器從給定集中選擇最合適的 CSS 圖像的方法，主要用于高像素密度屏幕。

（9）image()

image() 函數(shù)以類似于 url() 函數(shù)的方式定義 <image>，但增加了一些功能，包括指定圖像的方向性、僅顯示由媒體片段定義的圖像的一部分以及指定純色作為后備，以防無(wú)法渲染指定的圖像。

CSS 框架

下面來(lái)看看隨著時(shí)間的推移，一些熱門(mén) CSS 框架的保留率、興趣率、使用率和認(rèn)知率。

認(rèn)知度低于 10% 的技術(shù)不包括在內(nèi)。每個(gè)比率定義如下：

• 保留率：會(huì)再次使用/（會(huì)再次使用+不會(huì)再次使用）
• 興趣率：想學(xué)/（想學(xué)+沒(méi)興趣）
• 使用率：（會(huì)再次使用+不會(huì)再次使用）/總計(jì)
• 認(rèn)知率：（總計(jì) - 從未聽(tīng)說(shuō)過(guò)）/總計(jì)

保留率：

興趣率：

使用率：

認(rèn)知率：

隨著時(shí)間的推移，受訪者對(duì)所調(diào)查技術(shù)的看法：

下表在中心軸的兩側(cè)劃分了正面（“想學(xué)習(xí)”、“會(huì)再次使用”）和負(fù)面（“不感興趣”、“不會(huì)再次使用”）體驗(yàn)，其中條形粗細(xì)表示了解某項(xiàng)技術(shù)的受訪者數(shù)量：

其他工具使用情況如下：

CSS-in-JS

下面來(lái)看看隨著時(shí)間的推移，一些熱門(mén) CSS-in-JS 框架的保留率、興趣率、使用率和認(rèn)知率。

保留率：

興趣率：

使用率：

認(rèn)知率：

隨著時(shí)間的推移，受訪者對(duì)所調(diào)查技術(shù)的看法：

下表在中心軸的兩側(cè)劃分了正面（“想學(xué)習(xí)”、“會(huì)再次使用”）和負(fù)面（“不感興趣”、“不會(huì)再次使用”）體驗(yàn)，其中條形粗細(xì)表示了解某項(xiàng)技術(shù)的受訪者數(shù)量：

其他工具的使用情況；

下面是受訪者對(duì)CSS-in-JS 庫(kù)的現(xiàn)狀滿意情況：

其他工具

預(yù)處理器/后處理器的使用情況：

經(jīng)常使用哪些實(shí)用程序或工具：

在開(kāi)發(fā)期間，主要使用的瀏覽器：

CSS 用法

測(cè)試CSS的環(huán)境：

通常使用 CSS 做的項(xiàng)目類型：

分配編寫(xiě) CSS（包括 HTML ）和 JavaScript 代碼的時(shí)間情況：

現(xiàn)有的 CSS 特性由于缺乏支持或?yàn)g覽器之間的差異而難以使用的情況：

目前 CSS 缺少的特性：

其他與編寫(xiě) CSS 相關(guān)的痛點(diǎn)：

對(duì) Web 技術(shù)的總體狀況滿意情況：

對(duì) CSS 的總體狀態(tài)滿意情況：

受訪者數(shù)據(jù)

經(jīng)驗(yàn)&年薪

下面是受訪者工作經(jīng)驗(yàn)與年薪的百分比分布情況：

語(yǔ)言

下面是受訪者填寫(xiě)問(wèn)卷使用的語(yǔ)言百分比分布情況，超過(guò) 60% 的受訪者使用英語(yǔ)回答了此調(diào)查：

年齡

下面是受訪者的年齡百分比分布情況，有超過(guò) 30% 的受訪者年齡在25-35歲之間。值得注意的是，超過(guò) 35 歲的受訪者占到了近 30%：

工作經(jīng)驗(yàn)

下面是受訪者的工作經(jīng)驗(yàn)百分比分布情況：

公司規(guī)模

下面是受訪者所在公司的規(guī)模百分比分布情況：

年薪

下面是受訪者工作年薪百分比分布情況（美元/年）：