2022年のCSSのまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど

CSSは進化のスピードが速いですが、2022年はさらに速くなりました。そして大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました。

参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ

2022年現在、CSSの使用状況を調査した「The State of CSS 2022」を紹介します。

2022年のCSSのまとめ

The State of CSS 2022

The State of CSS 2022は、State of CSSでおこなわれたアンケートの調査結果(14,310人分)をまとめたものです。

まずは、アンケートに回答された人の属性。
世界中の人がアンケートに参加しており、日本人も参加しています。年齢は24-44才が多く、性別は男性が多めです。

サイトのキャプチャ

経験年数

アンケートに回答された人のCSSの経験年数は10-20年がもっとも多く、5-10年、2-5年と続きます。

CSSの機能について、見てましょう。

サイトのキャプチャ

論理プロパティ

まずは、レイアウト関連の機能。論理プロパティとは、lefttopなどの物理的な方向ではなく、HTMLドキュメントの方向に依存するプロパティです。たとえば、margin-leftmargin-startになります。

2022年現在、すべてのブラウザにサポートされています。
論理プロパティのサポートブラウザ

サイトのキャプチャ

aspect-ratioプロパティ

aspect-ratioプロパティは名前の通り、アスペクト比を定義できます。コンテナに使用したり、サイズが異なる画像を揃えて配置するのも簡単に実装できます。

2022年現在、すべてのブラウザにサポートされています。
aspect-ratioプロパティのサポートブラウザ

サイトのキャプチャ

content-visibilityプロパティ

content-visibilityプロパティは、Webページの読み込みパフォーマンスを向上させるために最も影響があるプロパティです。content-visibilityを使用すると、ユーザーエージェントがレイアウトやペイントを含む要素のレンダリング作業を必要になるまでスキップさせることができます。

2022年現在、Chrome, Edge, Operaにサポートされています。レンダリング性能が向上するだけなので、非サポートブラウザに影響を与えることはありません。
content-visibilityプロパティのサポートブラウザ

サイトのキャプチャ

@container

@containerは、今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できるコンテナクエリです。

2022年現在、Firefoxを除くブラウザにサポートされています。
コンテナクエリのサポートブラウザ

サイトのキャプチャ

backdrop-filterプロパティ

backdrop-filterプロパティは、内部のテキストやその他の要素を変更することなく、要素の背景の色相やコントラストやぼかしを変更することができます。

2022年現在、すべてのブラウザにサポートされています。
backdrop-filterプロパティのサポートブラウザ

サイトのキャプチャ

accent-colorプロパティ

accent-colorプロパティは、たった1行のCSSでフォームの複数の要素に強調色を設定できます。

2022年現在、すべてのブラウザにサポートされています。
accent-colorプロパティのサポートブラウザ

サイトのキャプチャ

scroll-snapプロパティ

scroll-snapプロパティを使用すると、ユーザーがスクロールを終了した後にビューポートを特定の要素または場所にスナップさせることができます。

2022年現在、すべてのブラウザにサポートされています。
scroll-snapプロパティのサポートブラウザ

サイトのキャプチャ

line-clampプロパティ

line-clampプロパティは、テキストを指定した行数で省略します。

2022年現在、すべてのブラウザにサポートされています。
line-clampプロパティのサポートブラウザ

サイトのキャプチャ

prefers-reduced-motion

prefers-reduced-motion@mediaで使用するクエリで、ブラウザやOSの動きの抑制に関する設定に対応します。アニメーションのような機能は視覚障害者にとって動きの違和感を引き起こしたり、過度に気を散らせたりする可能性があるため、アクセシビリティに不可欠です。

2022年現在、すべてのブラウザにサポートされています。
prefers-reduced-motionのサポートブラウザ

サイトのキャプチャ

:has()疑似クラス

:has()疑似クラスは、パラメータとして渡されたセレクタのいずれかが少なくとも一つの要素に一致する場合に、その要素を表します。簡単に言うと、今までセレクタは子や孫を設定できましたが、:has()疑似クラスは親を設定できます。

2022年現在、Firefoxを除くブラウザにサポートされています。
:has()疑似クラスのサポートブラウザ

サイトのキャプチャ

:where()疑似クラス

:where()疑似クラスは、詳細度を0にします。特に、スタイルを上書きする時に役立ちます。

2022年現在、すべてのブラウザにサポートされています。
:where()疑似クラスのサポートブラウザ

サイトのキャプチャ

CSSのフレームワークに対して、肯定的か否定的か

レッドは否定的(興味がない・もう使わない)で、ブルーが肯定的(興味がある・また使いたい)です。Twilwind CSSがもっとも注目されているようです。Bootstrap, Bulma, Foundationなどのフレームワークは人気に陰りが見えてきました。

サイトのキャプチャ

CSS in JSに対して、肯定的か否定的か

レッドは否定的で、ブルーが肯定的です。2021年と比較すると伸びがなくなりましたが、CSS Modules, Styled Componentsが注目されています。

サイトのキャプチャ

使用するユーティリティ

ユーティリティで使用されているのは、Prettierが頭一つ抜けています。

サイトのキャプチャ

制作時に使用するブラウザ

制作時に使用するブラウザは、Chromeがもっとも多く、続いてFirefox, Safariとなっています。スマホ環境だと、Safari iOSがもっとも多いです。

サイトのキャプチャ

どんなデバイスでテストしているか

テストしているデバイスは、デスクトップ、スマホ、タブレットの順になっています。キーボード操作での確認、スクリーンリーダーでの確認、色覚障害の確認なども増えてきました。

サイトのキャプチャ

ブラウザのサポートが十分でないため、使用できないCSSの機能

すべてのブラウザにサポートされていないCSSの機能が上位を占めています。また、ブラウザ的には、Safariへの対応がネックになっているようです。

アンケートには他にもたくさんの項目があるので、気になった人はチェックしてみてください。

2022年のCSSのまとめ

The State of CSS 2022

sponsors

top of page

©2024 coliss