2024年から2025年にかけて、CSSは大きな進化を遂げており、開発者のワークフローを改善し、JavaScriptへの依存を減らし、より動的で保守性の高いデザインを可能にする多くの新機能が登場しています。
この記事では、注目の新機能の概要と、実際のコード例を紹介します。
レイアウトとスコーピング
1. コンテナクエリ (@container)
レスポンシブデザインの考え方を根底から変える機能です。これまでは画面（ビューポート）の幅に応じてスタイルを変更していましたが、コンテナクエリを使うと、親要素の幅に応じて子のスタイルを変更できます。
使用例： サイドバーとメインコンテンツの両方に配置される可能性のあるカードコンポーネントを考えます。
<div class="container">
<div class="card">...</div>
</div>/* まず、コンテナとなる要素を定義します */
.container {
container-type: inline-size;
container-name: card-container;
}
/* コンテナの幅が400pxより大きい場合にカードのレイアウトを変更 */
@container card-container (min-width: 400px) {
.card {
display: flex;
align-items: center;
}
}これで、このカードは配置された場所の幅に応じて、自身のレイアウトを最適化できます。
2. スコープ (@scope)
コンポーネントベースの開発で非常に役立ちます。特定のDOMの範囲に限定してスタイルを適用できるため、意図しないスタイル汚染を防ぎます。
使用例： 特定のメディアカード内だけで<img>と<h2>のスタイルを上書きします。
<div class="media-card">
<img src="..." alt="">
<h2>Title</h2>
</div>
<div>
<img src="..." alt="">
<h2>Another Title</h2>
</div>@scope (.media-card) {
img {
border-radius: 8px;
}
h2 {
color: blue;
}
}
/* .media-cardの外にあるimgやh2には適用されない */3. CSSネスティング
Sassのようなプリプロセッサなしで、セレクタを入れ子にして記述できます。コードの可読性と保守性が向上します。
使用例：
/* 従来の書き方 */
.card { ... }
.card .card-title { ... }
.card .card-body { ... }
.card .card-body a { ... }
.card .card-body a:hover { ... }
/* ネスティングを使った書き方 */
.card {
...
.card-title { ... }
.card-body {
...
a {
...
&:hover { ... }
}
}
}カラーとタイポグラフィ
4. color-mix()
2つの色を特定の色空間で混ぜ合わせ、新しい色を作成します。
使用例： ブランドカラーと白を混ぜて、少し薄い色合いを作成します。
.element {
/* 青色を70%、白色を30%で混ぜる */
background-color: color-mix(in srgb, blue 70%, white 30%);
}5. light-dark()
OSのライト/ダークモード設定に応じて、2つの色のうちどちらか一方を適用します。
使用例： ダークモード対応のテキストカラーを一行で指定します。
:root {
color-scheme: light dark;
}
body {
/* ライトモードでは黒、ダークモードでは白 */
color: light-dark(black, white);
}6. text-wrap: balance
複数行にわたるテキスト（特に見出し）の行の長さを均等に近づけ、見た目のバランスを整えます。
h1 {
text-wrap: balance;
}インタラクティビティとパフォーマンス
7. View Transitions API
JavaScriptを使わずに、ページの状態変化（例：サムネイルをクリックして詳細ページに遷移）を滑らかなアニメーションで表現します。
使用例（概念）：
// トランジションをトリガーするJavaScript
document.startViewTransition(() => {
// DOMの変更処理
updateTheDOM();
});/* トランジション中の古い画像と新しい画像のスタイルを指定 */
::view-transition-old(image-tag) {
animation: slide-out 0.5s ease-out;
}
::view-transition-new(image-tag) {
animation: slide-in 0.5s ease-in;
}8. スクロール駆動アニメーション
スクロールの進行度に応じてアニメーションを制御します。
使用例： スクロールするとプログレスバーが伸びるアニメーション。
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
#progress-bar {
transform-origin: 0 0;
/* scroll()関数でスクロールをアニメーションのタイムラインに紐付ける */
animation: grow-progress linear;
animation-timeline: scroll();
}その他の注目機能
9. :has() セレクタ
「親セレクタ」とも呼ばれ、特定の子孫要素を持つ要素にスタイルを適用できます。
使用例： 必須項目(required)のinputを持つ<label>のテキストを太字にする。
label:has(input[required]) {
font-weight: bold;
}10. @property
型付けされたCSSカスタムプロパティを登録できます。これにより、グラデーションなど、これまで直接アニメーションさせることが難しかったプロパティにアニメーションを適用できます。
使用例： グラデーションの角度をアニメーションさせる。
@property --gradient-angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.gradient-box {
background: linear-gradient(var(--gradient-angle), #f00, #00f);
transition: --gradient-angle 1s;
}
.gradient-box:hover {
--gradient-angle: 360deg;
}これらの機能の多くはブラウザのサポートが広がっていますが、本番環境で使用する前にはCan I use…などで互換性を確認することをお勧めします。
