Chrome 127 の新機能

Adriana Jara

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

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

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

CSS font-size-adjust

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

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

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

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

font-size-adjust CSS プロパティを使用すると、代替フォント フォントのフォントサイズを調整してアスペクト値（小文字の高さ÷フォントサイズ）を一定に保ち、使用フォントに関わらずテキストの外観を似たものにすることができます。

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

   font-size-adjust: 0.545;

「このテキストでは、比較的大きな小文字を使用している Verdana フォント（14 px）を使用しています」、「このテキストでは、小さいサイズでは読みにくい Times フォント（14 px）を使用しています」、「このテキストの 14 px Times フォントは、Verdana フォントと同じアスペクト値に調整されているため、小文字は 2 つのフォントで正規化されています

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

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

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

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

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

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

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

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

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

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

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

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

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

その他

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

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

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

  • DevTools のパフォーマンス パネルで、WebSocket メッセージ イベントをキャプチャしてパフォーマンス トレース内に表示できるようになりました。

リリースノート全体

関連情報

主なハイライトのみを記載しています。Chrome 127 のその他の変更については、次のリンクをご覧ください。

登録

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

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