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

Chrome 111 の新機能

Adriana Jara

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

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

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

View Transitions API。

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

View Transition API で作成された遷移。デモサイトを試す - Chrome 111 以降が必要です。

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

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 色レベル 4。

CSS の色レベル 4 により、CSS は HD 色域から色を指定しつつ、高解像度の表示をサポートするようになりました。また、特殊な色空間も提供しています。

簡単に言うと、選べるカラーが 50% 増えます。1,600 万色ってなかなかいい感じですね。私もそう思いました。

一連の画像が色域の広さと細さの間で移行され、色の鮮やかさとその効果が示されています。
使ってみる

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

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

.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 の仕様をサポートする新機能があります。

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

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 の新機能

View Transitions API。

CSS 色レベル 4。

新しいカラー開発ツール。

など多数

関連情報

登録