Web制作者は要チェック！ カメラにアクセスできるusermedia要素など、Chrome 151で追加された6個の新機能

先週アップデートされたChrome 151に追加された、HTML/CSSとUIに関する新しい機能を紹介します。

今回のアップデートで注目すべきは、カメラやマイクにアクセスできるusermedia要素、position-anchorの初期値の変更、ルビを強化するruby​​-overhang、ホイールイベントのmomentum属性など、Web制作者は要チェックです！

New in Chrome 151
Chrome 151 beta

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

• はじめに
• 外部デバイスにアクセスできるusermedia要素
• アニメーションとトランジションイベントのアニメーションアクセサ
• CSSのruby​​-overhangプロパティ
• position-anchorの初期値をnormalに変更
• AnimationTriggerの再生メソッドにおける自動巻き戻しの廃止
• ホイールイベントのmomentum属性

はじめに

7/30にリリースされたChrome 151で6個のHTML/CSSとUIに関する新しい機能が追加されました。対象となるChrome 151は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その6個の新しいCSSとUIに関する機能を紹介します。

外部デバイスにアクセスできるusermedia要素

Chrome 151で利用可能になったHTMLのusermedia要素は、カメラやマイクのストリームにアクセスするための権限管理から機能制御までおこなえる新要素です。これによりブラウザからさまざまなハードウェア機能の固有の複雑さと動作をより効果的に処理できるようになります。以前はdevice要素として想定されていました。

このusermedia要素は動画と音声のコントロールに関して段階的にアップデートされる予定で、将来の機能要素のロードマップではcamera要素やmicrophone要素の追加が予定されています。

getUserMedia APIのサポートブラウザ

アニメーションとトランジションイベントのアニメーションアクセサ

AnimationEvent、およびTransitionEventに、読み取り専用のアニメーション属性を追加します。この属性はイベントを発生された関連Animationオブジェクトを返します。

CSSのruby​​-overhangプロパティ

Chrome 151+でCSSのruby​​-overhangプロパティのサポートが追加されました。このプロパティはルビ注釈テキストのオーバーハング動作を制御するためのキーワードとしてauto, spaces, noneを設定できます。

CSSWGの仕様に従い、noneはspacesのエイリアスとして扱われ、オーバーハングは空白文字およびCJKの句読点でのみに制限されます。これにより、予期せぬレイアウトのスペースを防ぎ、可読性を維持します。

ruby​​-overhangのサポートブラウザ

position-anchorの初期値をnormalに変更

CSS Anchor Positioning Module Level 1の仕様および他ブラウザの実装に合わせて、CSSのposition-anchorの初期値をnoneからnormalに変更しました。

これにより、normalに設定した場合は、position-areaがnoneであればnoneとして動作し、それ以外の場合はautoとして機能します。

AnimationTriggerの再生メソッドにおける自動巻き戻しの廃止

AnimationTriggerの再生メソッド（play, play-forwards, play-backwards）を更新し、自動的に巻き戻しがおこなわれないようにしました。関連付けられたアニメーションがすでに最後まで再生されている場合、これらの再生アクションをトリガーしても、アニメーションは再開されません。

ホイールイベントのmomentum属性

ネイティブプラットフォームによって生成されるスクロールの慣性を示すため、ホイールイベントにmomentum属性を追加しました。フリック操作による慣性イベントとトラックパッドでの操作とを区別することで、デベロッパーはスクロール効果をカスタマイズしたり、シミュレートされたフリックイベントを無視したりすることができます。

WheelEvent APIのサポートブラウザ