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を参照していただきたい。
I love how entertaining programming languages are. Discover google doodle baseball new things and learn new abilities by doing research. My goodness, analysis is so cool!
How fun programming languages are. Explore and research to learn and improve new coreball skills. How awesome is analysis!