大家好。我是 CUGGZ。

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

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

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

功能概述

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

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

布局

（1）子網(wǎng)格

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

（2）書寫模式

書寫模式是一個 CSS 模塊，它定義了各種國際書寫模式，例如從左到右、從右到左、雙向和垂直。

（3）邏輯屬性

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

（4）縱橫比

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

（5）content-visibility

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

（6）gap (grid-gap)

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

（7）容器查詢

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

形狀和圖形

（1）<blend-mode>

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

（2）filter

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

（3）backdrop-filter

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

顏色

（1）color()

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

（2）accent-color

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

（3）<color>

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

（4）color-mix()

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

（5）lch()

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

（6）相對顏色

（7）漸變色彩空間

交互

（1）滾動快照

滾動快照是 CSS 的模塊，它引入滾動捕捉位置，它強制滾動位置，即 滾動容器的滾動端口在滾動操作完成后可能結束的滾動位置。

（2）overscroll-behavior

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

（3）touch-action

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

（4）scroll-behavior

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

（5）scrollbar-gutter

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

排版

（1）font-display

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

（2）-webkit-line-clamp

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

（3）可變字體

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

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

輔助功能

（1）prefers-reduced-motion

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

（2）prefers-color-scheme

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

（3）prefers-reduced-data

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

（4）color-contrast()

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

（5）color-scheme

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

（6）prefers-contrast

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

（7）forced-colors

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

（8）:focus-visible

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

選擇器

（1）::marker

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

（2）:has()

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

（3）:where()

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

其他功能

（1）變量

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

（2）@supports

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

（3）will-change

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

（4）功能符號

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

（5）@property

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

（6）@layer

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

（7）::part()

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

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

（8）image-set()

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

（9）image()

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

CSS 框架

下面來看看隨著時間的推移，一些熱門 CSS 框架的保留率、興趣率、使用率和認知率。

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

• 保留率：會再次使用/（會再次使用+不會再次使用）
• 興趣率：想學/（想學+沒興趣）
• 使用率：（會再次使用+不會再次使用）/總計
• 認知率：（總計 - 從未聽說過）/總計

保留率：

興趣率：

使用率：

認知率：

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

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

其他工具使用情況如下：

CSS-in-JS

下面來看看隨著時間的推移，一些熱門 CSS-in-JS 框架的保留率、興趣率、使用率和認知率。

保留率：

興趣率：

使用率：

認知率：

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

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

其他工具的使用情況；

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

其他工具

預處理器/后處理器的使用情況：

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

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

CSS 用法

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

通常使用 CSS 做的項目類型：

分配編寫 CSS（包括 HTML ）和 JavaScript 代碼的時間情況：

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

目前 CSS 缺少的特性：

其他與編寫 CSS 相關的痛點：

對 Web 技術的總體狀況滿意情況：

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

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

經(jīng)驗&年薪

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

語言

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

年齡

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

工作經(jīng)驗

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

公司規(guī)模

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

年薪

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