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

Chrome 123 の新機能

Adriana Jara

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

新しい light-dark() 関数でカラーパターンを調整します。
Long Animation Frames API を使用してサイトの応答性を診断します。
Service Worker Static Routing API を使用すると、Service Worker の起動時のパフォーマンスの低下を回避できます。
他にもたくさんあります。

Adriana Jara です。Chrome 123 のデベロッパー向けの新機能を詳しく見ていきましょう。

`light-dark()` CSS 関数。

CSS の light-dark() 関数を使用すると、ユーザーのライトモードまたはダークモードの設定に合わせて色を作成できます。light-dark() 関数を使用して、1 つの CSS プロパティ内で 2 種類の色の値を指定します。

ブラウザは、要素で計算された color-scheme 値に基づいて適切な色を自動的に選択します。たとえば、次の CSS があるとします。

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

ユーザーがライトモードを選択した場合、要素の背景はライムになります。
ユーザーがダークモードを選択した場合、要素の背景は緑色になります。

Long Animation Frames API。

Long Animation Frames API を使用すると、不正な INP（Interaction to Next Paint）の原因となることが多いメインスレッドの輻輳の原因を特定できます。これは、ウェブサイトの応答性を測定する Core Web Vitals です。

新しい API は Long Tasks API の拡張バージョンで、時間のかかるユーザーインターフェースの更新について理解を深めることができます。Long Animation Frames API を使用すると、ブロッキング処理を測定できます。次のレンダリング更新とともにタスクを測定し、長時間実行スクリプト、レンダリング時間、強制レイアウトとスタイル（レイアウトスラッシング）にかかった時間などの情報を追加します。

この情報を収集して分析することで、パフォーマンスのボトルネックを特定してトラブルシューティングできます。次のコードを使用して長いフレームをキャプチャできます。

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Service Worker の Static Routing API。

Service Worker を使用すると、ウェブサイトをオフラインで動作させて、パフォーマンスを向上させるキャッシュ戦略を作成できます。

ただし、ページが初めて読み込まれ、その瞬間に制御 Service Worker が実行されていない場合、パフォーマンスコストが発生することがあります。フェッチはすべて Service Worker を通じて行われる必要があるため、ブラウザは Service Worker が起動して実行され、読み込むコンテンツを把握するまで待つ必要があります。

Service Worker Static Routing API を使用すると、インストール時にパスを常にネットワークから提供するように宣言できます。制御された URL が後で読み込まれると、Service Worker の開始が完了する前に、ブラウザはそれらのパスからリソースの取得を開始できます。これにより、Service Worker が不要だとわかっている URL から Service Worker が削除されます。

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

ほか多数

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

NavigationActivation インターフェースを使用すると、ユーザーの移動元に基づいてカスタマイズされたページを提供できます。
Chrome で Zstandard（zstd）がサポートされるようになりました。この Content-Encoding により、ページの読み込みが速くなり、帯域幅の使用量が削減され、サーバーでの圧縮に費やす時間、CPU、消費電力が減り、サーバー費用を削減できます。
Chrome 123 から、bfcache 用の notRestoredReasons API がリリースされます。これにより、サイト所有者は bfcache を使用できなかった理由について、現場で理由を収集できます。サイト所有者はこの機能を使用することで、bfcache の使用を改善し、履歴をすばやく移動できるようになります。
display-mode の picture-in-picture 値を使用すると、ウェブアプリがピクチャーインピクチャーモードで表示される場合にのみ適用される特定の CSS ルールを作成できます。次に例を示します。

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

Chrome 123 の新機能

light-dark() CSS 関数。

Long Animation Frames API。

Service Worker の Static Routing API。

ほか多数

関連情報

登録

`light-dark()` CSS 関数。