毎月恒例のweb.devによるブラウザ新機能まとめ。2026年3月は Chrome 146・Firefox 149・Safari 26.4 がそれぞれStableリリースされ、フロントエンド開発に直結する注目機能がいくつか着地した。「CSSでスクロールアニメーションってどうやるの？」「コンテナクエリの名前だけ指定できる？」といった疑問を持っている人はぜひ読んでほしい。
スクロールトリガーアニメーションがCSSネイティブに（Chrome 146）
Chrome 146 で待望の Scroll-triggered animations（スクロール連動アニメーション）が正式サポートされた。これまでIntersection ObserverやJavaScriptのscrollイベントで頑張っていた実装が、CSSだけで宣言的に書けるようになる。
最大のメリットはパフォーマンス。アニメーション処理がワーカースレッドにオフロードされるため、メインスレッドのJavaScriptがブロックされてもアニメーションが滑らかに動く。JavaScript APIも用意されており、Web Animations APIと組み合わせた細かい制御も可能だ。
/* スクロール位置に連動してopacityをアニメーション */
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.card {
animation: fade-in linear;
animation-timeline: view(); /* ビューポートへの進入を監視 */
animation-range: entry 0% entry 50%; /* 進入開始〜50%で完了 */
}これだけでスクロールに合わせた出現アニメーションが完成する。animation-timeline: scroll() を使えばページ全体のスクロール量に比例した進捗バーなども簡単に作れる。
コンテナクエリに「名前だけ指定」が可能に（Firefox 149・Safari 26.4）
Firefox 149 と Safari 26.4 が揃って 名前のみのコンテナクエリ（Optional container query conditions） に対応した。Chrome はすでに先行対応済みのため、これで主要3ブラウザが出揃ったことになる。
従来の @container クエリはサイズや style() などの条件が必須だったが、今回から条件なしで名前だけを指定できるようになった。
/* コンテナを名前付きで定義 */
.sidebar {
container-name: sidebar;
container-type: inline-size;
}
/* 名前だけでマッチ（サイズ条件不要）*/
@container sidebar {
.widget {
font-size: 0.875rem;
padding: 8px;
}
}これにより「このコンポーネントがサイドバーの中にある場合」というコンテキスト依存スタイルが、サイズを問わず適用できる。デザインシステムで「どのコンテナに入るかでスタイルを変えたい」ケースで特に有用だ。
まとめ・所感
今月のアップデートで特に注目したいのはスクロールアニメーションのCSS化だ。JavaScriptへの依存を減らしつつパフォーマンスも改善できる一石二鳥の機能で、ランディングページやポートフォリオサイトの実装が大きく変わりそうだ。コンテナクエリの名前指定もFirefox/Safariへの普及が完了し、実運用に使えるフェーズに入った。詳細は web.dev の原文記事 で各機能のブラウザサポート表や追加リンクが確認できる。