2022 值得推薦的 CSS 偽類、偽元素分別是什么
CSS是用來布局和格式化網頁和其他媒體的語言。它是 Web 的三種主要語言之一,與HTML(用于結構)和JavaScript(用于行為)并列。每一年,我們都看到CSS的規(guī)模在增長,2022年也不例外。
今天,我們來看一上,2022 最受歡迎的 CSS 偽類、偽元素分別是什么。
2022最受歡迎的偽類占比
用戶動作偽類 :hover, :focus, 和 :active 再次位列前三。否定偽類 :not()以及 :root 也繼續(xù)流行,可能用于創(chuàng)建自定義屬性。
去年,人們注意到 :focus-visible,一種以更符合用戶期望的方式來設計焦點元素的方式,出現在不到1%的頁面中。自2022年3月以來,該屬性在所有三個主要引擎中都可用,現在在10%的桌面頁面和9%的移動頁面中都能找到。
我們過濾掉任何帶有前綴的(因此是特定于瀏覽器的)偽元素。它們通常用于選擇瀏覽器的界面組件或元素,我們對開發(fā)人員實際使用的偽元素感興趣。
自去年以來,::before和::after的使用有所增加。這些都是用來在文檔中插入生成的內容。通過檢查content屬性的使用情況,我們可以看到它最常被用來插入一個空字符串,用于樣式設計。
生成的內容是在不需要添加元素的情況下對網格區(qū)域進行樣式設計的一種方法;也許這也是這些屬性使用量增加的原因?
現在::marker偽元素的使用率已經達到了1%,這表明人們正在慢慢開始利用選擇和樣式列表標記的能力。
屬性選擇器
最流行的屬性選擇器是 type,占 54%。接下來最流行的屬性選擇器是占37%的class,25%的 disabled,以及17%的 dir。