Saji

<h1>Chrome 102</h1>
Chrome 102 のリリースノート関連の情報をまとめました。
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-chrome-102/">https://developer.chrome.com/blog/new-in-chrome-102/</a></li>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-102/">https://developer.chrome.com/blog/new-in-devtools-102/</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-102/">https://developer.chrome.com/blog/deps-rems-102/</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D102">https://www.chromestatus.com/features#milestone%3D102</a></li>
<li><a href="https://v8.dev/blog/v8-release-102">https://v8.dev/blog/v8-release-102</a></li>
</ul>
<h2>New In Chrome (Chrome102)</h2>
Chrome102 で新しく追加された機能です。
<h3>File Handling API</h3>
PWA に MIME タイプや拡張子を紐づけることができる File Handling API がサポートされました。
PWA のマニフェストに関連づけたい MIME タイプや拡張子を設定することで、Mac だと「このアプリケーションで開く」の候補に PWA のアプリケーションが選択できるようになります。
参考: Let installed web applications be file handlers
<a href="https://web.dev/file-handling/">https://web.dev/file-handling/</a>
<h3>The inert property</h3>
<code>inert</code>プロパティは、グローバルな HTML 属性です。<code>inert</code>属性のついた要素は、フォーカスイベントや支援技術からのイベントなど、ユーザー入力イベントを無視します。
<code>inert</code>属性はモーダルダイアログやドロワーなどの UI パーツを作成するのに便利です。モーダルダイアログでは、モーダルが表示されている間、フォーカスをモーダル内に限定したくなりますが、これはモーダル外の要素に<code>inert</code>属性をつけることで実現できます。また、ユーザーから常に見えるわけではないドロワーでは、開閉時に<code>inert</code>属性を切り替えることで、「画面外にあるドロワーを誤ってキーボードで操作してしまう」ような誤作動を防止できます。
<code>inert</code>属性の利用例です。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;div>
 &#x3C;label for="button1">Button 1&#x3C;/label>
 &#x3C;button id="button1">inertではない&#x3C;/button>
&#x3C;/div>
&#x3C;div inert>
 &#x3C;label for="button2">Button 2&#x3C;/label>
 &#x3C;button id="button2">inertである&#x3C;/button>
