必知事項は次のとおりです。
- 3 つの新しい CSS 機能により、スムーズな開始と終了のアニメーションを簡単に追加できます。
- 配列グループ化を使用して、高階データセットを計算する。
- DevTools を使用すると、ローカル オーバーライドが簡単になります。
- 他にもさまざまな機能があります。
Adriana Jara です。Chrome 117 のデベロッパー向け新機能を詳しく見ていきましょう。
開始アニメーションと終了アニメーションの CSS の新機能。
これら 3 つの新しい CSS 機能によって、開始アニメーションと終了アニメーションを簡単に追加でき、ダイアログやポップオーバーなど、最上位レイヤで閉じることができる要素との間でスムーズにアニメーション化できるようになります。
1 つ目の特徴は 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. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. 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;
}
/* 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 プログラミング(map-group-reduce と考える方がよい)を使用する場合に最もよく見られます。
データをグループに結合できるため、デベロッパーは高次のデータセットを計算できます。たとえば、コホートの平均年齢や、ウェブページの 1 日あたりの LCP 値などです。
配列のグループ化により、このようなシナリオを有効にするには、静的メソッド Object.groupBy
と Map.groupBy
を追加します。
groupBy
は、イテラブル内の各要素に対して、指定されたコールバック関数を 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 でのローカル オーバーライドを効率化。
ローカル オーバーライド機能が簡素化されたため、アクセスせずに、[Network] パネルからリモート リソースのレスポンス ヘッダーとウェブ コンテンツを簡単にモックできるようになりました。
ウェブ コンテンツをオーバーライドするには、[ネットワーク] パネルを開き、リクエストを右クリックして [コンテンツをオーバーライド] を選択します。
ローカル オーバーライドを設定して無効にした場合、DevTools でオーバーライドが有効になります。まだ設定していない場合は、上部のアクションバーにプロンプトが表示されます。オーバーライドを保存するフォルダを選択し、DevTools によるアクセスを許可します。
オーバーライドを設定すると、DevTools で [ソース] > [オーバーライド] > [エディタ] に移動し、ウェブ コンテンツをオーバーライドできます。
オーバーライドされたリソースは、[Network] パネルに と表示されます。アイコンにカーソルを合わせると、オーバーライドされる項目が表示されます。
Chrome 117 の DevTools について詳しくは、DevTools の新機能をご覧ください。
など多数
他にもたくさんあります。
grid-template-columns
とgrid-template-rows
について待望のsubgrid
値が Chrome に実装されました。unload
イベントのサポート終了について、WebSQL
のサポート終了トライアルとデベロッパー向けトライアルがあります。Chrome 116 の動画で紹介されている bfcache の
notRestoredReasons
API は、このバージョンでリリースする必要があります。
関連情報
ここでは、重要なハイライトについてのみ説明します。Chrome 117 で追加される変更については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(117)
- Chrome 117 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 117)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。
Adriana Jara です。Chrome 117 がリリースされ次第、Chrome の最新情報をお届けします。