2022 最受歡迎的 CSS 偽類、偽元素分別是什麼

前端小智發表於2023-01-08
CSS
本文首發於微信公眾號：大遷世界, 我的微信：qq449245884，我會第一時間和你分享前端行業趨勢，學習途徑等等。
更多開源作品請看 GitHub https://github.com/qq449245884/xiaozhi ，包含一線大廠面試完整考點、資料以及我的系列文章。

CSS是用來佈局和格式化網頁和其他媒體的語言。它是 Web 的三種主要語言之一，與HTML(用於結構)和JavaScript(用於行為)並列。每一年，我們都看到CSS的規模在增長，2022年也不例外。

今天，我們來看一上，2022 最受歡迎的 CSS 偽類、偽元素分別是什麼。

2022最受歡迎的偽類佔比

image.png

使用者動作偽類 :hover, :focus, 和 :active 再次位列前三。否定偽類 :not()以及 :root 也繼續流行，可能用於建立自定義屬性。

去年，人們注意到 :focus-visible，一種以更符合使用者期望的方式來設計焦點元素的方式，出現在不到1%的頁面中。自2022年3月以來，該屬性在所有三個主要引擎中都可用，現在在10%的桌面頁面和9%的移動頁面中都能找到。

image.png

我們過濾掉任何帶有字首的(因此是特定於瀏覽器的)偽元素。它們通常用於選擇瀏覽器的介面元件或元素，我們對開發人員實際使用的偽元素感興趣。

自去年以來，::before和::after的使用有所增加。這些都是用來在文件中插入生成的內容。透過檢查content屬性的使用情況，我們可以看到它最常被用來插入一個空字串，用於樣式設計。

生成的內容是在不需要新增元素的情況下對網格區域進行樣式設計的一種方法；也許這也是這些屬性使用量增加的原因？

現在::marker偽元素的使用率已經達到了1%，這表明人們正在慢慢開始利用選擇和樣式列表標記的能力。

屬性選擇器

image.png

最流行的屬性選擇器是 type，佔 54%。接下來最流行的屬性選擇器是佔37%的class，25%的 disabled，以及17%的 dir。

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章