Chrome 117 の新機能

Adriana Jara

次の説明をお読みください。

Adriana Jara です。Chrome 117 でデベロッパー向けに導入された新機能を見ていきましょう。

開始時と終了時のアニメーション用の新しい CSS 機能。

この 3 つの新しい CSS 機能により、エントリ アニメーションと終了アニメーションを簡単に追加し、ダイアログやポップオーバーなどのトップレイヤの閉じることができる要素との間でスムーズにアニメーション化する機能が完成します。

最初の機能は transition-behavior です。display などの離散プロパティを切り替えるには、transition-behavior に allow-discrete 値を使用します。

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

次に、@starting-style ルールを使用して、display: none からトップレイヤへのエントリ効果をアニメーション化します。@starting-style を使用すると、ページで要素が開かれる前にブラウザが参照できるスタイルを適用できます。

/*  0. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

最後に、最上位レイヤから popover または dialog をフェードアウトするには、遷移のリストに overlay プロパティを追加します。切り替え効果またはアニメーションにオーバーレイを含めて、他の対象物と一緒にオーバーレイをアニメーション化し、アニメーション化するときに最上位レイヤに留まるようにします。これにより、はるかにスムーズに表示されます。

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

モーションによるユーザー エクスペリエンスの向上にこれらの機能を使用する方法について詳しくは、スムーズなエントリ アニメーションと終了アニメーションを実現する 4 つの新しい CSS 機能をご覧ください。

配列のグループ化

プログラミングでは、配列のグループ化は非常に一般的なオペレーションであり、SQL の GROUP BY 句や MapReduce プログラミング（マップ、グループ、削減と考えるのが適切）を使用する場合によく見られます。

データをグループにまとめることで、デベロッパーは高次のデータセットを計算できます。たとえば、コホートの平均年齢やウェブページの毎日の LCP 値などです。

配列のグループ化では、Object.groupBy 静的メソッドと Map.groupBy 静的メソッドを追加することで、これらのシナリオを実現できます。

groupBy は、iterable の各要素に対して、指定されたコールバック関数を 1 回呼び出します。コールバック関数は、関連付けられた要素のグループを示す文字列またはシンボルを返す必要があります。

次の例は、MDN ドキュメントからのもので、groupBy メソッドを使用してタイプ別にグループ化された商品を返す商品配列があります。

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish">;, type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) = type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

詳細については、groupBy のドキュメントをご覧ください。

DevTools でローカルのオーバーライドが効率化されました。

ローカル オーバーライド機能が合理化され、ネットワーク パネルからリモート リソースのレスポンス ヘッダーとウェブ コンテンツを簡単にモックできるようになりました。

ウェブ コンテンツをオーバーライドするには、[ネットワーク] パネルを開き、リクエストを右クリックして [コンテンツをオーバーライド] を選択します。

リクエストのプルダウン メニューにあるオーバーライド オプション。

ローカル オーバーライドが設定されているが、無効になっている場合、DevTools はローカル オーバーライドを有効にします。まだ設定していない場合は、上部のアクション バーに DevTools からメッセージが表示されます。オーバーライドを保存するフォルダを選択し、DevTools がそのフォルダにアクセスできるようにします。

フォルダを選択し、上部のアクションバーでアクセスを許可します。

オーバーライドを設定すると、DevTools は [Sources] > [Overrides] > [Editor] に移動し、ウェブ コンテンツをオーバーライドできます。

オーバーライドされたリソースは、[ネットワーク] パネルで 保存しました。 で示されます。アイコンにカーソルを合わせると、オーバーライドされた内容が表示されます。

[ネットワーク] パネルのリクエストの横にあるオーバーライド アイコン。

Chrome 117 の DevTools の詳細とその他の情報については、DevTools の新機能をご覧ください。

その他

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

関連情報

ここでは、主なハイライトの一部のみを取り上げます。Chrome 117 のその他の変更については、以下のリンクをご覧ください。

登録

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

私は Adriana Jara です。Chrome 117 がリリースされたら、すぐに Chrome の新機能をお知らせします。