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

Chrome 123 の新機能

Adriana Jara

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

新しい light-dark() 関数を使用して、カラーパターンを調整します。
Long Animation Frames API を使用して、サイトの応答性を診断します。
Service Worker 静的ルーティング 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 を使用すると、ウェブサイトの応答性を測定する Core Web Vital の INP（Interaction to Next Paint）の低下原因となるメインスレッドの輻輳の原因を特定できます。

新しい 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 静的ルーティング API。

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

ただし、ページが久しぶりに読み込まれ、その時点で制御対象の Service Worker が実行されていない場合、パフォーマンスに影響する可能性があります。すべての取得は Service Worker を介して行う必要があるため、ブラウザは Service Worker が起動して実行されるのを待ってから、読み込むコンテンツを把握する必要があります。

Service Worker の静的ルーティング API を使用すると、インストール時に、常にネットワークから提供されるパスを宣言できます。後で制御対象の URL が読み込まれると、Service Worker の起動が完了する前に、ブラウザはこれらのパスからリソースの取得を開始できます。これにより、サービスワーカーが必要ないことがわかっている URL からサービスワーカーが削除されます。

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

その他

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

NavigationActivation インターフェースを使用して、ユーザーがどこから移動してきたかに基づいてカスタマイズされたページを提供できます。
Chrome で Zstandard（zstd）がサポートされるようになりました。この Content-Encoding により、ページの読み込みが速くなり、帯域幅の使用量が減り、サーバーで圧縮に費やす時間、CPU、電力が削減されるため、サーバー費用を削減できます。
bfcache の notRestoredReasons API は Chrome 123 からリリースされます。これにより、サイト所有者は、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 静的ルーティング API。

その他

関連情報

登録

`light-dark()` CSS 関数。