2026年9月にリリースされた Google Chrome 153 では、Web開発をさらに快適にする強力なCSS機能や新しいUI要素が多数追加されました。ブログ記事としてそのまま活用できるよう、注目の新機能を分かりやすくまとめました！
1. CSSだけでスッキリ！単一軸スクロールコンテナ (overflow: scroll clip)
これまで、表（テーブル）などで縦方向または横方向の片方だけをスクロールさせたい場合、意図せずもう一方の軸までスクロールコンテナ化してしまったり、position: sticky の挙動が複雑になったりする課題がありました。
Chrome 153で導入された新しい構文では、overflow プロパティが拡張され、clip とスクロール可能な値（scroll など）を組み合わせて指定できるようになりました。
- 記述例:
overflow: scroll clip; - メリット: 片方の軸だけを完全にクリップしつつ、もう一方の軸のみを綺麗にスクロールさせることができます。軸ごとに異なる祖先スクロールコンテナで
position: stickyを正確に制御できるため、複雑なデータ表のレイアウト実装が非常にスマートになります。
2. 斜めスクロールを意のままに：scroll-axis-lock プロパティ
スマートフォンのタッチ操作やPCのトラックパッドで斜め方向にスクロールしようとした際、ブラウザが勝手に「縦方向」または「横方向」のどちらかへ固定（ロック）してしまう現象に悩まされたことはありませんか？
新しく追加された scroll-axis-lock プロパティを使うと、ブラウザによるこの軸固定の挙動をコントロールできるようになります。
- マップやキャンバス、自由な斜めスクロールが求められるリッチなUIにおいて、ユーザーの意図通りにスムーズな斜め方向のスクロール体験を提供しやすくなりました。
3. カメラ・マイクへのアクセスがぐっと手軽に！専用のHTML要素
ユーザーのメディアアクセス（カメラやマイク）を扱う場合、従来は複雑なJavaScript（navigator.mediaDevices.getUserMedia）とカスタムUIの構築が必要でした。
Chrome 153では、これらを宣言型で扱える専用のHTML要素（<camera> や <microphone> などのケーパビリティ要素）のサポートが進行しています。
- メリット:
- ブラウザ制御による安全で統一されたUIが自動で埋め込まれます。
- ユーザーのクリック（強い意図を示すシグナル）を確実に取得した上で権限プロンプトがトリガーされるため、セキュリティ面と実装の手軽さが両立されています。
- マルチメディアの簡単な埋め込み用途において、ボイラープレートコードを大幅に削減できます。
4. その他の見逃せない便利機能・アップデート
Chrome 153には、CSSやUI以外にも開発者にとって嬉しい機能が追加されています。
- JavaScript
Iterator.prototype.join()の追加:配列でおなじみのjoin()メソッドがイテレータでも使えるようになりました。任意の区切り文字でイテレータの内容を簡単に1つの文字列にまとめられます。 - オープンな空間オーディオ形式「IAMF」のデコード対応:MSEを介してHTMLメディア要素でIAMFコンテナの再生が可能になり、複雑なJavaScriptのチャンネル制御なしで立体的な3D音響を実装できます。
- WebGPU の
buffer_view機能:WGSL（WebGPU Shading Language）において、単一の変数を複数の論理変数に分割したり、データを複数の型として柔軟に再解釈できるようになりました。
次回は「単一軸スクロールコンテナ」の実装事例などについてお話しします。
