HTMLのcamera要素、CSSで最上行と最上列を固定表示した表を実装できるなど、Chrome 153で追加された新機能
Post on:2026年9月15日
sponsorsr
先週アップデートされたChrome 153に追加された、CSSとUIに関する新しい機能を紹介します。
今回のアップデートで注目すべきは、最上行と最上列を固定表示した表をCSSで実装できる「単一軸のスクロールコンテナ」、ユーザーのカメラやマイクにアクセスできる<camera>および<microphone>など、Web制作者は要チェックです！
また、今回のChrome 153は2週間ごとのリリースサイクルにおける最初のリリースです。今後は、2週間ごとにアップデートが実施される予定です。
New in Chrome 153
Chrome 153 beta
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
はじめに
9/9にリリースされたChrome 153で3個のCSSとUIに関する新しい機能が追加されました。対象となるChrome 152は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。
以下、その3個の新しいCSSとUIに関する機能を紹介します。
単一軸のスクロールコンテナ
overflowプロパティが拡張され、スクロール可能な値（auto, scroll, hidden）とclipの組み合わせることで、1つの軸のみのスクロールコンテナがサポートされました。
この機能により、position: sticky;が軸ごとに異なる親のスクロールコンテナによって制御されるようになり、デベロッパーはoverflow: clip;を使用している軸上の要素をその位置に固定できるようになります。
この機能はたとえば、最上行と最上列を固定表示にした表に使用します。最上列を.table-wrapperで水平スクロールする要素を固定し、最上行をドキュメントのスクロール要素に固定してみます。
|
1 2 3 4 5 |
<div class="table-wrapper" style="overflow-x: auto;"> <table> … </table> </div> |
これまでのCSSだと、こんな感じで実装していたかもしれません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Scroll horizontally */ .table-wrapper { overflow-x: auto; } /* Sticky top row */ .table-wrapper thead { position: sticky; top: 0; } /* Sticky first column */ .table-wrapper td:first-child { position: sticky; left: 0; } |
しかし、これではうまく機能しません。
原因は、オーバーフローの挙動です。.table-wrapperは、2次元のスクロール要素になってしまいます。そのため、position: sticky;は各軸についてもっとも近い親スクロールを検索し、どちらの軸でも結果として.table-wrapper要素が対象となるからです。
実際の動作は、下記をご覧ください。
「Your browser does not support sticky-per-axis.」が表示される場合は、chrome://flags/で「Experimental Web Platform Features」を有効にしてください。
下方向にスクロールしても最上行が固定されません。
See the Pen
position: sticky;を使った単一軸スクロールコンテナ 1 by coliss (@coliss)
on CodePen.
この問題は、clipを使用しることで2番目の軸がスクロール対象になるのを明示的に防ぐことで解決します。これでposition: sticky;で2つの異なるスクロールコンテナを独立して追跡させることができます。
上記のデモを修正するには、水平方向のスクロール設定とoverflow-y: clip;を組み合わせます。
|
1 2 3 4 |
.table-wrapper { overflow-x: auto; overflow-y: clip; } |
これで.talbe-wrapperはx軸方向のスクロールコンテナとしてのみ機能するようになります。
これにより最上行は.table-wrapperの影響を受けずにy軸方向でドキュメントのスクロール領域に正しく固定されるようになります。そして、列は引き続き水平方向に.wrapper-tableに固定されたままになります。
実際の動作は、下記をご覧ください。
「Your browser does not support sticky-per-axis.」が表示される場合は、chrome://flags/で「Experimental Web Platform Features」を有効にしてください。
See the Pen
position: sticky;を使った単一軸スクロールコンテナ 2 by coliss (@coliss)
on CodePen.
scroll-axis-lockプロパティ
scroll-axis-lockプロパティは、ユーザーのスクロール操作を単一の軸に制限しないようブラウザに指示できる新しいプロパティです。
ブラウザは通常、ユーザーのスクロール操作が垂直方向に比べてある軸で著しく大きな動きが始まった場合、その操作を1つの軸にロックすることがよくあります。多くの場合、この挙動はユーザーが本来意図していなかった垂直方向への意図しないスクロールを防ぐことで、ユーザーエクスペリエンスを向上させます。
しかし、デベロッパーが斜め方向にスクロールできるようにしたい場合、このロックにより、ユーザーはロックが発動しないような角度で操作を開始せざるを得なくなり、多くの場合、デベロッパーが意図したユーザーエクスペリエンスとは異なるものになってしまいます。
cameraおよびmicrophone要素
<camera>および<microphone>は、メディアキャプチャ専用のユーザー操作によって起動される宣言型HTMLコントロールです。これらは<usermedia>MVP要素と同じ基盤メカニズムを採用していますが、1つ重要な違いがあります。それは、これらが単一の機能のみを要求するように設計されていることです。
具体的には、<camera>要素は動画のキャプチャを要求し、<microphone>は音声のキャプチャを要求します。<usermedia>と同様にこれらはブラウザによって制御され、厳格にスタイルが定義されたUIをページに埋め込みます。これにより、権限の確認プロンプトが表示されたりストリームが開始されたりする前に、ユーザーによる明確な意思表示（クリック操作）が確実におこなわれるようになっています。
<camera>および<microphone>要素は、単一機能を利用するユースケース向けのもので、専用のセマンティックなHTMLコントロールを提供します。セキュリティモデルは<usermedia>と同様で、厳格なスタイル規約、組み込みの権限回復パスを維持しつつ、複数のメディアへのアクセスを必要としないデベロッパー向けに、より用途に特化された使いやすいAPIを提供するものです。
上記のHTMLは、下記の通り。
|
1 2 |
<camera> <microphone> |
<camera>と<microphone>には、3つのイベントハンドラが用意されています。
ontrack: アクティベーションが成功し、メディアストリームが利用可能な場合に発生します。oncancel: ユーザーが処理を続行しないことを選択したためにアクティベーションが成功しなかった場合に発生します。onerror: ユーザーの選択以外の理由でアクティベーションが失敗した場合に発生します。
参考:
sponsors
