2024年に注目すべきCSSの新機能

CSS, HTML, JavaScript

この数年でCSSは大きな進化を遂げてきました。かつてはJavaScriptやSassに頼っていたコーディング技術やスタイル管理も、今ではCSSだけで実現可能になっている部分もあります。また、ブラウザのサポート状況は日々改善されており、便利なCSS技術を実務レベルで活用できるようになってきていると感じます。
この記事では、CSSの新機能を紹介し、CSSの将来的な可能性について探っていきたいと思います。

Chrome 123 に追加されたCSS新機能（2024年3月20日公開）

CSS関数：light-dark()

CSSプロパティ毎にライトモードもしくはダークモードのスタイルを適用することができます。
以下の例では、ユーザーがダークモードを選択した場合、要素（ .target）の背景がグレーになります。
html {
  color-scheme: light dark;
}
.target {
  background-color: light-dark(white, gray);
}

CSSプロパティ：align-content

アイテムの縦方向の配置を指定するために使用していた align-contentプロパティについてです。
以前までは、フレックスボックスレイアウト（ display: flex）やグリッドレイアウト（ display: grid）のみサポートされていましたが、ブロックレイアウト（ display: block）やテーブルレイアウト（ display: table-cell）においてもサポートされています。

CSSプロパティ：field-sizing

以下のように、 textarea要素に field-sizing: content;を適用するだけで、フォームのサイズが自動で拡張されます。
<textarea class="textarea"></textarea>
 
<style>
  .textarea {
    field-sizing: content;
    width: 300px;
  }
</style>

上記のように、CSS新機能が提供されていますが、まだ完全にサポートされていないブラウザのバージョンも多いため、実際に使用する際はブラウザの互換性に十分注意する必要があります。

Sassの代替手段になるCSS

CSSの変数

よく使用する値を変数として定義し、使い回す機能はSassの魅力の一つでしたが、CSSでも変数を定義できるようになっています。
:root {
  --main-color: #f54687;
}
p {
  color: var(--main-color);
}

CSSのネスト

CSSのネスト（入れ子）は、ほぼ全てのブラウザで広範囲にサポートされ、グローバルでの使用率も86%を超えています。この数年でサポート範囲が大幅に拡大した機能の一つです。
.parent {
  .child {
    color: #f54687;
  }
}

JavaScriptの代替手段になるCSS

疑似クラス：:has

以前はjQueryの .has()メソッドを使用して特定の要素の存在を確認していましたが、現在はCSSの疑似クラス :hasを使用して同様のことが実現可能になっています。
<div class="parent">
  <p>childクラスがなければ背景が黒</p>
</div>
<div class="parent">
  <p class="child">childクラスがあれば背景がピンク</p>
</div>
 
<style>
  .parent {
    background: #000;
    color: #fff;
  }
  .parent:has(> .child) {
    background: #f54687;
  }
</style>

CSSプロパティ：scroll-behavior

アンカーリンクをクリックした際のスムーススクロールも、現在はCSSだけで実現できるようになりました。
<nav class="nav">
  <a href="#anchor1">コンテンツ1</a>
  <a href="#anchor2">コンテンツ2</a>
  <a href="#anchor3">コンテンツ3</a>
</nav>
<section class="section" id="anchor1">
  コンテンツ1
</section>
<section class="section" id="anchor2">
  コンテンツ2
</section>
<section class="section" id="anchor3">
  コンテンツ3
</section>
 
<style>
  html {
    scroll-behavior: smooth;
  }
  .nav {
    display: flex;
    gap: 0 10px;
    height: 60px;
  }
  .section {
    height: 500px;
  }
</style>

感想

上記のように、CSSで出来ることの幅が広がってきていると感じます。実際のサービスに組み込む際にはブラウザの互換性にまだ懸念がありますが、今後の進化に注目していきたいと思います。

参考

Chrome for Developers

CSS, HTML, JavaScript