2026年3月のWebプラットフォーム新機能、スクロールトリガーアニメーションとGrid Lanes

web.devの New to the web platform in March が公開された。2026年3月に安定版リリースされたChrome 146、Firefox 149、Safari 26.4で使えるようになった機能の棚卸し。今月はCSSアニメーションとレイアウトに大きな動きがあった。

以前の記事で Chrome 145〜146の変更点を取り上げたが、そこではJPEG-XLやPQC、WebMCPが中心だった。今回はCSSとJavaScriptのプラットフォームAPI寄りの話になる。

Chrome 146: スクロールトリガーアニメーション

Chrome 146最大の目玉が CSS scroll-triggered animations だ。2023年に入ったscroll-driven animationsとは性質が異なる。

scroll-driven animationsはスクロール位置に連動してアニメーションの進行度が0〜100%で変化し、スクロールを止めるとアニメーションも止まる。一方、scroll-triggered animationsは「特定のスクロール位置を通過したら時間ベースのアニメーションを発火する」仕組みだ。スクロールが止まってもアニメーションは最後まで再生される。

両者の違いはこうなる。

項目	scroll-driven	scroll-triggered
進行の制御	スクロール位置に連動	時間ベース（通常のCSSアニメーション）
スクロール停止時	アニメーションも停止	再生を継続
典型的な用途	パララックス、プログレスバー	カード出現、フェードイン
導入バージョン	Chrome 115（2023）	Chrome 146（2026）

Safari 26.4: Grid Lanesでネイティブmasonry

Safari 26.4で display: grid-lanes が入った。Pinterestのようなmasonry（石積み）レイアウトをCSSだけで実現する機能で、これまでmasonry.jsなどのJavaScriptライブラリが必要だったパターンがネイティブ化された。

命名の経緯

この機能の名前は長い議論を経ている。W3C CSS Working Groupでは masonry、collapsed-grid、grid-stack、packed-grid など多数の候補が検討された末、2026年1月に grid-lanes に決着した。「レーン」は交通レーンのメタファーで、高さの異なるアイテムがレーンを流れていく様子を表している。

なお、仕様レベルでは flow-tolerance というプロパティ名も議論されており、アイテムがレーン間をどの程度積極的に移動するかを制御する機能として将来追加される予定だ。

基本的な使い方

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

従来のCSS Gridではすべてのアイテムが行単位で揃うため、高さの異なるアイテムの間に不自然な空白ができていた。Grid Lanesではアイテムが自然な高さを保ったまま、空いているスペースに詰めて配置される。キーボードナビゲーションのアクセシビリティも維持される点が、単純なabsolute配置のJSライブラリとの大きな違いだ。

Safari 26.4のWeb InspectorにはGrid Lanesの可視化機能も追加されており、各レーンの順序番号のオーバーレイやプロパティのオートコンプリートが使える。

ブラウザ間の実装状況としては、ChromiumはChrome 140で display: masonry として先行実装していたが grid-lanes への移行中、Firefoxは2020年から display: grid 上のmasonry実装を持っていたがこちらも grid-lanes への移行作業中だ。全ブラウザで grid-lanes が揃うにはもう少しかかる。WebKitの公式ブログ記事に設計思想と詳細な仕様がある。

Firefox 149の新機能

CloseWatcher

CloseWatcher インターフェースが入った。ダイアログやポップオーバーなど「閉じる」操作を持つカスタムコンポーネントで、デバイスネイティブの閉じるメカニズム（WindowsならEscキー、AndroidならBackボタン）に対応できるようになる。

const watcher = new CloseWatcher();
watcher.addEventListener('close', () => {
  myCustomDialog.hide();
});

Chrome 126で先行実装されていた機能で、Firefoxが追いついた形。これで主要ブラウザのうちSafariを残すだけになった（Safari Technology Previewには入っている）。

Popoverのhint値

popover 属性に新しい hint 値が追加された。従来の auto ポップオーバーを閉じずに表示でき、他の hint ポップオーバーだけを閉じる動作をする。ツールチップのような、メインUIを邪魔しない補助的な情報表示に使える。

<div popover="hint" id="tooltip">
  補足情報がここに入る
</div>

クロスブラウザで使えるようになった機能

Optional Container Query Conditions

Firefox 149とSafari 26.4の両方で、名前だけの @container クエリがサポートされた。サイズや値の条件なしで、コンテナ名だけでマッチする。

.sidebar {
  container-name: sidebar;
}

@container sidebar {
  .card {
    padding: 1rem;
    font-size: 0.9rem;
  }
}

コンポーネントライブラリで「このコンテナの中にいるかどうか」だけを判定したいケースで便利だ。サイズに依存しないスタイルの切り替えが宣言的に書ける。

Iterator.concat()

Chrome 146とSafari 26.4（Firefox 147で先行実装済み）で Iterator.concat() がBaselineになった。複数のイテレータを連結して1つのイテレータとして扱える。

const first = [1, 2, 3].values();
const second = [4, 5, 6].values();

for (const n of Iterator.concat(first, second)) {
  console.log(n); // 1, 2, 3, 4, 5, 6
}

配列の concat() と違い、イテレータなので遅延評価される。大きなデータセットを連結する際にメモリ効率がよい。

Safari 26.4: sizes属性での数学関数

<img> の sizes 属性で min()、max()、clamp() が使えるようになった（Chrome・Firefoxは対応済み）。

<img
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  sizes="min(100vw, 1200px)"
  alt="レスポンシブ画像"
>

これまでメディアクエリと固定値の組み合わせで書いていたレスポンシブ画像のサイズ指定が、1つの式で簡潔に書ける。clamp(320px, 50vw, 800px) のような指定もできる。

Safari 26.4のその他の注目機能

web.devの記事からは外れるが、WebKitのSafari 26.4リリースノートによると、WebTransport（HTTP/3/QUIC経由の低遅延双方向通信）、Keyboard Lock API（フルスクリーンアプリでブラウザ予約キーをキャプチャ）、スレッド化されたscroll-driven animationsなども入っている。Safari側でもscroll-driven animationsのスレッド化が進んでおり、メインスレッドをブロックしないスクロールアニメーションの基盤が整いつつある。

今月の変更で個人的に一番インパクトが大きいのはGrid Lanesだと思う。JSライブラリなしでmasonryができるのは長年の悲願だったし、アクセシビリティまで考慮された設計になっているのがいい。全ブラウザで grid-lanes が揃うタイミングが気になるところだ。