Chrome 111 の新機能

Adriana Jara

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

• View Transitions API を使用して、シングルページ アプリに洗練された遷移を作成します。
• CSS カラーレベル 4 のサポートにより、色をレベルアップできます。
• スタイルパネルの新しいツールを使って、新しいカラー機能を最大限に活用しましょう。
• 他にもさまざまな機能があります。

Adriana Jara と申します。Chrome 111 のデベロッパー向けの新機能について詳しく見ていきましょう。

View Transitions API。

ウェブ上でスムーズな遷移を作成するのは複雑な作業です。View Transitions API は、ビューをスナップショットし、状態間の重複なしで DOM を変更できるようにすることで、洗練された遷移を簡単に作成できるようにするものです。

デフォルトのビュー遷移はクロスフェードです。次のスニペットはこのエクスペリエンスを実装します。

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

.startViewTransition() が呼び出されると、API はページの現在の状態をキャプチャします。

これが完了すると、.startViewTransition() に渡された callback が呼び出されます。DOM が変更されるのは、このタイミングです。次に、API はページの新しい状態をキャプチャします。

この API はシングルページ アプリ（SPA）向けにリリースされていますが、他のモデルのサポートも実装されています。

この API には多くの詳細があります。詳しくは、サンプルと詳細を含む記事をご覧ください。また、MDN のビュー遷移に関するドキュメントもご覧ください。

CSS Color Level 4。

CSS カラーレベル 4 では、HD 色域から色を指定するだけでなく、専門的な色空間も備えた高解像度ディスプレイをサポートするようになりました。

つまり、選択できる色が 50% 増えるということです。1600 万色は多いと思った。私もそう思います。

この実装には color() 関数が含まれており、R、G、B チャネルで色を指定する任意の色空間に使用できます。color() は、まず色空間パラメータを受け取り、次に RGB の一連のチャンネル値を受け取り、必要に応じてアルファ値を受け取ります。

以下に、さまざまな色空間で color 関数を使用する例を示します。

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

CSS を使用して高解像度カラーを最大限に活用するための詳細なドキュメントについては、こちらの記事をご覧ください。

新しいカラー デベロッパー ツール。

Devtools に、CSS カラーレベル 4 仕様をサポートする新機能が追加されました。

[スタイル] ペインで、仕様で概説されている 12 の新しい色空間と 7 つの新しい色域がサポートされるようになりました。以下に、color()、lch()、oklab()、color-mix() を使用した CSS の色定義の例を示します。

color-mix() を使用すると、ある色の一部を別の色に混合できます。この場合、[計算済み] ペイン で最終的な色出力を確認できます。

また、カラー選択ツールは、より多くの機能を備えた新しいカラースペースをすべてサポートしています。たとえば、色（display-p3 1 0 1）の色見本をクリックします。色域境界線も追加され、sRGB 色域と display-p3 色域が区別され、選択した色域が明確にわかります。

カラー選択ツールは、カラー形式間の色の変換もサポートしています。

DevTools のデバッグの色やその他の新機能について詳しくは、こちらの投稿をご覧ください。

その他

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

• CSS に三角関数、追加のルートフォント単位が追加され、n 番目の子疑似セレクタが拡張されました。
• Document Picture in Picture API はオリジン トライアル中です
• previousslide アクションと nextslide アクションが Media Session API の一部になりました。こちらでデモをご覧ください。

関連情報

主なハイライトのみを記載しています。Chrome 111 のその他の変更については、以下のリンクをご覧ください。

• Chrome DevTools の新機能（111）
• Chrome 111 の非推奨と削除
• ChromeStatus.com の更新内容（Chrome 111）
• Chromium ソース リポジトリの変更リスト
• Chrome のリリース カレンダー

登録

最新情報を入手するには、Chrome Developers の YouTube チャンネルにチャンネル登録してください。新しい動画が公開されると、メール通知が届きます。

Chrome 112 がリリースされたらすぐに、 Adriana Jara です。