8 月 26 日，2023 年度 State of CSS 調(diào)查（CSS 現(xiàn)狀調(diào)查）結(jié)果正式公布！2023 年 CSS 狀況調(diào)查于 2023 年 6 月 15 日至 7 月 15 日進(jìn)行，共收到了 9108 份回復(fù)。下面就來通過這份調(diào)查結(jié)果來看看 2023 年 CSS 生態(tài)圈的技術(shù)趨勢！

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

圖片

功能概述

CSS 一直在發(fā)展，許多引入的新功能正在緩慢但肯定地被開發(fā)者社區(qū)采用。下面是受訪者對(duì)不同類別 CSS 新特性的了解和使用情況。其中，外圈的大小對(duì)應(yīng)的是知道某個(gè)功能的用戶總數(shù)（知道+用過的受訪者），而內(nèi)圈代表實(shí)際使用過的用戶（用過的受訪者）。

圖片

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

布局

（1）子網(wǎng)格

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

圖片

（2）書寫模式

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

（3）邏輯屬性

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

（4）縱橫比

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

圖片

（5）content-visibility

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

圖片

（6）gap (grid-gap)

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

圖片

（7）容器查詢

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

圖片

（8）object-view-box

object-view-box 用于在一個(gè)元素上指定一個(gè)“視圖框”，類似于SVG的viewBox屬性，用于在元素的內(nèi)容上進(jìn)行縮放或平移。

圖片

（9）大、小和動(dòng)態(tài)視口單位

大、小和動(dòng)態(tài)視口單位是CSS中用于描述視口尺寸的單位。它們分別表示大視口、小視口和動(dòng)態(tài)視口。

• 大視口：表示視口大小假設(shè)任何動(dòng)態(tài)工具欄都是收縮狀態(tài)。對(duì)應(yīng)的單位是以lv為前綴，例如lvw、lvh、lvi、lvb、lvmin、lvmax。
• 小視口：表示視口大小假設(shè)任何動(dòng)態(tài)工具欄都是擴(kuò)展?fàn)顟B(tài)。對(duì)應(yīng)的單位是以sv為前綴，例如svw、svh、svi、svb、svmin、svmax。
• 動(dòng)態(tài)視口：表示根據(jù)地址欄UI是否縮小而使用小的、中間的和大的單位。當(dāng)動(dòng)態(tài)工具欄展開時(shí)，動(dòng)態(tài)視口等于小視口的大?。划?dāng)動(dòng)態(tài)工具欄被縮回時(shí)，動(dòng)態(tài)視口等于大視口的大小。對(duì)應(yīng)的單位是以dv為前綴，例如dvw、dvh、dvi、dvb、dvmin、dvmax。

圖片

（10）媒體查詢范圍語法

媒體查詢中的"范圍語法"是一種用于指定條件范圍的語法，以實(shí)現(xiàn)更精細(xì)的樣式控制。它主要用于媒體特性，例如視口寬度、視口高度、設(shè)備像素比等。

范圍語法有兩種常見的形式：

1. "min-" 表示最小值：使用 min- 前綴來指定下限值。例如，min-width: 768px 意味著視口寬度必須大于或等于 768 像素才會(huì)應(yīng)用樣式。
2. "max-" 表示最大值：使用 max- 前綴來指定上限值。例如，max-width: 1024px 意味著視口寬度必須小于或等于 1024 像素才會(huì)應(yīng)用樣式。

圖片

（11）錨定位

