「Google Chrome 117」安定版リリース、アニメーション機能やローカルのファイルでコンテンツを上書きする機能が追加される

ウェブブラウザ「Google Chrome」の最新安定版であるバージョン117.0.5938.63がリリースされました。開始・終了時のアニメーションを簡単に設定できるようになったほか、配列をグループ化する関数が追加されたり、サイトのコードをローカルのコードで上書きする機能が追加されたりしています。

New in Chrome 117 - Chrome Developers
https://developer.chrome.com/blog/new-in-chrome-117/

New in Chrome 117: CSS for smooth entry & exit animations, array group, streamlined local overrides - YouTube

◆開始・終了用のアニメーション機能が追加される
「transition-behavior」プロパティが追加され、値に「allow-discrete」を指定することで「display」のような離散プロパティをアニメーションさせることが可能になりました。

また、「@starting-style」という@ルールを指定することで、要素を読み込んだ際の最初の状態を指定可能になりました。例えば下記のように指定すると、「.item」要素が上から描画されていきます。実際に動作を体験するにはChrome 117にアップデート後、デモを確認してみてください。

また、CSSの[open]属性と組み合わせて利用することでDialogやpopoverが最上位のレイヤーに表示される際にアニメーションさせることが可能です。

動作のイメージはこんな感じ。ムービーが再生できない場合はChromeを使用してみて下さい。


◆配列をグループ化する機能が登場
Object.groupByおよびMap.groupBy関数が追加され、これらの関数を利用することで配列をグループ化することが可能になりました。

例えば下記の配列があった場合を考えてみます。

Object.groupByの第2引数で「どのようにグループ分けするのか」を定義すればOK。下記のように「type」でグループ分けすることができます。

◆サイトのコードをローカルのコードで上書きする機能が追加される
開発者ツールの「ネットワーク」タブを開き、上書きしたい部分を右クリックして「コンテンツをオーバーライド」をクリック。

初めてオーバーライドを行う場合は作業フォルダを指定する必要があります。

指定したフォルダへのアクセス権を求められるので「許可する」をクリック。

これでオーバーライドを行う事が可能になりました。あたかもインターネットからそのコードをダウンロードしたかのようにローカルのコードがロードされるようになります。

◆その他の変更点
・Gridレイアウトに「Subgrid」が登場
グリッドをネストすることが可能になりました。

・「unload」イベントを停止する設定が可能に
unloadイベントが廃止された後もサイトが正常に動作するかを開発者が確認できるよう、unloadイベントを廃止するための設定が追加されました。

また、Google Chrome 117には16件のセキュリティバグフィックスが含まれています。

なお、次期安定版の「Google Chrome 118」は現地時間の2023年10月10日にリリース予定です。