CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
Post on:2023年9月7日
sponsors
CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ（自動で最新版にアップデートするブラウザ）となり、モダンCSSの機能がたくさん使用できるようになりました。
2023年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2023」を紹介します。今年は例年より早いですね。
State of CSS 2023は、State of CSSでおこなわれたアンケートの調査結果（9,190人分）をまとめたものです。
まずは、アンケートに回答された人の属性。
世界中の人がアンケートに参加しており、日本人も参加しています。年齢は25-44才が多く、性別は男性が多めです。
アンケートに回答された人のCSSの経験年数は11-20年がもっとも多く、6-10年、3-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など
2023年現在、すべてのブラウザにサポートされています。
論理プロパティのサポートブラウザ
コンテナクエリは、今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できるコンテナクエリです。
|
1 2 3 4 5 |
@container (min-width: 300px) { .container { } } |
2023年現在、すべてのブラウザにサポートされています。
コンテナクエリのサポートブラウザ
small, large, dynamic ビューポート単位
ビューポートの新しい単位のおかげで「iOSのSafariで100vh」における問題を簡単に解決できます。ここ1年でブラウザのサポートも良好になったので、使用する機会も増えてきています。
|
1 2 3 |
body { height: 100dvh; } |
2023年現在、すべてのブラウザにサポートされています。
small, large, dynamic ビューポート単位のサポートブラウザ
これを待ち望んでいた人も多いと思います。ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになりました。
|
1 2 3 4 5 6 7 |
@media (min-width: 400px) { // 幅が400ピクセル以上のスタイル } @media (width >= 400px) { // 幅が400ピクセル以上のスタイル } |
2023年現在、すべてのブラウザにサポートされています。
メディアクエリの範囲指定のサポートブラウザ
accent-colorプロパティは、たった1行のCSSでフォームの複数の要素に強調色を設定できます。
|
1 2 3 |
:root { accent-color: deeppink; } |
2023年現在、すべてのブラウザにサポートされています。
accent-colorプロパティのサポートブラウザ
scroll-snapプロパティを使用すると、ユーザーがスクロールを終了した後にビューポートを特定の要素または場所にスナップさせることができます。
|
1 2 3 |
.container{ scroll-snap-type: mandatory; } |
2023年現在、すべてのブラウザにサポートされています。
scroll-snapプロパティのサポートブラウザ
line-clampプロパティは、テキストを指定した行数で省略します。
|
1 2 3 4 |
.container p{ display: -webkit-box; -webkit-line-clamp: 3; } |
2023年現在、すべてのブラウザにサポートされています。
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; } } |
2023年現在、すべてのブラウザにサポートされています。
prefers-reduced-motionのサポートブラウザ
CSSの比較関数とは、最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、Webページやスマホアプリの実装にすでに使用している人も多いと思います。
|
1 2 3 4 5 6 7 |
.element { width: min(50%, 500px); } p{ font-size: clamp(1rem, 0.5rem + 1.6vw, 1.5rem); } |
- CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説
- レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説
- CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator
2023年現在、すべてのブラウザにサポートされています。
min(), max(), clamp()のサポートブラウザ
:has()疑似クラスは、パラメータとして渡されたセレクタのいずれかが少なくとも一つの要素に一致する場合に、その要素を表します。簡単に言うと、今までセレクタは子や孫を設定できましたが、:has()疑似クラスは親を設定できます。
|
1 2 3 |
.container:has(p) { /* pがある.containerのスタイル */ } |
- レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
- CSSの:has()疑似クラスの便利な使い方のまとめa>
- CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる
2023年現在、Firefoxを除くすべてのブラウザにサポートされています。
:has()疑似クラスのサポートブラウザ
:where()疑似クラスは、詳細度を0にします。特に、スタイルを上書きする時に役立ちます。
|
1 2 3 |
:where(html) { color: #333333; } |
- CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！
- CSSの新しいセレクタが便利！複数のセレクタを1つにまとめられる:is()、さらに詳細度を0にする:where()の使い方
- CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css
2023年現在、すべてのブラウザにサポートされています。
:where()疑似クラスのサポートブラウザ
ついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになりました。CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。複雑なアニメーションに使用するJavaScriptを減らしたり、要素を曲線に配置するレイアウトなどもCSSで実装できます。
|
1 2 3 |
.dot { animation-delay: calc(sin((var(--index) / var(--count) * 45deg) * -1s); } |
- 2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！
- CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説
- CSSの三角関数で斜めのレイアウトを実装するテクニック
2023年現在、すべてのブラウザにサポートされています。
sin()のサポートブラウザ
SassなどのCSSプリプロセッサの機能の1つであるスタイルルールのネスト（入れ子）が言語として組み込まれました。CSSのネストはそれらとは仕様が少し異なりますが、ネストが使用できるようになるのは嬉しいことですね。
|
1 2 3 4 5 6 7 8 9 10 11 |
.nesting { color: hotpink; > .is { color: rebeccapurple; > .awesome { color: deeppink; } } } |
2023年現在、Firefoxを除くすべてのブラウザにサポートされています。
※Firefox 117からサポート予定。
CSSのネストのサポートブラウザ
レッドは否定的（興味がない・もう使わない）で、ブルーが肯定的（興味がある・また使いたい）です。Twilwind CSSの人気が引き続き高い中、Open Propsがここ1年で伸びてきました。Bootstrap, Bulma, Foundationなどのフレームワークは人気に陰りが見えてきました。
- これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
- Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
レッドは否定的で、ブルーが肯定的です。2022年と比較すると伸びがなくなりましたが、CSS Modules, Styled Componentsが注目されています。
ユーティリティで使用されているのは、Prettierが頭一つ抜けています。
制作時に使用するブラウザは、Chromeがもっとも多く、続いてFirefox, Edgeとなっています。スマホ環境だと、Safari iOSがもっとも多いです。
テストしているデバイスは、デスクトップ、スマホ、タブレットの順になっています。キーボード操作での確認、スクリーンリーダーでの確認、色覚障害の確認なども増えてきました。
ブラウザのサポートが十分でないため、使用できないCSSの機能
すべてのブラウザにサポートされていないCSSの機能が上位ですね。また、ブラウザ的にはSafariへの対応がネックになっているようです。
最後に、2023年にもっとも目立ったものを。
前年比で使用実績がもっとも増えた機能は:has()、リピートユーザーの割合がもっとも高いテクノロジーはOpen Props、もっとも多くのコメントがあった機能はsubgrid、もっとも多くの書き込み回答があった機能はPanda、でした。
Open Propsは当ブログでも話題になりました。
これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
sponsors
