LIFULLAdvent Calendar 2024

株式会社LIFULL

2024年に追加された中で最も使用されたCSSの新機能トップ5とワースト5まとめ

Posted at 2024-12-08

今年も残り1ヶ月を切りました。

月日が経つのは早いものですが、CSSの進化も早く、今年は50以上の機能が追加されました。

State of CSS 2024

2024年のCSSの現状調査を行った結果をまとめた「State of CSS 2024」を紹介します。
State of CSS 2024とは、State of CSSで行われたアンケートの2024年バージョンです。

そのアンケートの中に、2024年に追加されたCSSの新機能それぞれに

知らない
知っている
使ったことがある

のいずれかを回答してもらうというものがあり、それらをまとめたものがState of CSS 2024: Featuresです。

全部で60個もありますが、どの機能が最も使われていて、どの機能が全然使われていない（もしくは知られていない）かが一目瞭然です。

まずはそのランキングを発表し、トップ5とワースト5について、詳細にその機能を見ていきたいと思います。

トップ5

まずはトップ5から見ていきましょう。

全体的に使用頻度が高い機能なので、皆さんも使ったことや知っている機能が多いと思います。

5位: `scroll-behavior`

まず5位はscroll-behaviorです。

ページ内リンクなどでスクロールの動きをスムーズにするプロパティですね。

今まではJavaScriptでスクロールしたい対象までの座標を取得してwindow.scrollメソッドで設定していましたが、このプロパティを指定すればそれだけでスムーススクロールが実現します。

See the Pen Qiita: State of CSS 2024 Rank 5th Scroll Behavior by Yoruaki (@yoruaki) on CodePen.

私もよく使っています。

固定ヘッダーなどがある場合は、scroll-margin-topなども併用するといいですね。

4位: `aspect-ratio`

4位はaspect-ratioです。

指定されたアスペクト比を保ったまま拡大・縮小してくれるプロパティです。

以下は16:9のアスペクト比で画像を3つ並べたサンプルです。

See the Pen Qiita: State of CSS 2024 Rank 4th Aspect Ratio by Yoruaki (@yoruaki) on CodePen.

画像自体は指定するアスペクト比になっていない場合が多いので、別途object-fitなどで要素内にどのように表示させるか指定してあげるとよいでしょう。

🥉3位: Intrinsinc Sizing Keywords

3位はサイズに関するmin-content、max-content、fit-contentのキーワードでした。

個人的にはこのfit-contentが使用頻度第1位で、公私ともによく使っていた記憶があります。

See the Pen Qiita: State of CSS 2024 Rank 3rd Intrinsic Sizing Keywords by Yoruaki (@yoruaki) on CodePen.

上記のサンプルは、2番目以降の段落にwidth: fit-content;を指定しています。

さすがにこのサンプルだとシンプルすぎて分かりにくいかもですが、要素のサイズをその要素自身にフィットした大きさにしたい、という場面はままあると思います。

🥈2位: `:has()`

2位は:has()です。

この擬似クラス関数の登場に、多くのフロントエンドエンジニアが歓喜したことでしょう。
主にチェックボックス関連の実装で、その便利さを実感できます。

:has()がない時代の課題

以下のようなチェックボックスのHTMLを考えてみます。

<label>
    <input type="checkbox">チェックボックス
</label>

これまで、input要素がチェックされたかどうかを、親要素であるlabelが知る術がありませんでした。
また、inputは空要素のため、チェック状態を子要素に伝えることもできません。

結果として、以下のように兄弟要素の状態を利用してスタイルを調整する構成が一般的でした。

HTML

<div>
    <input type="checkbox" id="example">
    <label for="example">チェックボックス</label>
</div>

CSS

label {
    cursor: pointer;
}

input:checked + label {
    background-color: palegreen;
}

このような方法ではHTMLの構成に依存するため、柔軟性に欠ける実装となりがちです。
あるいは、JavaScriptを利用して親要素にclass属性（例えばisCheckedなど）を付与するなど、別途の工夫が必要でした。

`:has()`の登場で実現した柔軟な実装

:has()の登場により、親要素が子要素の状態を直接参照できるようになり、HTMLの構成や実装パターンにおける選択肢が大幅に広がりました。

CSS

label:has(:checked) {
    background-color: palegreen;
}

これにより、JavaScriptを用いたclass属性の付与や、構成の制約を気にする必要がなくなります。

See the Pen Qiita: State of CSS 2024 Rank 2nd Has Selector by Yoruaki (@yoruaki) on CodePen.

フォーム関連はJavaScriptや他の言語と絡むことも多いので、スタイルに関してはなるべくシンプルな構成にしたほうが、見通しも良くなってその後の修正やリファクタもやりやすくなると思います。

