2024年、CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証環境など
Post on:2024年11月7日
sponsors
CSSの進化は速く、IEのサポートが終了してさらに速くなりました。現在はエバーグリーンのブラウザ（最新版に自動アップデートするブラウザ）となり、モダンCSSの新機能が今までよりもすぐに使用できるようになっています。
2024年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2024」を紹介します。今年は例年より早いですね。
State of CSS 2024は、State of CSSでおこなわれたアンケートの調査結果（9,704人分）をまとめたものです。
まずは、アンケートに回答された人の属性。
世界中の人がアンケートに参加しており、日本人も参加しています。年齢は30-39才がもっとも多く、性別は男性が多めです。
アンケートに回答された人のCSSの経験年数は5-9年がもっとも多く、10-14年、0-4年と続きます。
CSSの機能について、見てましょう。
CSSの進化は早いですが、今年はなんと50個以上の機能が追加されました。
もっとも使用されたCSSの新機能は、フィルタ機能（blur(), contrast()）が75.4%でもっとも多く使用されています。僅差の2位は:has()セレクタ、3位はmin-content, max-content, fit-contentのキーワードでした。また、再度使用したいランキングの1位は、subgridでした。もっとも使用頻度が低い機能はぶら下がりの句読点hanging-punctuationで、回答者の84.7%が聞いたこともないでした。
fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める
CSSによるレイアウト関連では、アスペクト比aspect-ratioがもっとも使用されています。
続いてlvh, lvmin, lvmaxのビューポートの相対単位です。論理プロパティやsubgridも多く、コンテナクエリ@containerは聞いたことがあるけどまだ使っていない人が多いのが現状です。
CSS aspect-ratioプロパティの基礎知識、便利な使い方、実装に必要なプログレッシブエンハンスメント
CSSの100vhがスマホで高さいっぱいにならない問題はこれで解決！ CSSの新しいビューポート単位の使い方と注意事項
CSSには多くの機能が追加されていますが、現時点では依然としてワークフローをサポートするためにフレームワークやライブラリに依存しているようです。
CSSのフレームワークとUIライブラリに関しては、Tailwind CSSの独走が続いています。Bootstrapも依然として多くの人が利用していますが、他のフレームワークはかなり減少しています。
Tailwind CSSの基本的な使い方から実践的なテクニックまでしっかりと学べる一冊 -Tailwind CSS実践入門
CSS-in-JSの魅力の一部は、変数などCSSの機能によって時代遅れになっているかもしれませんが、型付きスタイルやビルド時のコンパイルなど、まだ多くの魅力があります。
CSS Modules, Styled Componentsの2強になっています。
Sass/SCSSが依然としてリーダーですが、その主要な機能の多くがCSS自体に吸収された現在、その使用が安定したままであるかどうかがポイントになります。
Sass/SCSSが1位で、PostCSSやLESSも一定数のユーザーが利用しています。
Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
CSSのコードを好みに合わせて整形・軽量化する方法は数多くあります。
Prettierが1位で、AutoprefixerとStylelintが続いています。
アンケートでは4大ブラウザが優勢を占めていますが、Arcのランキングがゆっくりと上昇しています。
Safariは24%の3位ですが、Safari iOSを加えると39%になります。Firefoxは51%と高い数字で、多くのデベロッパーが使用しているのが分かります。
テスト環境は、デスクトップが99%と高い数字で、スマホ・タブレットがそれに続いています。
アクセシビリティの重要性が高まっていることを示す明るい兆候として、スクリーンリーダーのテストが前年比で16.6%から19%に増加しました。
これは今年から加わった新しい項目ですね。
CSSの機能が強化された現在でも、さすがに100%CSSの人は非常に限られています。回答者の多くは依然としてJavaScriptのエコシステムでほとんどの時間を費やしているのが分かります。CSSの機能がさらに向上し、ブラウザのサポートも充実すると、どのような変化するのかが楽しみです。
CSSの新機能で問題が解決すると分かっても、ブラウザのサポートが十分でないと使用できません。
CSSの新機能で有望だけどブラウザのサポートが十分でないから使用できないラインキングで1位は、アンカーポジションです。また、コンテナクエリ@containerや:has()などは最新ブラウザではサポートされていますが、古いブラウザを対象にした場合には使用を控える必要があります。
CSS コンテナクエリ（@container）の便利な使い方を解説
CSSで期待されている新機能の1位は、:has()です。2024年現在すべてのブラウザにサポートされています。
ここでもコンテナクエリ@containerの人気が高く、続いてCSSネストがランキングしています。
sponsors
