CSSの使われ方を毎年たずねている調査「State of CSS」の最新の結果が公開された。回答を集めたのは今年の5月中旬から6月末にかけてで、世界の制作者4,902人が答えている。新機能の発表そのものではないが、現場で何が実際に使われていて、何がまだ様子見なのかが数字で並ぶので、自分たちの手札を確かめる材料になる。

使用率の上位は、条件に合う子要素を持つ親側を指定できる :has() が83.7%、縦横比を保つ aspect-ratio が81.3%、入れ子で書ける CSS Nesting が70.6%と続いた。少し前まで「便利そうだが対応状況が心配」と言われていた顔ぶれが、上から順に普通の道具として定着したことになる。逆に、この春から夏にかけて主要ブラウザに入ったばかりの指定は使用率が数%にとどまっており、ブラウザで使えるようになったことと、実案件で使われることの間には、やはり数年単位の距離があるとわかる。参考にしている情報源としては、MDN と Can I Use を挙げた人が多かった。新しい指定を試す前に対応状況を確かめる、という手順が広く共有されているということだろう。

気に入られている機能と、使われている機能

面白いのは、注目度と使用率が一致していない点だ。回答者が最も気に入った新機能として挙げたのは、要素を別の要素に紐づけて配置するアンカーポジショニング(anchor positioning)だった。ところが「対応状況が理由で使えていない機能」の筆頭にも、同じ名前が並ぶ。画面遷移をなめらかに見せる View Transition API や、条件分岐を書ける if() も似た位置にいる。触ってみたい気持ちと、納品するサイトに入れられるかどうかの線引きが、はっきり分かれている様子がうかがえる。

つまずきどころとして多く挙がったのは配置まわりで、次いで :has()、コンテナの幅で見た目を出し分ける @container が並んだ。どれも、うまくはまれば記述量がぐっと減る反面、思ったように効かないときの原因追いに時間を取られやすい種類の機能だ。それでも全体の満足度は5段階でおよそ4と、ここ数年ほぼ横ばいのままだった。書きやすくなった実感と、細かいところでの引っかかりが同居している、という受け止め方が続いていることになる。

中小企業のサイトを預かる立場からすると、この手の調査は流行を追うためというより、線引きの目安として使いやすい。使用率が高く枯れた機能は迷わず採用し、話題の新しい指定は、効かなかったときの見え方まで用意できる範囲で試す。企業サイトは公開してから何年も動き続けるものが多く、閲覧環境の幅も広い。上位に並ぶような定着した機能であれば、古い端末が混ざる相手でも心配は少ない。数字を眺めながらそのあたりの分け方を決め直すだけでも、調査に目を通す価値はある。詳しい内訳は調査結果のページで公開されている。