🥇1位: CSS Filter Effects

堂々の第1位は、Filter Effectsでした！
これはfilterプロパティで使われるblur()やcontrast()のことで、画像、背景、境界の描画を調整するためによく使われます。

See the Pen Untitled by Yoruaki (@yoruaki) on CodePen.

これらのキーワードが使えるbackdrop-filterプロパティも、7位にランクインしてますね。

ワースト5

ワースト5というと、ちょっと悪い印象になりますね…。

改めまして、最も使用頻度の低い（もしくは知られていない）新機能トップ5を見ていきましょう。

ここから先は未知の領域で、ここに登場する5つの新機能は、私はすべて知りませんでした😇

56位: Sign-Related Functions

56位はsign()関数でした。

sign()関数は、引数の正負を表す符号関数です。

引数の結果が正だったら1、負だったら-1、0だったら0（+0 or -0）、それ以外だったらNaNを返します。

引数にはcalc()やclamp()などの数学関数や数式が使えます。

CSS

/* 正なので 1 を返す = margin-top: 20px; */
.example1 {
    margin-top: calc(sign(10px + 20px) * 20px; 
}

/* 負なので -1 を返す = margin-top: -20px; */
.example2 {
    margin-top: calc(sign(10px - 20px) * 20px; 
}

/* ゼロなので 0 を返す = margin-top: 0px; */
.example1 {
    margin-top: calc(sign(10px - 10px) * 20px; 
}

以下サンプルです。

ボタンで1emのサイズを1pxずつ増減してみてください。
計算結果（1em - 16px）の差分が正なら右に20px、負なら左に20px、ゼロなら中央に移動します。

2024年12月9日現在、SafariとFirefoxが対応しています

See the Pen Untitled by Yoruaki (@yoruaki) on CodePen.

CSSではゼロは0なので、positive zeroとnegative zeroという概念があることを初めて知りました。

57位: `prefers-reduced-data`

ユーザーがページのレンダリングに使われるデータ通信量が、より少ない代替コンテンツを提供することをリクエストしているかどうかを検出するメディア特性です。

とりあえずデータ通信量を減らしたいユーザーがいたら、それに合わせて表示や読み込むデータを変える、みたいな使い方ができます。

CSS

.image {
    background-image: url("images/heavy.jpg");
}

@media (prefers-reduced-data: reduce) {
    /* Save-Data: On */
    .image {
        background-image: url("images/light.jpg");
    }
}

サンプルコードでは、データ通信量を減らす設定になっているとき（prefers-reduced-data: reduce）はimages/light.jpgを読み込み、それ以外はimages/heavy.jpgを読み込みます。

ちなみにno-preferenceは何も設定されていない状態です。

以下のサンプルでは、何も設定がされていない場合、赤い四角が表示されます。

データ通信量を減らす設定にしている（HTTPヘッダーのSava-DataがOnになっている）場合、青い四角が表示されます。

See the Pen Qiita: State of CSS 2024 Rank 57th Prefers Reduced Data by Yoruaki (@yoruaki) on CodePen.

まぁサンプルを置いたはいいですが、2024年12月9日現在どのブラウザも対応していません。

🤔58位: `view-timeline`

view-timelineは、スクロールに基づくアニメーションをタイムラインとして制御するためのプロパティです。

このタイムラインは、対象となるスクロール可能な要素が初期位置に表示されると0%となり、反対側の端に達すると100%になります。

view-timelineは一括指定プロパティで、他にview-timeline-nameとview-timeline-axisがあります。

view-timeline-nameはタイムラインに名前をつけます。初期値はnoneなので特に考えなくてもいいです。

view-timeline-axisはスクロールバーの方向を指定するために使用します。
blockは縦方向、inlineは横方向です。

以下のサンプルは、スクロールの進行に応じて赤い四角から大きい青い四角にアニメーションします。

See the Pen Qiita: State of CSS 2024 Rank 58th View Timeline by Yoruaki (@yoruaki) on CodePen.

スクロールに基づくアニメーションをコントロールできるため、ユーザーがページを移動する際に視覚的な変化をもたらし、インタラクティブ性を向上させることができるかもしれませんね。

😨59位: `forced-colors`

ユーザーエージェントが強制カラーモードを有効にしているかどうかを検出するためのメディア特性です。

強制カラーモードの例としては、Windowsのハイコントラストモードがあります。

ここで注意したいのが、この強制カラーモードには、いわゆる「ライトモード」や「ダークモード」は含まれないということです。そっちはprefers-color-schemeを使いましょう。

ではそんなprefers-color-schemeとの使い分けですが、以下のような場合が考えられます。

例えば、border: noneのスタイルをあてたボタンがあった場合、それぞれライト・ダークモードでは見えていたボタンと背景の境界が、強制カラーモードだと見えなくなってしまいます。
via: 強制カラーモードに対するメディアクエリforced-colorsの使い方

そんなときに、強制カラーモード時にborderを指定してあげるという使い方があります。

CSS

@media (forced-colors: active) {
    button {
        border-width: 3px;
        border-style: dashed;
    }
}

以下のサンプルを、強制カラーモードにして確認してみてください。
デフォルトボタンはボタンと背景の境界が分からなくなってしまいますが、対応ボタンは太さ3px、dashedスタイルのボーダーが表示され、ボタンを認識できるかと思います。

Mac環境の人は、Edgeの開発者ツールでforced-color: activeのシミュレーションができます。

See the Pen Untitled by Yoruaki (@yoruaki) on CodePen.

一応こんな表示になります。

いろいろ調べてみたのですが、現状ハイコントラストモードはWindowsにしかなく、MacやAndroidなどでもアクセシビリティ観点で似た機能はありつつも、ライトモード、ダークモード含めforced-colorに影響を与えるものではないため、使い所が限定的だなと感じました。

😱60位: `hanging-punctuation`

最も使用頻度の低かった新機能第1位は、hanging-punctuationでした！
それもそのはず、回答者の実に84.7%の人が聞いたこともないと回答しています。
かくいう私も全然聞いたこともなかったです。

直訳すると「ぶら下がり句読点」ですが、まず、ウェブの文章には行頭に句読点が来ないようにする禁則処理というものがあります。

例えば『Qiitaの思想』より以下の文章。

Qiitaはエンジニアにとって
再利用性・汎用性の高い他の
ユーザーにとっても役にたつ
、学びのある情報が多く集ま　←　ここ
っている場であり続けたいと
考えています。

禁則処理が行われると以下のようになります。

Qiitaはエンジニアにとって
再利用性・汎用性の高い他の
ユーザーにとっても役にた　　←　ここ
つ、学びのある情報が多く集
まっている場であり続けたい
と考えています。

今回の機能は、上記のように直前の文字を改行することで行頭に句読点などの禁則文字が来るのを防ぐのではなく、直前の行の最後に句読点を持っていきます。

Qiitaはエンジニアにとって
再利用性・汎用性の高い他の
ユーザーにとっても役にたつ、　←　ここ
学びのある情報が多く集まっ
ている場であり続けたいと考
えています。

これを「ぶら下げ組み」というそうです。

で、それを実現するのがforce-endという値です。

以下にサンプルを置いておきます。1番目の段落は普通のp要素です。横幅を変えれば普通に禁則処理が走ります。

2番目の段落には

CSS

p {
    hanging-punctuation: force-end;
}

を指定しています。
横幅を変えると、1番目の段落とは違った動きになると思います。

2024年12月9日現在、Safariのみ対応しています。

See the Pen Qiita: State of CSS 2024 Rank 60th Hanging Punctuation by Yoruaki (@yoruaki) on CodePen.

一応こんな感じの動きになります。

参考: CSSでの句読点ぶら下げ: hanging-punctuationプロパティ

まとめ

2024年に追加された中で最も使用されたCSSの新機能トップ5とワースト5をまとめてみました。

皆さんはどの機能をすでに使っていますか？
もしくは初めて知った新機能はありましたか？

CSSの進化は早く、次々に新しい機能が登場していますが、すべてをキャッチアップする必要はなく、適材適所で便利な部分は使いつつも、大切なのはユーザーにどんな価値を提供できるかだと思っています。

新しい機能に歓喜したり困惑したりしつつ、来年も素晴らしいサイトの実装に邁進していきましょう。

最後になりますが、この記事を書くにあたって、特にワースト5のまとめを書くのが調査も含めて一番時間がかかりました😂

これまでに情報を調べてウェブに残してくれた先人たちに感謝します。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

2024年に追加された中で最も使用されたCSSの新機能トップ5とワースト5まとめ

State of CSS 2024

ランキング

トップ5

5位: scroll-behavior

4位: aspect-ratio

🥉3位: Intrinsinc Sizing Keywords

🥈2位: :has()

:has()がない時代の課題

:has()の登場で実現した柔軟な実装

🥇1位: CSS Filter Effects

ワースト5

56位: Sign-Related Functions

57位: prefers-reduced-data

🤔58位: view-timeline

😨59位: forced-colors

😱60位: hanging-punctuation

まとめ

5位: `scroll-behavior`

4位: `aspect-ratio`

🥈2位: `:has()`

`:has()`の登場で実現した柔軟な実装

57位: `prefers-reduced-data`

🤔58位: `view-timeline`

😨59位: `forced-colors`

😱60位: `hanging-punctuation`