2022年のCSSのまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
Post on:2022年12月20日
sponsors
CSSは進化のスピードが速いですが、2022年はさらに速くなりました。そして大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました。
参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ
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の機能について、見てましょう。
まずは、レイアウト関連の機能。論理プロパティとは、leftやtopなどの物理的な方向ではなく、HTMLドキュメントの方向に依存するプロパティです。たとえば、margin-leftはmargin-startになります。
|
1 2 3 4 5 6 7 8 |
/* 物理プロパティで記述した場合 */ .container{ margin-left: 1rem; } /* 論理プロパティで記述した場合 */ .container{ margin-start: 1rem; } |
- CSSのボックスモデルにおける古い方法とこれからの方法 -論理プロパティにおける考え方
- CSSの論理プロパティの使い方を徹底解説、margin-block-start, margin-inline-endなど
2022年現在、すべてのブラウザにサポートされています。
論理プロパティのサポートブラウザ
aspect-ratioプロパティは名前の通り、アスペクト比を定義できます。コンテナに使用したり、サイズが異なる画像を揃えて配置するのも簡単に実装できます。
|
1 2 3 4 |
.container { width: 100%; aspect-ratio: 16 / 9; } |
- CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法
- CSS aspect-ratioプロパティの基礎知識、便利な使い方、実装に必要なプログレッシブエンハンスメント
- CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍
2022年現在、すべてのブラウザにサポートされています。
aspect-ratioプロパティのサポートブラウザ
content-visibilityプロパティは、Webページの読み込みパフォーマンスを向上させるために最も影響があるプロパティです。content-visibilityを使用すると、ユーザーエージェントがレイアウトやペイントを含む要素のレンダリング作業を必要になるまでスキップさせることができます。
|
1 2 3 |
.container { content-visibility: auto; } |
2022年現在、Chrome, Edge, Operaにサポートされています。レンダリング性能が向上するだけなので、非サポートブラウザに影響を与えることはありません。
content-visibilityプロパティのサポートブラウザ
@containerは、今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できるコンテナクエリです。
|
1 2 3 4 5 |
@container (min-width: 300px) { .container { } } |
- CSSの進化がすごい！ スタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用
- CSS コンテナクエリの準備はできてる？ 安定版のブラウザにサポート、ポリフィルも大幅にアップデートされました
2022年現在、Firefoxを除くブラウザにサポートされています。
コンテナクエリのサポートブラウザ
backdrop-filterプロパティは、内部のテキストやその他の要素を変更することなく、要素の背景の色相やコントラストやぼかしを変更することができます。
|
1 2 3 |
.container{ backdrop-filter: blur(3px); } |
2022年現在、すべてのブラウザにサポートされています。
backdrop-filterプロパティのサポートブラウザ
accent-colorプロパティは、たった1行のCSSでフォームの複数の要素に強調色を設定できます。
|
1 2 3 |
:root { accent-color: deeppink; } |
2022年現在、すべてのブラウザにサポートされています。
accent-colorプロパティのサポートブラウザ
scroll-snapプロパティを使用すると、ユーザーがスクロールを終了した後にビューポートを特定の要素または場所にスナップさせることができます。
|
1 2 3 |
.container{ scroll-snap-type: mandatory; } |
2022年現在、すべてのブラウザにサポートされています。
scroll-snapプロパティのサポートブラウザ
line-clampプロパティは、テキストを指定した行数で省略します。
|
1 2 3 4 |
.container p{ display: -webkit-box; -webkit-line-clamp: 3; } |
2022年現在、すべてのブラウザにサポートされています。
line-clampプロパティのサポートブラウザ
prefers-reduced-motionは@mediaで使用するクエリで、ブラウザやOSの動きの抑制に関する設定に対応します。アニメーションのような機能は視覚障害者にとって動きの違和感を引き起こしたり、過度に気を散らせたりする可能性があるため、アクセシビリティに不可欠です。
|
1 2 3 4 5 6 7 |
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; } } |
2022年現在、すべてのブラウザにサポートされています。
prefers-reduced-motionのサポートブラウザ
:has()疑似クラスは、パラメータとして渡されたセレクタのいずれかが少なくとも一つの要素に一致する場合に、その要素を表します。簡単に言うと、今までセレクタは子や孫を設定できましたが、:has()疑似クラスは親を設定できます。
|
1 2 3 |
.container:has(p) { /* pがある.containerのスタイル */ } |
- レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
- CSSの:has()疑似クラスの便利な使い方のまとめa>
- CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる
2022年現在、Firefoxを除くブラウザにサポートされています。
:has()疑似クラスのサポートブラウザ
:where()疑似クラスは、詳細度を0にします。特に、スタイルを上書きする時に役立ちます。
|
1 2 3 |
:where(html) { color: #333333; } |
- CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！
- CSSの新しいセレクタが便利！複数のセレクタを1つにまとめられる:is()、さらに詳細度を0にする:where()の使い方
- CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css
2022年現在、すべてのブラウザにサポートされています。
:where()疑似クラスのサポートブラウザ
レッドは否定的（興味がない・もう使わない）で、ブルーが肯定的（興味がある・また使いたい）です。Twilwind CSSがもっとも注目されているようです。Bootstrap, Bulma, Foundationなどのフレームワークは人気に陰りが見えてきました。
レッドは否定的で、ブルーが肯定的です。2021年と比較すると伸びがなくなりましたが、CSS Modules, Styled Componentsが注目されています。
ユーティリティで使用されているのは、Prettierが頭一つ抜けています。
制作時に使用するブラウザは、Chromeがもっとも多く、続いてFirefox, Safariとなっています。スマホ環境だと、Safari iOSがもっとも多いです。
テストしているデバイスは、デスクトップ、スマホ、タブレットの順になっています。キーボード操作での確認、スクリーンリーダーでの確認、色覚障害の確認なども増えてきました。
ブラウザのサポートが十分でないため、使用できないCSSの機能
すべてのブラウザにサポートされていないCSSの機能が上位を占めています。また、ブラウザ的には、Safariへの対応がネックになっているようです。
アンケートには他にもたくさんの項目があるので、気になった人はチェックしてみてください。
sponsors