&#x3C;/div>
</code></pre></div>
この例では二つ目の<code>div</code>に<code>inert</code>属性を付与しています。そのため内包された<code>&#x3C;label></code>要素や<code>&#x3C;button></code>要素はフォーカスやクリックできない要素になります。
<code>inert</code>属性は Chrome では 102 からサポートされますが、FireFox や Safari でも同様にサポートされる予定です。(執筆現在、Safari は 15.5 から、FireFox は Nightly で利用可能です。)
<h3>Navigation API</h3>
近年の多く見られる SPA で作られたアプリでは、ページ移動なしで URL を更新します。この挙動を実現するため、一般的に<code>History API</code>が利用されますが、<code>History API</code>ではうまく用件を満たせないことや、動作がわかりにくくなることがあります。
このような History API の問題点をカバーするべく作られた API 仕様が Navigation API です。
<h4>利用方法</h4>
Navigation API を使用するには、グローバルに生えた<code>navigation</code>オブジェクトに navigate リスナーを追加します。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">navigation.addEventListener('navigate', (navigateEvent) => {
 switch (navigateEvent.destination.url) {
 case 'https://example.com/':
 navigateEvent.transitionWhile(loadIndexPage());
 break;
 case 'https://example.com/cats':
 navigateEvent.transitionWhile(loadCatsPage());
 break;
 }
});
</code></pre></div>
ナビゲーションイベントは、<code>navigate</code>リスナーによって一元化されており、以下のような条件の有無に関わらずあらゆるタイプのナビゲーションイベントで発火します。
<ul>
<li>フォームを送信したかどうか</li>
<li>戻る・進むアクションによる遷移か</li>
<li>プログラムによって引き起こされたものかどうか</li>
</ul>
その上で、ほとんどの遷移に関するアクションに対して、デフォルトの動作を上書きすることができます。
詳細に関しては<a href="https://developer.chrome.com/docs/web-platform/navigation-api/">Modern client-side routing: the Navigation API</a>をご覧ください。
<h3>And more!</h3>
<ul>
<li>ページ内検索等でヒットするまで表示されない<code>hidden=unfil-found</code>の指定ができるようになります</li>
</ul>
<h2>What's New In DevTools (Chrome 102)</h2>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-102/">https://developer.chrome.com/ja/blog/new-in-devtools-102/</a>
<h2>Deprecations and removals in Chrome 102</h2>
<h3>Deprecate PaymentRequest.show() without User Activation</h3>
ユーザーのアクティベーションなしに<code>PaymentRequest.show()</code>を実行できなくなりました。
<code>PaymentRequest.show()</code>はクリックなどのユーザーイベント内で行う必要があります。
<h3>Remove SDP Plan B</h3>
WebRTC でセッションを確立するために使用される <code>Session Description Protocol</code> (SDP) は、Chromium 上で<code>Unified Plan</code>と<code>Plan B</code>という 2 種類の異なる実装が存在しています。
<code>Plan B</code>はクロスブラウザでの互換性がないなどの問題を抱えていたため、102 から削除されます。
このバージョンから Chrome では<code>Plan B</code>を利用すると例外が投げられるようになります。これを回避したい場合は 2022 年 5 月 25 日までに<a href="https://developer.chrome.com/origintrials/#/view_trial/3892235977954951169">非推奨のトライアル</a>に参加してください。また 12 月に終了した前回の非推奨トライアルに参加していて、今回のトライアルにも参加したい場合は、新しくトークンをリクエストする必要があることに注意してください。
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<h3>Add Save Data Client Hint</h3>
Permissions-Policy に<code>CH-Save-Data</code>を追加することで Client Hint として<code>Save-Data</code>が扱えるようになります。
<code>Sec-CH-Save-Data</code>が適切な Client Hint になり、Permissions-Policy を介してサードパーティへ送信されることを防ぐことができます。
参考: Save-Data
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data">https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data</a>
<h3>AudioContext.outputLatency</h3>
<code>AudioContext.outputLatency</code>プロパティが追加されました。
このプロパティは音声出力レイテンシーの推定値(秒数)を返します。技術的には、UserAgent がホストシステムにバッファの再生を要求してから、バッファ内の最初のサンプルが実際に音声出力デバイスによって処理されるまで(スピーカーなどであれば音が出るまで)の間隔を指します。
このプロパティは入力から出力までのレイテンシーを調整するために必要で、ビデオとオーディオストリームの同期などに非常に有効です。
<h3>Capture Handle</h3>
ビデオキャプチャを行う他のアプリケーションに対して、特定の情報やコントロールを opt-in で公開できる仕組みを導入します。
たとえば、プレゼンテーション・アプリを開いたタブをビデオキャプチャしているアプリケーションがあったとします。この機能でプレゼンテーションアプリがキャプチャをしているアプリに対して、プレゼンテーションを操作を公開するとキャプチャをしているアプリからプレゼンテーションアプリを操作できるようになります。
ディスプレイキャプチャを行うアプリケーションは、キャプチャされるアプリケーションが Capture Handle 機能を提供していることを前提に、ユーザーに優れた機能性を提供できます。今までに似たような技術はありましたが、Capture Handle では、何を公開するか(オリジン・ハンドル・ID...etc)を選択可能にすることで、よりシンプルで信頼性が高く、安全な仕組みを提供します。
また私たちが提案するメカニズムでは、キャプチャされたアプリケーション側で、キャプチャする側のアプリケーションを制限できます。具体的には全ての web か特定の origin かを選択できます。
<h3>HTTP->HTTPS redirect for HTTPS DNS records</h3>
DNS に問い合わせをする際に、従来の<code>A</code>および<code>AAAA</code>クエリと並行して、<code>HTTPS</code>レコードを問い合わせるようになります。ウェブサイトが<code>HTTPS</code>DNS レコードを設定していて、Chrome がそれを受信すると、Chrome は常に HTTPS で接続します。
<h3>WebHID exclusionFilters option in requestDevice()</h3>
navigator.hid.requestDevice()に<code>exclusionFilters</code>が追加されました。
<code>exclusionFilters</code>を指定することでブラウザから扱いたくない HID デバイスを除外することができるようになります。
参考:
<a href="https://developer.mozilla.org/en-US/docs/Web/API/HID/requestDevice">https://developer.mozilla.org/en-US/docs/Web/API/HID/requestDevice</a>

