公開日: 2024 年 12 月 6 日
State of CSS 2024 と State of HTML 2024 の結果が公開されました。この記事では、これらの調査で得られた最も興味深い調査結果の一部をご紹介します。
ウェブ プラットフォームに対する楽観主義
HTML と CSS に関する問題をいくつか見ていく前に、アンケートではプラットフォームに対する楽観的な見方が示されています。ウェブ プラットフォームは全体的に正しい方向に進んでいるかどうかを尋ねたところ、State of HTML の回答者の 58% がその記述に同意し、18% が強く同意しました。
CSS では、:has() が最も人気のある新機能として圧倒的な支持を集め、36% のユーザーが最高の新機能にランク付けしました。2 番目に人気があるのは @container で、CSS ネストと並んで 17% です。
使用しているもの
CSS データには、いくつかの驚くべき点がありました。たとえば、75% 以上のユーザーが CSS フィルタ効果を使用しており、最も使用されている機能となっています。カスケードに関する苦情が長年にわたって寄せられていることを考えると、カスケード レイヤを使用しているユーザーが 18.9% に過ぎないのは興味深いことです。カスケード関連の問題に頻繁に直面することを防ぐ Tailwind などのツールの導入と関連している可能性があります。
<main> や <nav> などのランドマーク要素は、使用しているものに関する HTML アンケートで上位にランクされています。多くのユーザーが遅延読み込みとレスポンシブ画像のテクニックを使用していることを嬉しく思います。
ブラウザのサポートに関するよくある問題
デベロッパーと話す際には、相互運用性の問題や、ブラウザによる機能のサポートに関する問題が必ず出てきます。アンケートでは、発生した問題について直接質問しています。問題のある機能のトップ 10 は次のとおりです。この機能を選択したユーザーの割合でランク付けされています。
- Popover API
- アンカーの配置
- コンテナクエリ
:has()- CSS ネストビュー
- Transition API
- サブグリッド
- グリッド
<dialog>- プログレッシブ ウェブアプリ
アンカー ポジショニングは、どちらの調査でも 11% のスコアでした。View Transition API は、State of CSS で 9%、State of HTML で 8% のスコアでした。これは、デベロッパーがこれらの機能をどれほど価値があると見なしているかを示しています。
興味深いことに、いくつかの機能は相互運用可能です。コンテナ クエリ、:has()、CSS ネスト、サブグリッドはベースラインで新しく利用可能になりました。ポップオーバー API も利用可能になる予定ですが、iOS でのライト ディスミッションに関する問題が原因で、まだ利用できません。<dialog> 要素は、CSS グリッド レイアウトと同様に、幅広く利用できるようになりました。これらの結果を詳しく調べて、ユーザーが抱えている問題を把握することをおすすめします。たとえば、グリッドに関する回答では、実際の相互運用性の問題を挙げるのではなく、学習が難しいことを挙げていることが多いです。
Baseline は、デベロッパーが状況を把握し、発生している問題がブラウザの互換性不足によるものなのか、それとも別の原因によるものなのかを把握するのに役立つことを願っています。これらのアンケートでは、機能のベースライン ステータスが強調されています。webstatus.dev では、ブラウザ全体での CSS に関する主な問題の可用性ステータスを確認することもできます。
必要な機能がない
また、プラットフォームに不足している機能についても尋ねます。これにより、まだ難しいことが何であるかを確認できます。この質問への回答率は低かったものの、CSS の現状に関するアンケートでは、ユーザーから最も多く質問されたのは、ミキシン、条件付きロジック、マサリ レイアウトでした。興味深いことに、親セレクタ（:has() がその機能を提供）とネストもリクエストされています。これらはすでに存在し、ベースラインで新しく利用可能になっています。
「HTML に 3 つの要素を追加できるとしたら、それは何ですか？」という質問が「HTML の現状」の回答者に尋ねられました。51% のユーザーがデータ表を希望しており、タブや切り替え要素も人気があります。
詳しく確認したい情報を選択してください。
アンケートには、アンケートの完了後に詳細を確認したい項目をリーディング リストに追加できる機能があります。これは貴重なデータです。特に、デベロッパー コンテンツの作成に携わっている場合は重要です。次のリストは、2 つの調査で上位 10 の機能です。リストに追加した回答者の割合でランク付けされています。
- CSS
hanging-punctuation - CSS
offset-path @scope- アンカーの位置
- カスタマイズ可能な選択
view-timelinescroll-timelinefocusgroup属性- 離散プロパティのアニメーション
image()
CSS のおすすめの参考書籍と HTML のおすすめの参考書籍で、詳細な結果を確認してください。
ウェブコミュニティからの 1 つのシグナル
Chrome では、ユーザーの最大の課題や、ウェブ プラットフォーム全体で最も関心のある点に関する情報を取得する手段として、こうしたアンケートをサポートしています。フィードバックは Google が使用する唯一のシグナルではありませんが、ユーザーの皆様が Google に直接ご意見をお伝えいただける場所です。これらのアンケートのいずれかまたは両方にご回答いただき、ありがとうございました。皆様からのご意見は、皆様が望むウェブの改善に役立てさせていただきます。ご協力いただける方は、The State of JS への参加がまだ間に合います。