このページは 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 で高さにアニメーション化する: auto; など、固有のサイズ設定キーワードをご覧ください。

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

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

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

次に、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()` を使用して長いタスクを分割する