【海外記事紹介】CSSは2024年にこんなに進化した！Chromeチームが紹介する、CSS新機能紹介記事は必見

12月7日、Chrome DevRelチームが「CSS Wrapped 2024」と題した記事を公開した。この記事では、2024年に追加されたCSSの新機能について詳しく紹介されている。

以下に、その内容をかいつまんで紹介する。
原文では、実際に動作するデモや動画とともにCSSの新機能が紹介されているので、ぜひ原文を参照していただきたい。

1. 新機能の概要

2024年は、CSSにとってさらなる飛躍の年となった。これまでにない新機能が数多く追加され、ウェブ開発者にとって大きな変化をもたらしている。以下は主な新機能の概要だ。

コンポーネント機能の強化
- Field Sizing
- height: auto へのアニメーション
- <details> タグの強化（Exclusive Details, Styleable Details）
- アンカーの位置決め（Anchor Positioning）
インタラクション機能の向上
- カスタムスクロールバーのスタイリング
- ドキュメントをまたぐビューのトランジション
- スクロール駆動のアニメーション
- スクロールスナップイベント
開発者体験（DX）の向上
- バックドロップの継承機能（Backdrop Inheritance）
- light-dark()関数の導入
- CSS変数の新しい指定方法（@property）
- トランジションの開始スタイル（@starting-style）
- ルビの整列方法（ruby-align）
- 文字の描画順序（paint-order）
- CSSOMネストの強化（CSSOM Nested Declarations）

2. コンポーネントの強化

Field Sizing

これまでは、テキスト入力フィールドのサイズをコンテンツに合わせるためにJavaScriptが必要だったが、2024年からはfield-sizing: content;の1行で実現できるようになった。

textarea, select, input {
  field-sizing: content;
}

これにより、すべてのフォント、言語、文字サイズに対応でき、作業の手間が大幅に軽減される。

Animate to height: auto

height: auto へのアニメーションが可能になった。これまではJavaScriptを使う必要があったが、2024年からはCSSだけで実現できる。

:root {
  interpolate-size: allow-keywords;
}

これにより、アニメーションのなめらかさが向上し、エレメントの開閉操作がより直感的になる。

Exclusive

タグに name 属性を追加することで、手軽にアコーディオン機能を実装できるようになった。

<details name="learn-css">
  <summary>Learn CSS</summary>
  <p>コンテンツ1</p>
</details>
<details name="learn-css">
  <summary>Box Model</summary>
  <p>コンテンツ2</p>
</details>

これにより、1つの

を開くと他のが自動的に閉じるようになる。

Anchor Positioning

要素の位置決めが簡単に行える新しい「アンカー」機能が導入された。

.anchor {
  anchor-name: --over-easy;
}

.positioned-element {
  position: fixed;
  position-anchor: --over-easy;
  position-area: block-end;
}

メニューやツールチップ、ダイアログの位置調整が簡単になり、外部ライブラリに頼る必要がなくなった。

3. インタラクションの向上

カスタムスクロールバー

scrollbar-width と scrollbar-color が導入され、ブラウザ間で共通のスタイリングが可能になった。

.scroller {
  scrollbar-color: hotpink blue;
  scrollbar-width: 10%;
}

これにより、::-webkit-scrollbarを使わず、標準化された方法でスクロールバーのスタイルを設定できる。

Cross-Document View Transitions

異なるドキュメント間でもスムーズなトランジションが可能になった。

@view-transition {
  navigation: auto;
}

これにより、シングルページアプリケーション（SPA）を使わなくても、ページ間でのスムーズな遷移が可能になる。

Scroll-Driven Animations

スクロールに応じてアニメーションを制御できる新機能が導入された。

@scroll-timeline my-timeline {
  scroll-offsets: auto;
}

これにより、スクロール位置に基づくアニメーションが簡単に実現できるようになった。

Scroll Snap Events

スクロールスナップ機能に、新しいイベントscrollsnapchangeとscrollsnapchangingが追加された。

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
});

スクロールが完了した瞬間や、スナップ位置の変化に応じてコールバックが呼び出されるようになった。

4. 開発者体験（DX）の向上

Backdrop Inheritance

::backdrop 要素がツリーベースの要素になり、のスタイルを引き継ぐようになった。

dialog::backdrop {
  background: var(--backdrop-color);
}

これにより、のスタイリングが簡単になり、カスタムプロパティが活用できる。

light-dark()関数

light-dark() 関数が導入され、ライトモードとダークモードの切り替えが容易になった。

background-color: light-dark(white, black);

1つの指定で、ライトモードとダークモードの両方に対応できる。

@property 変数の指定

CSS変数の型や初期値を宣言できるようになった。

@property --primary-color {
  syntax: '<color>';
  inherits: true;
  initial-value: blue;
}

これにより、変数の型指定が可能になり、エラーの早期検出が可能になる。

5. まとめ

2024年は、ウェブ開発において革新的な機能が数多く導入された年となった。コンポーネント、インタラクション、開発者体験（DX）のすべてが改善され、開発者の作業が大幅に効率化されるだろう。

詳細はCSS Wrapped 2024を参照していただきたい。