Chrome 127 の新機能

必知事項は次のとおりです。

  • font-size-adjust は、代替フォントが読みやすくなるようにします。
  • ユーザーの有効化が、ピクチャー イン ピクチャー ドキュメントとその開いたアプリ間で伝播されるようになりました。
  • スクロール コンテナがデフォルトでキーボード フォーカス可能になりました。
  • 他にも多数の機能があります。

Adriana Jara と申します。Chrome 127 のデベロッパー向けの新機能について詳しく見てみましょう。

CSS font-size-adjust

第 1 候補のフォント ファミリーを使用できず、代替フォントのアスペクト値が大きく異なる場合、サイトの読みやすさが低下する可能性があります。

次の画像は、テキストのサイズが同じでも Verdana フォントと Times フォントの違いを示しています。

「このテキストでは、比較的大きな小文字を使用した Verdana フォント(14 px)を使用しています」と「このテキストでは、小さいサイズでは読みにくい Times フォント(14 px)を使用しています」というテキスト行

サイトが Times フォントに戻ると、読みにくくなります。

font-size-adjust CSS プロパティを使用すると、代替フォント フォントのフォントサイズを調整してアスペクト値(小文字の高さ÷フォントサイズ)を一定に保ち、使用したフォントに関わらずテキストが同じように表示されるようにできます。

次の画像では、font-size-adjust を使用して Verdana フォントと Times フォントの読みやすさを維持しています。

   font-size-adjust: 0.545;

「This text using the verdana font (14px), the use the verdana font, that you use the times font, that you’d you have the Verdana Fonts and the Verdana font isnormalized.

Chrome で font-size-adjust がリリースされたことに伴い、この機能はベースラインに移行し、新たに利用可能になりました。詳しくは、CSS font-size-adjust がベースラインに移行しましたをご覧ください。

ピクチャー イン ピクチャーをドキュメント化: ユーザーの有効化を伝播する

Document Picture-in-Picture API で、ドキュメントのピクチャー イン ピクチャー ウィンドウとその開いたアプリ間でユーザーのアクティベーションが伝播されるようになりました。

ユーザー操作によるアクティベーションの伝播のデモで、ユーザー操作が検出されたときにページの背景色がどのように変化するかを確認できます。ユーザー ジェスチャーは両方のコンテキストで伝播され、両方のウィンドウの背景が変更されます。

これにより、ドキュメントのピクチャー イン ピクチャー ウィンドウでのユーザー操作を、その開いたウィンドウ内で使用できるようになります。この変更により、ユーザー操作による制限付き API の使用がより人間工学的に優れたものになります。ドキュメントのピクチャー イン ピクチャー ウィンドウのイベント ハンドラは、実際には開いたアプリのコンテキストで実行されるため、開いたアプリのコンテキストはユーザー操作にアクセスする必要があります。

詳しくは、<video> 以外の要素のピクチャー イン ピクチャーをご覧ください。

キーボードでフォーカス可能なスクロール コンテナ。

スクロール コンテナをキーボードでフォーカス可能にすることは、すべてのユーザーがスクロール コンテナとスクロール コンテナ内のコンテンツにアクセスしやすくなるため重要です。

今後、スクロールバーはデフォルトでプログラマティック フォーカス可能になります。この変更前は、スクローラー要素が Tab キーでフォーカスされるのは、tabIndex が明示的に 0 以上に設定されている場合のみでした。

この動作は、スクローラーにフォーカス可能な子がない場合にのみ発生します。たとえば、スクローラーにすでにボタンが含まれている場合、Tab キーによるフォーカス移動はスクローラーをスキップし、ボタンに直接フォーカスします。

ユーザー補助のベスト プラクティスでは、すべての機能をキーボードで使用できるようにすることを推奨しています。デフォルトでキーボードでフォーカス可能なスクロールを使用すると、ユーザーはシーケンシャル フォーカス ナビゲーションを使用してスクロールに簡単にアクセスできます。

この変更は、変更によって発生する問題をモニタリングできるように、ユーザーに対して段階的に有効にされます。そのため、一部のユーザーにはバージョン 130 以降までこの機能が有効にならない場合があります。

詳しくは、キーボードでフォーカス可能なスクロールバーをご覧ください。

その他

もちろん、他にもたくさんあります。

  • メインフレームと同一オリジンの iframe で、同一ドキュメントのビューを同時に遷移できるようになりました。

  • CSS コンテンツから生成された代替テキストで、複数の引数をサポートできるようになりました。

  • DevTools の [Performance] パネルで、WebSocket メッセージ イベントがキャプチャされ、パフォーマンス トレースに表示されるようになりました。

リリースノート全体

関連情報

ここでは、重要なハイライトのみを取り上げます。Chrome 127 のその他の変更点については、次のリンクを確認してください。

登録

最新情報を入手するには、Chrome Developers YouTube チャンネルチャンネル登録してください。新しい動画が公開されるたびに、メール通知が届きます。

Adriana Jara と申します。Chrome 127 がリリースされ次第、Chrome の新機能についてお知らせします。