<h1>Chrome101</h1>
Chrome 101 のリリースノート関連の情報をまとめました。
<a href="https://developer.chrome.com/blog/new-in-chrome-101/">https://developer.chrome.com/blog/new-in-chrome-101/</a>
<a href="https://developer.chrome.com/blog/new-in-devtools-101/">https://developer.chrome.com/blog/new-in-devtools-101/</a>
<a href="https://developer.chrome.com/blog/deps-rems-101/">https://developer.chrome.com/blog/deps-rems-101/</a>
<a href="https://www.chromestatus.com/features#milestone%3D101">https://www.chromestatus.com/features#milestone%3D101</a>
<h2>New In Chrome (Chrome 101)</h2>
Chrome101 で新しく追加された機能です。
<h3><code>hwb()</code> color notation</h3>
CSSの色指定方法として<code>hwb()</code>値がサポートされました。
hwb() は、色相、白色度、黒色度にしたがって色を指定します。他の色表記と同様に、オプションのアルファ成分で不透明度を指定することもできます。以下の例では<code>#00c3ff</code>の色を50%透過度で指定しています。
<div class="remark-highlight"><pre class="language-css"><code class="language-css">h1 {
 color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
</code></pre></div>
FireFoxではv96から、Safariではv15からこの<code>hwb()</code>値をサポートしているため、今回のChromeのサポートにより、多くのブラウザでこの記法が使えることになります。
<h3>Priority Hints</h3>
ブラウザがページ内リソース(<code>image</code>,<code>script</code>,<code>CSS</code>)を読み込む際の優先度ヒントを明示的に宣言できる<code>Priority Hints</code>機能がリリースされました。
htmlで読み込みの優先度ヒントを書く場合は、<code>fetchpriority</code>属性に<code>high</code>,<code>low</code>,<code>auto</code>のいずれかを指定します。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;!-- 優先度 low で画像を読み込む場合 -->
&#x3C;img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
</code></pre></div>
この機能はChrome96からOriginTrialとして試験的に実装されており、当時は<code>importance</code>属性を用いる方法をとっていましたが、Web標準化プロセスの中で、HTMLでは<code>fetchpriority</code>、JavaScriptのFetch APIでは<code>priority</code>というプロパティを利用するよう仕様が変更されました。
優先度指定における細かい挙動やユースケースについては<a href="https://web.dev/priority-hints/">Optimize resource loading with Priority Hints</a>を参照してください。
<h3>Also in this release</h3>
<h4>USBDevice forget()</h4>
<code>USBDevice</code>オブジェクトで<code>forgot()</code>メソッドがサポートされました。このメソッドでは以前許可されていたデバイスの登録を削除することができます。例えば多くのデバイスで共有されているコンピューターで使用されているアプリケーションなどでは有用です。
<h4>Web USB sameObject behavior</h4>
<code>USBConfiguration</code>、<code>USBInterface</code>、<code>USBAlternateInterface</code>、<code>USBEndpoint</code> の4つのインスタンスが厳密な同値（<code>===</code>）なるのは、同じ<code>USBDevice</code>のアクセッサから取得した場合のみに変更されます。
<h4>Secure context fix for dedicated workers</h4>
全な(HTTPSの)Originからロードされていますが、安全でない(HTTPSでない)コンテキストでインスタンス化された専用ワーカーは安全だとはみなされなくなりました。
具体的に上記のような状況において、以下のような変更が入ります
<ul>
<li><code>self.isSecureContext</code>が<code>false</code>を返すようになる</li>
<li><code>self.caches</code> と <code>self.storageFoundation</code> が使用できなくなる</li>
</ul>
この修正により、上記のようなワーカーの挙動においてHTML標準やGeckoと互換性を持つようになりました。
<h4>Make 'true' a truthy value for window.open boolean features</h4>
chrome98から、<code>window.open()</code>に対し<code>popup=yes</code>または<code>popup=1</code>のように指定することで、ポップアップウィンドウで開くことをブラウザに要求することが出来るようになりました。
このpopup値として<code>yes</code>,<code>1</code>などがサポートされていたものの、<code>true/false</code>がサポートされていなかったため、<code>popup=true</code>はpopupを開かないことを意味していました。
このように<code>popup=true</code>がfalseとして評価されるのは直感に反しているため、Chrome101からは<code>popup=true</code>がtrueとして評価されるようになります。
<h2>What's New In DevTools (Chrome 101)</h2>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-101/">https://developer.chrome.com/ja/blog/new-in-devtools-101/</a>
<h2>Deprecations and removals in Chrome 101</h2>
<h3>Reduce user agent string information</h3>
ChromeではHTTPリクエストやnavigatorで利用されるUser-Agent文字列の削減に取り組んでいます。この取り組みはUser-Agent文字列がユーザーフィンガープリンティング(webブラウザからの情報だけで個人の情報を特定する技術)に利用されるのを防ぐために行われています。現在はOriginTrialとしてこれらの取り組みを進めています。
<h3>Remove WebSQL in third-party contexts</h3>
サードパーティーのコンテキストにおけるWebSQL機能を削除しました。Web SQL Database標準は2009年4月に提案され、2010年11月に放棄された標準で、FireFoxはこの機能を搭載せず、Safariも2019年から非推奨としています。またW3Cは代替手段として、Web StorageとIndexed Databaseを推奨しています。Chromeとしても使用率が十分に低くなった時点で完全に非推奨とし、削除する予定です。
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<h3>MediaCapabilities API for WebRTC</h3>
<code>MediaCapabilities API</code>でWebRTCストリームをサポートするようになりました。
<code>MediaCapabilities API</code>は、動画再生に使用できるコーデックや解像度などの情報を提供するAPIです。これらの情報によりwebアプリケーションは使用するコーデクなどがサポートされているかどうか、スムーズな再生が期待できるかどうかを判断できるようになります。
今回のリリースからWebRTCストリームについての情報もこの<code>MediaCapabilities API</code>から取得できるようになります。この機能がない場合、アプリケーションが不必要に低い解像度やフレームレートを使用して品質が低下したり、クライアントが希望するフレームレートでストリームを処理できずスタッタリングが発生したりする可能性があります。
<h3>font-palette and custom @font-palette-values palettes</h3>
カラーフォントで利用するパレットを選択することができる、<code>font-palette</code> CSSプロパティがサポートされました。
また<code>@font-palette-values</code>ルールを利用することで、ベースとなるカラーパレットを選択したり、カラーパレットの上書きなどができるようになります。
ベースとなるカラーパレットを選択する例
<div class="remark-highlight"><pre class="language-css"><code class="language-css">@font-palette-values --Pinks {
 font-family: MultiColorFont;
 base-palette: 1; /* パレットを番号で指定 */
}

.text-pink {
 font-palette: --Pinks; /* @font-palette-valuesで作成したパレットを指定 */
}
</code></pre></div>
カラーパレットを上書きする例
<div class="remark-highlight"><pre class="language-css"><code class="language-css">@font-palette-values --SkyAndYellow {
 font-family: MultiColorFont;
 override-colors:　
 0 #87dbe8, 
 1 #f7ca25;　/* 対応する番号のカラーを上書き */
}
</code></pre></div>
このように<code>font-palette</code> CSSプロパティのサポートは、すでにサポートしているCOLR/CPALカラーフォントの有用性を向上するものです。ダークモード対応をはじめとして、アイコンフォントをコンテンツの配色に合わせたいユースケースでこの機能はとても有用です。

Chrome 97 のリリースノート関連の情報をまとめました。
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-chrome-97/">https://developer.chrome.com/blog/new-in-chrome-97/</a></li>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-97/">https://developer.chrome.com/blog/new-in-devtools-97/</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-97/">https://developer.chrome.com/blog/deps-rems-97/</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D97">https://www.chromestatus.com/features#milestone%3D97</a></li>
<li><a href="https://v8.dev/blog/v8-release-97">https://v8.dev/blog/v8-release-97</a></li>
</ul>
<h2>New In Chrome (Chrome 97)</h2>
Chrome97 で新しく追加された機能です。
<h3>Web Transport</h3>
サーバーとクライアントの双方向リアルタイム通信を実現する新しいフレームワークとして提案されている<code>Web Transport</code>が正式にサポートされました。
Web Transport は既存の代表的手法である<code>Web Sockets</code>や<code>WebRTC</code>と比べ以下のような利点を持っています。
<ul>
<li><code>WebSockets</code>よりも低遅延な通信を実現する</li>
<li>P2P メッセージング用に設計された<code>WebRTC</code>と違い、クライアントサーバーメッセージングを前提として設計されているため扱いやすい</li>
</ul>
Web Transport では<code>streams API</code>と<code>datagram API</code>という２種類の通信 API がサポートされており、それぞれ以下のような特徴から使い分けることができます。
<ul>
<li>streams API : 信頼性の高い順序付けられたデータ送信に最適</li>
<li>datagram API : 信頼性や順序がそこまで求められず、より低遅延でベストエフォートなデータ送信に最適</li>
</ul>
注意点として、Web Transport を試すためには<code>HTTP/3</code>をサポートしたサーバーが必要となります。
Web Transport は以下のような形で簡単に利用することができます。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url); // WebTransportインスタンス生成
await transport.ready; // 接続を待つ

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);
</code></pre></div>
詳しくは<a href="https://web.dev/webtransport/">Experimenting with WebTransport</a>を参照しててください。
<h3>Script type feature detection</h3>
ブラウザ側で<code>ES Modules</code>の対応状況を判別する方法として今まで<code>nomodule</code>属性がありましたが、<code>import maps</code>, <code>speculation rules</code>,<code>bundle preloading</code>などの新しく提案されている仕様には対応しきれていませんでした。
今回サポートされた<code>HTMLScriptElement.supports()</code>を利用することで以下のように JavaScript側でscriptがどの仕様に対応しているかのチェックをすることができるようになります。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">if (HTMLScriptElement.supports('importmap')) {
 // Use &#x3C;script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
 // Use &#x3C;script type="module" ...>
} else {
 // Use classic method...
}
</code></pre></div>
<h3>New array prototypes</h3>
Array と TypedArray で<code>findLast()</code>と<code>findLastIndex()</code>が使えるようになりました。
この二つの関数は引数で渡された条件に合致する配列内の最後の要素の値、位置をそれぞれ返します。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const array = [5, 12, 8, 130, 44, 3, 6];