錨點(diǎn)定位是一種用于在網(wǎng)頁中創(chuàng)建內(nèi)部鏈接目標(biāo)的技術(shù)。通過使用錨點(diǎn)定位，可以使用戶點(diǎn)擊某個(gè)鏈接時(shí)，頁面會(huì)自動(dòng)滾動(dòng)到指定位置，以便顯示相關(guān)內(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用于元素背后的所有元素，為了看到效果，必須使元素或其背景至少部分透明。

圖片

（4）min-content

min-content 是一個(gè) CSS 的尺寸關(guān)鍵字，表示的是內(nèi)容的最小寬度。對(duì)于文本內(nèi)容而言，這意味著內(nèi)容會(huì)利用所有軟換行的機(jī)會(huì)，變得盡可能的小，大小不會(huì)超過最長單詞的寬度。

圖片

（5）conic-gradient()

CSS 函數(shù) conic-gradient() 創(chuàng)建了一個(gè)由漸變組成的圖像，漸變的顏色變換圍繞一個(gè)中心點(diǎn)旋轉(zhuǎn)（而不是從中心輻射）。

圖片

（6）linear() 緩動(dòng)函數(shù)

linear() 是一種簡單的緩動(dòng)函數(shù)，用于描述動(dòng)畫在給定時(shí)間范圍內(nèi)以恒定速度進(jìn)行的行為。它提供了一種線性的方式來控制動(dòng)畫的進(jìn)展。

圖片

（7）ViewTransition API

ViewTransition API 為DOM更新提供了更加便利的過渡機(jī)制。這項(xiàng)實(shí)驗(yàn)性技術(shù)讓開發(fā)者可以簡單更新DOM，在不同DOM狀態(tài)之間產(chǎn)生動(dòng)畫轉(zhuǎn)換，并能進(jìn)一步改變DOM的內(nèi)容，簡化單頁應(yīng)用程序切換畫面的開發(fā)工作。

圖片

顏色

（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 色彩空間的顏色。一個(gè)顏色可以包括一個(gè)alpha 通道透明度值，來表明顏色如何與它的背景色混合。

圖片

（4）color-mix()

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

（5）lch()

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

圖片

（6）相對(duì)顏色

相對(duì)顏色是一種在 CSS 中使用的顏色表示方法，它基于另一個(gè)顏色值來定義新的顏色。

（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 屬性的合并寫法，讓你可以控制瀏覽器過度滾動(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)容的增長而發(fā)生不必要的布局更改，同時(shí)在不需要滾動(dòng)時(shí)避免不必要的視覺效果。

圖片

排版

（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）可變字體

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

圖片

（4）font-palette

font-palette CSS 屬性允許用戶代理指定某個(gè)字體所包含眾多調(diào)色板中的其中一個(gè)。用戶還可以通過使用 @font-palette-values @ 規(guī)則來覆蓋調(diào)色板中的值或創(chuàng)建一個(gè)新的調(diào)色板。

圖片

輔助功能

（1）prefers-reduced-motion

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

圖片

（2）prefers-color-scheme

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

圖片

（3）prefers-reduced-data

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

圖片

（4）color-scheme

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

圖片

（5）prefers-contrast

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

圖片

（6）forced-colors

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

圖片

（7）:focus-visible

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

圖片

其他功能

（1）變量

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

圖片

（2）@supports

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

圖片

（3）值函數(shù)

CSS 值函數(shù)是調(diào)用特殊數(shù)據(jù)處理或計(jì)算的語句，以返回一個(gè) CSS 屬性的 CSS 值。CSS 值函數(shù)代表更復(fù)雜的數(shù)據(jù)類型，它們可能需要一些輸入?yún)?shù)來計(jì)算返回值。

圖片

（4）@property

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

圖片

（5）::marker

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

圖片

（6）:has()

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

圖片

（7）:where()

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

圖片

（8）@layer

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

圖片

（9）::part()

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

圖片

（10）三角函數(shù)

三角函數(shù)是一組數(shù)學(xué)函數(shù)，用于處理角度和旋轉(zhuǎn)的計(jì)算。CSS 中的三角函數(shù)包括 sin()、cos() 和 tan()。這些函數(shù)可以用來計(jì)算角度的正弦、余弦和正切值。它們可以應(yīng)用于各種 CSS 屬性，如變換（transform）、過渡（transition）和動(dòng)畫（animation），以實(shí)現(xiàn)元素的旋轉(zhuǎn)、傾斜、位移等效果。

圖片

（11） CSS 嵌套

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

圖片

（12）image-set()

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

圖片

（13）image()

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

圖片

（14）單獨(dú)的變換屬性

在將 CSS 變換（Transform）效果應(yīng)用于元素時(shí)，可以單獨(dú)控制和指定不同的變換屬性。

圖片

CSS 框架

Tailwind CSS 再次脫穎而出，成為開發(fā)人員樂于繼續(xù)使用的主要 UI 框架；而 Open Props 則吸引了一小部分但充滿熱情的追隨者。

