Chrome 127 の新機能

Adriana Jara

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

  • font-size-adjust を使用すると、代替フォントの読みやすさを向上させることができます。
  • ユーザーのアクティベーションが、ピクチャー イン ピクチャーのドキュメントとオープナーの間で伝播されるようになりました。
  • スクロール コンテナがデフォルトでキーボード フォーカス可能になりました。
  • 他にも多くの機能を利用できます。

アドリアナ・ジャラですChrome 127 のデベロッパー向け新機能を見てみましょう。

CSS font-size-adjust

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

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

「This text using the verdana font (14px, the verdana font, that has the ファイルの十分な小文字の小文字が使われています。14px)」というテキスト行「Times フォント（14 ピクセル）を使用しているため、小さいサイズでは読みにくい」など

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

CSS プロパティ「font-size-adjust」を使用すると、代替フォントのフォントサイズを調整してアスペクト値（小文字の高さをフォントサイズで割った値）に一貫性を持たせ、使用するフォントに関係なくテキストが同様に見えるようにします。

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

   font-size-adjust: 0.545;

「このテキストは verdana フォント（14px）を使用し、小文字が比較的大きくなっています」、「これは Times フォント（14px）を使用しているため、小さいサイズでは読みにくい」というテキスト行「This text in 14px Times font in the text in Verdana Font, the same as the same value value to the 小文字フォントが 2 つのフォントで正規化されています。

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

ドキュメントのピクチャー イン ピクチャー: ユーザー アクティベーションの伝播

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

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

これにより、ドキュメントのピクチャー イン ピクチャー ウィンドウでユーザーが有効にした操作が、オープナー ウィンドウ内で使用できるようになります。また、その逆も同様です。この変更により、ドキュメントのピクチャー イン ピクチャー ウィンドウ内のイベント ハンドラは多くの場合、オープナーのコンテキストで実行されることが多く、オープナーのコンテキストがユーザー操作にアクセスする必要があるため、ユーザーの有効化を制御する API の使用がより人間工学的になります。

詳しくは、<video> だけでなく、任意の要素のピクチャー イン ピクチャーをご覧ください。

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

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

今後は、デフォルトでスクローラーがクリック フォーカス可能、およびプログラムでフォーカス可能となります。この変更が行われる前は、tabindex が明示的に 0 以上に設定されている場合にのみ、スクローラー要素をタブフォーカスにできませんでした。

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

ユーザー補助に関するおすすめの方法では、すべての機能をキーボードで利用できるようにすることを推奨しています。キーボードのフォーカス可能なスクローラーのデフォルト設定により、ユーザーは順次フォーカス ナビゲーションを使用してスクローラーに簡単にアクセスできるようになります。

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

その他

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

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

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

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

リリースノートの全文を読む。

関連情報

ここでは、重要なハイライトのみを取り上げます。以下のリンクを確認してください。 追加の変更があります。

登録

最新情報を入手するには、 Chrome Developers YouTube チャンネル 新しい動画が公開されるたびに メールでも通知されます

Adriana Jara と申します。Chrome 127 がリリースされ次第、Chrome の最新情報をお届けします。