2022年CSS生態圈技術趨勢！

作者：CUGGZ 2022-12-08 00:09:20

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

大家好。我是 CUGGZ。

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

State of CSS 2022 調查結果：https://2022.stateofcss.com/

功能概述

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

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

布局

（1）子網格

將更深層次的子網格嵌套到父網格中：

（2）書寫模式

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

（3）邏輯屬性

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

（4）縱橫比

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

（5）content-visibility

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

（6）gap (grid-gap)

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

（7）容器查詢

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

形狀和圖形

（1）<blend-mode>

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

（2）filter

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

（3）backdrop-filter

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

顏色

（1）color()

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

（2）accent-color

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

（3）<color>

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

（4）color-mix()

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

（5）lch()

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

（6）相對顏色

（7）漸變色彩空間

交互

（1）滾動快照

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

（2）overscroll-behavior

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

（3）touch-action

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

（4）scroll-behavior

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

（5）scrollbar-gutter

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

排版

（1）font-display

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

（2）-webkit-line-clamp

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

（3）可變字體

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

（4）字體調色板

輔助功能

（1）prefers-reduced-motion

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

（2）prefers-color-scheme

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

（3）prefers-reduced-data

prefers-reduced-data 媒體特性用于檢測用戶是否請求了消耗較少互聯網流量的網絡內容。

（4）color-contrast()

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

（5）color-scheme

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

（6）prefers-contrast

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

（7）forced-colors

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

（8）:focus-visible

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

選擇器

（1）::marker

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

（2）:has()

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

（3）:where()

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

其他功能

（1）變量

級聯變量的 CSS 自定義屬性是一個 CSS 模塊，它允許創建可以反復使用的自定義屬性。

（2）@supports

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

（3）will-change

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

（4）功能符號

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

（5）@property

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