const last = array.findLast((value) => value > 10);
console.log(last); // 44
const lastIndex = array.findLastIndex((value) => value > 10);
console.log(lastIndex); // 4
</code></pre></div>
<h3>Emulate Chrome 100 in the UA string</h3>
あと数ヶ月で Chrome のバージョンは 3 桁となる 100 に到達します。
バージョンや UA 文字列をパースするコードがある場合は 3 桁でも動くかどうか確認しましょう。
現在のバージョンを 100 にする<a href="https://developer.chrome.com/blog/force-major-version-to-100/">#force-major-version-to-100</a>フラグを使って、既存のコードが正しく動くか確認することができます。
<h3>And more!</h3>
上記以外のようなアップデートがあります。
<ul>
<li>フォーム入力の改行が Gecko や WebKit と同じ方法で正規化されるようになりました。
<ul>
<li>これによりブラウザ間の相互運用性が向上しました。</li>
</ul>
</li>
<li><code>client hint</code>のプレフィクスを<code>sec-ch</code>にするように標準化を進めています。
<ul>
<li>例えば<code>dpr</code>は<code>sec-ch-dpr</code>のようになります。</li>
<li>以前の仕様も当分の間サポートを続けますが、いずれは非推奨となり削除されることを想定しましょう。</li>
</ul>
</li>
<li>閉じている<code>&#x3C;detail></code>要素が検索可能になり、閉じている<code>&#x3C;detail></code>要素内の element にスクロールしようとした際は閉じられている<code>&#x3C;detail></code>要素を自動的に開くようになりました。</li>
</ul>
<h3>What's New In DevTools (Chrome 97)</h3>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-97/">https://developer.chrome.com/ja/blog/new-in-devtools-97/</a>
<h3>Deprecations and removals in Chrome 97</h3>
Chrome97 で非推奨になったもの、もしくは削除されたものです
<a href="https://developer.chrome.com/blog/deps-rems-97/">https://developer.chrome.com/blog/deps-rems-97/</a>
<h3>Remove SDES key exchange for WebRTC</h3>
WebRTC の SDES 鍵交換の仕様は 2013 年以降、関連する IETF の標準仕様では MUST NOT となっており、近年では Chrome での使用率も大幅に低下しているので Chrome97 で廃止されました。
参考:
<a href="https://webrtc-security.github.io/report_ja/">https://webrtc-security.github.io/report_ja/</a>
<h3>Remove WebSQL in third-party contexts</h3>
サードパーティ製の WebSQL が廃止されました。W3C では代わりに Web Storage と Indexed Database を推奨しています。
<h3>Remove SDP Plan B</h3>
WebRTC でセッションを確立するために使用される SDP に非標準の実装であった<code>Plan B</code>が削除されました。
参考: SDP の Unified Plan と Plan B
<a href="https://blog.jxck.io/entries/2018-01-05/sdp-unified-plan.html">https://blog.jxck.io/entries/2018-01-05/sdp-unified-plan.html</a>
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<a href="https://www.chromestatus.com/features#milestone%3D97">https://www.chromestatus.com/features#milestone%3D97</a>
<h3>Feature policy for Keyboard API</h3>
各言語に対応した keybord レイアウト情報を返す<code>getLayoutMap()</code>メソッドは全てのコンテキスト(iframe 内など)では利用できないという問題点がありました。今回のアップデートで iframe の allow 属性に<code>keyboard-map</code>を追加することでこの問題を解決することができるようになりました。
<a href="https://chromestatus.com/features/5657965899022336">https://chromestatus.com/features/5657965899022336</a>
<h3><code>PermissionStatus.prototype.name</code></h3>
<code>PermissionStatus</code> インターフェースに読み取り専用の属性 <code>"name"</code> を追加し、<code>PermissionStatus</code> が作成された後、パーミッションの名前が取得できるようになりました。
今までは<code>Permissions API</code> を使って複数のパーミッションを同時に問い合わせた際、どの PermissionStatus がどのパーミッションに対応しているのかを識別する方法がありませんでした。
<a href="https://chromestatus.com/features/5651653697994752">https://chromestatus.com/features/5651653697994752</a>
<h3>Propagate request origin and redirect chain in passthrough service workers.</h3>
<code>fetch(evt.request)</code>メソッドで navigation requests を発行する ServiceWorker が<code>FetchEvent.request</code> からのオリジンとリダイレクトチェーンを使用するようになります。
今までは常に ServiceWorker のオリジンが設定され、リダイレクトチェーンを使用することはありませんでした。
<a href="https://chromestatus.com/features/5752539724120064">https://chromestatus.com/features/5752539724120064</a>
<h3>Support calc(<code>&#x3C;number></code>) where only accepts <code>&#x3C;integer></code></h3>
<a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-96">Chrome 96 リリースノートまとめ</a>にも記載したものが、Chrome97 で追加されました。
<blockquote>
css の calc()関数で integer しか受け取らないような場所でも number を指定できるようになりました。 もっとも近い整数に丸められます。
</blockquote>
<a href="https://chromestatus.com/features/5656451751084032">https://chromestatus.com/features/5656451751084032</a>
<h3>transform: perspective(none)</h3>
CSS transform プロパティ内で利用できる、<code>perspective()</code>関数への引数として'none'を実装としてサポートしました。<code>perspective(0)</code>と<code>perspective(none)</code>では挙動が変わるため、変形をしないことを意図する場合(単位行列として扱いたい場合)は<code>perspective(none)</code>を利用するようにしましょう。
<a href="https://chromestatus.com/features/5687325523705856">https://chromestatus.com/features/5687325523705856</a>