Bootstrap 仍然是使用率最高的 CSS 框架，并且遙遙領(lǐng)先于其他框架。值得注意的，Tailwind CSS 近年來受歡迎程度在快速升高，使用率已經(jīng)到達(dá)了 80 %。

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

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

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

保留率：

圖片

興趣率：

圖片

使用率：

圖片

認(rèn)知率：

圖片

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

圖片

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

圖片

其他工具使用情況如下：

圖片

受訪者對(duì) CSS 框架的現(xiàn)狀滿意情況，只有一半的用戶對(duì)現(xiàn)在CSS框架是滿意的：

圖片

CSS-in-JS

經(jīng)過一些初步的增長后，CSS-in-JS 領(lǐng)域似乎已經(jīng)趨于穩(wěn)定，而原生 CSS 本身正在采用其許多主要優(yōu)勢這一事實(shí)可能是一個(gè)很大的促成因素。Styled Components 仍然是使用率最高的 CSS-in-JS 庫，

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

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

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

保留率：

圖片

興趣率：

圖片

使用率：

圖片

認(rèn)知率：

圖片

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

圖片

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

圖片

其他工具的使用情況（Panda 是一個(gè)全新的零運(yùn)行時(shí) CSS-in-JS 框架）：

圖片

受訪者對(duì)CSS-in-JS 庫的現(xiàn)狀滿意情況，只有 31% 的用戶對(duì)目前的 CSS-in-JS 庫是滿意的：

圖片

其他工具

在瀏覽器發(fā)明 30 年后，我們?nèi)匀辉谶@個(gè)領(lǐng)域看到創(chuàng)新的發(fā)生。像Brave和Arc這樣的新進(jìn)入者，以及像Polypane這樣的專業(yè)工具，正在獲得市場份額。

預(yù)處理器/后處理器的使用情況，Sass 使用份額繼續(xù)持續(xù)遙遙領(lǐng)先，PostCSS 緊隨其后：

圖片

經(jīng)常使用哪些實(shí)用程序或工具，Prettier 是最常使用的實(shí)用工具，Autoprefixer 緊隨其后：

圖片

在開發(fā)期間，主要使用的瀏覽器，超過 80% 的用戶使用 Chrome，超過56 % 的用戶使用 Firefox，其他瀏覽器使用較少：

圖片

CSS 用法

測試 CSS 的環(huán)境，在哪些尺寸或環(huán)境上進(jìn)行測試？多數(shù)用戶在桌面和智能手機(jī)上測試 CSS：

圖片

通常使用 CSS 做的項(xiàng)目類型，近 85% 的用戶使用 CSS 開發(fā) Web 應(yīng)用：

圖片

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

圖片

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

圖片

目前 CSS 缺少的特性：

圖片

其他與編寫 CSS 相關(guān)的痛點(diǎn)，瀏覽器之間是差異是開發(fā)時(shí)最大的痛點(diǎn)，其次是編寫表單元素的樣式：對(duì) Web 技術(shù)的總體狀況滿意情況，近80%的用戶對(duì)于目前的 Web 技術(shù)是滿意的，只有 3.2% 的用戶是不滿意的：

圖片

對(duì) CSS 的總體狀態(tài)滿意情況，超過 92%的用戶對(duì)于目前的 CSS 技術(shù)是滿意的，只有 3% 的用戶是不滿意的：

圖片

總結(jié)

隨著對(duì)較新的CSS特性的使用趨勢上升，CSS框架的使用卻呈下降趨勢。這可能意味著人們開始逐漸適應(yīng)了一種觀念，即無需等待就可以使用較新的CSS特性，因?yàn)闉g覽器更新速度比以往更快。

人們對(duì)原生CSS特性（如嵌套和:has()）的認(rèn)知度很高，:has() 不僅可以像父選擇器一樣工作，而且有遠(yuǎn)超出此功能的其他用途，看起來我們正處在廣泛采用這些特性的邊緣。

有趣的是，很多開發(fā)者認(rèn)為 Animate to auto 和瀑布流布局是缺少的 CSS 特性。確實(shí)，在未明確聲明元素尺寸（尤其是高度）時(shí)，瀏覽器很難確定它們的值。

通過與諸如 Interop 之類的合作，以前被認(rèn)為不可能的特性現(xiàn)在都有可能成為現(xiàn)實(shí)！