このページは Cloud Translation API によって翻訳されました。

Chrome 129 の新機能

Pete LePage

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

長いタスクでyield を使用してパフォーマンスを向上させることができます。
固有のサイズを持つ要素をアニメーション化します。
アンカーの配置の構文に変更が加えられています。
他にも多数の機能があります。

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

`scheduler.yield()` を使用して長いタスクを分割する

タスクが長いと、ブラウザがユーザー入力に応答する時間が遅れ、サイトが遅いという印象を与え、INP などの重要なパフォーマンス指標に影響します。scheduler.yield() を使用すると、長いタスクを小さなチャンクに分割し、メインスレッドに明示的に譲渡することで応答性を改善できます。

ブラウザに次のことを指示できます。

「こんにちは。これから行う処理には時間がかかることがあります。フレームのペイント、ユーザー入力への応答、その他の重要なタスクが必要な場合は、お待ちください」

タスクを分割することでユーザー操作を促進できる仕組みを示す図。上部では、長いタスクがタスクが完了するまでイベントハンドラの実行をブロックしています。下部では、分割されたタスクにより、イベントハンドラを通常よりも早く実行できます。

ブラウザに休憩を与え、INP の問題を回避するために、JavaScript コードに次の行を頻繁に追加します。

await scheduler.yield();

重要なのは、コードの継続を優先できるため、譲渡によって損失を被ることはない点です。大きな作業のチャンク間の関数では、scheduler.yield() を自由に使用することをおすすめします。

詳細については、長時間のタスクを最適化するをご覧ください。

固有サイズのアニメーション

CSS アニメーションは非常に優れていますが、通常は明示的なサイズが必要であり、auto、min-content、fit-content などの固有のサイズ設定キーワードは使用できませんでした。

CSS プロパティ interpolate-size を使用すると、固有のサイズ設定キーワードを使用する場合では不可能だった新しいアニメーションを作成できます。

interpolate-size がないと、次の動画のボタンには切り替え効果がありません。

interpolate-size: allow-keywords を追加すると、動画内のボタンに美しい切り替えアニメーション効果が適用されます。

root 要素に interpolate-size: allow-keywords を指定すると、ページ全体に新しい動作が設定されます。互換性が問題にならない場合は、常にこの方法を使用することをおすすめします。

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

より細かい制御を行うには、calc() と同様に、CSS calc-size() 関数を使用して、サポートされている組み込みサイズ設定キーワードの 1 つに対してのみオペレーションを実行します。レイアウト計算の実行時に、size キーワードは元のサイズ calc-size-basis と評価されます。

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

詳しくは、CSS の height: auto;（およびその他の組み込みサイズ設定キーワード）へのアニメーションをご覧ください。

CSS アンカーの配置に関する変更

CSS アンカーの配置は Chrome 125 でリリースされましたが、CSS ワーキンググループ内で追加の議論が行われた後、仕様と実装にいくつかの変更が加えられました。CSS アンカー位置をすでに使用している場合は、できるだけ早くコードを更新する必要があります。

まず、inset-area の名前が position-area に変更されました。position- というフレーズは、このプロパティがアンカー要素ではなく、配置された要素に適用されることを思い出させてくれるため、このフレーズが優先されました。

2 つ目は、position-try-options の名前が position-try-fallbacks に変更されたことです。これは、これらがベーススタイルによって決定されるプライマリポジションへのフォールバックにすぎないことを覚えておくのに役立ちます。

最後に、inset-area() 関数構文が position-try から削除されます。そのため、position-try-fallbacks: inset-area(top) ではなく position-try-fallbacks: top を使用してください。

その他

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

複数のロケールをサポートする、時間のフォーマット用に新しい Intl メソッドが追加されました。

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Web GPU キャンバスで、HDR 画像にディスプレイの全範囲を使用できるようになりました。

また、一部のデベロッパーに影響する可能性がある非推奨化と削除がいくつかあります。

リリースノート全体

Chrome 129 の新機能

scheduler.yield() を使用して長いタスクを分割する

固有サイズのアニメーション

CSS アンカーの配置に関する変更

その他

関連情報

登録

`scheduler.yield()` を使用して長いタスクを分割する