2月15日、Project Wallaceが「The CSS Selection」と題した記事を公開した。この記事では、10万件以上のウェブサイトにおけるCSSの利用実態と統計データについて詳しく紹介されている。
以下に、その内容を紹介する。
概要
本調査は、大規模なCSSの利用状況を俯瞰することを目的として実施されたものである。これまで「Web Almanac」が担ってきたCSSの年次報告が2022年を最後に途絶えている現状を受け、Project Wallaceの解析エンジンを用いて独自の視点から分析が行われた。
CSSは近年、新しい機能やプロパティ、アットルール（at-rules）が急速に増加している。本記事では、ファイルサイズやコードの行数といった全体像から、詳細なプロパティの使用傾向までを網羅している。
スタイルシートの構成
ファイルサイズと複雑性
ウェブサイトがユーザーに送信するCSSのサイズを、非圧縮状態の単一文字列として計測した。
- 最大サイズ: 52.5 MB（ネットワーク転送時には2.89 MBまで圧縮されるものの、展開後のサイズは膨大である）
- コード行数 (Source Lines of Code): 「ルール数 + アットルール数 + 宣言数」と定義。大半のサイトは10,000行以下に収まっている。
- 埋め込みコンテンツ: 90パーセンタイル以上のサイトでは、画像やフォント（WOFF2）をCSS内に埋め込む傾向が顕著であり、中には16.2 MBもの埋め込みコンテンツを持つサイトも存在した。
アットルール（At-rules）の動向
アットルールの採用率は以下の通りである。
- @media: 93%（レスポンシブデザインの標準として君臨）
- @font-face: 85%
- @keyframes: 83%
- @charset: 約40%（大半はUTF-8だが、Shift_JISなどの利用も見られる）
- @container: 9.61%（2023年のBaseline導入後、着実に普及）
- @supports: 普及率が予想外に低く、過小評価されている可能性がある。
- @layer: 2.71%（Tailwind CSSの利用や、レガシーコードの近代化のために使われる傾向がある）
@media においては、max-width (88%) と min-width (86%) が主流だが、prefers-reduced-motion も一定の採用率（約43%）を見せている。
セレクタと宣言の分析
セレクタの傾向
擬似クラスの利用において、特筆すべき変化が見られた。
- :where: トップ3にランクイン。
- :has: 41%のサイトで利用されており、普及が進んでいる。
- :is: 36%の採用率。
特異性（Specificity）と複雑性
多くのサイトでセレクタの特異性は適切に管理されているが、極端な例として特異性が「146, 1546, 159」という異常な値を持つサイトも確認された。また、セレクタの結合子（Combinators）については、子孫結合子（スペース）が最も多く、次に子結合子（>）が続く。
!important の利用
!important は依然として多用されており、あるサイトでは249,021個もの !important 宣言が確認された。一方で、カスタムプロパティ（CSS変数）の採用も進んでいるが、50パーセンタイル以下のサイトではまだ活用されていないという二極化が見られる。
値と単位
- カラーフォーマット: 8桁および4桁の16進数カラー（透過対応）の採用率が42%に達している。OKLCHよりもHSL(A)が依然として優勢である。
- 単位:
pxが圧倒的であり、次いでem、s（秒）が続く。remよりもsが上位にある点は興味深い。 - z-index: 多様な値が使用されており、スタッキングコンテキストの理解不足が推測される。
結論と今後の展望
本調査により、CSSの近代的な機能（:has や @container）が急速に普及している一方で、一部のサイトでは依然として古いブラウザハックや過剰な !important が残っている実態が浮き彫りとなった。
Project Wallaceは、今後の版において以下の改善を予定している。
- 文字列ベースの値比較の精度向上。
- ヘッドレスブラウザを用いた、より現実的なスクレイピング。
- GridとFlexboxの比較分析、
@scopeの採用調査。
詳細はThe CSS Selectionを参照していただきたい。
