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

Chrome 123 の新機能

Adriana Jara

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

新しい light-dark() 関数でカラーパターンを適応させます。
Long Animation Frames API を使用して、サイトの応答性を診断します。
Service Worker Static Routing API を使用して、Service Worker の起動時のパフォーマンス低下を防ぎます。
他にも多くの機能を利用できます。

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

`light-dark()` CSS 関数。

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

ブラウザでは、要素の計算済み 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）の原因となるメインスレッドの輻輳の原因を特定するのに役立ちます。この API はウェブサイトの応答性を測定する 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、電力が削減されるため、サーバー費用を削減できます。
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 の Static Routing API

その他

関連情報

登録

`light-dark()` CSS 関数。