Chrome101

Chrome 101 のリリースノート関連の情報をまとめました。

https://developer.chrome.com/blog/new-in-chrome-101/ https://developer.chrome.com/blog/new-in-devtools-101/ https://developer.chrome.com/blog/deps-rems-101/ https://www.chromestatus.com/features#milestone%3D101

New In Chrome (Chrome 101)

Chrome101 で新しく追加された機能です。

hwb() color notation

CSSの色指定方法としてhwb()値がサポートされました。

hwb() は、色相、白色度、黒色度にしたがって色を指定します。他の色表記と同様に、オプションのアルファ成分で不透明度を指定することもできます。以下の例では#00c3ffの色を50%透過度で指定しています。

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

FireFoxではv96から、Safariではv15からこのhwb()値をサポートしているため、今回のChromeのサポートにより、多くのブラウザでこの記法が使えることになります。

Priority Hints

ブラウザがページ内リソース(image,script,CSS)を読み込む際の優先度ヒントを明示的に宣言できるPriority Hints機能がリリースされました。

htmlで読み込みの優先度ヒントを書く場合は、fetchpriority属性にhigh,low,autoのいずれかを指定します。

<!-- 優先度 low で画像を読み込む場合 -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

この機能はChrome96からOriginTrialとして試験的に実装されており、当時はimportance属性を用いる方法をとっていましたが、Web標準化プロセスの中で、HTMLではfetchpriority、JavaScriptのFetch APIではpriorityというプロパティを利用するよう仕様が変更されました。

優先度指定における細かい挙動やユースケースについてはOptimize resource loading with Priority Hintsを参照してください。

Also in this release

USBDevice forget()

USBDeviceオブジェクトでforgot()メソッドがサポートされました。このメソッドでは以前許可されていたデバイスの登録を削除することができます。例えば多くのデバイスで共有されているコンピューターで使用されているアプリケーションなどでは有用です。

Web USB sameObject behavior

USBConfiguration、USBInterface、USBAlternateInterface、USBEndpoint の4つのインスタンスが厳密な同値（===）なるのは、同じUSBDeviceのアクセッサから取得した場合のみに変更されます。

Secure context fix for dedicated workers

全な(HTTPSの)Originからロードされていますが、安全でない(HTTPSでない)コンテキストでインスタンス化された専用ワーカーは安全だとはみなされなくなりました。

具体的に上記のような状況において、以下のような変更が入ります

• self.isSecureContextがfalseを返すようになる
• self.caches と self.storageFoundation が使用できなくなる

この修正により、上記のようなワーカーの挙動においてHTML標準やGeckoと互換性を持つようになりました。

Make 'true' a truthy value for window.open boolean features

chrome98から、window.open()に対しpopup=yesまたはpopup=1のように指定することで、ポップアップウィンドウで開くことをブラウザに要求することが出来るようになりました。

このpopup値としてyes,1などがサポートされていたものの、true/falseがサポートされていなかったため、popup=trueはpopupを開かないことを意味していました。

このようにpopup=trueがfalseとして評価されるのは直感に反しているため、Chrome101からはpopup=trueがtrueとして評価されるようになります。

What's New In DevTools (Chrome 101)

DevTools についてはこちらの日本語訳を参照ください。

https://developer.chrome.com/ja/blog/new-in-devtools-101/

Deprecations and removals in Chrome 101

Reduce user agent string information

ChromeではHTTPリクエストやnavigatorで利用されるUser-Agent文字列の削減に取り組んでいます。この取り組みはUser-Agent文字列がユーザーフィンガープリンティング(webブラウザからの情報だけで個人の情報を特定する技術)に利用されるのを防ぐために行われています。現在はOriginTrialとしてこれらの取り組みを進めています。

Remove WebSQL in third-party contexts

サードパーティーのコンテキストにおけるWebSQL機能を削除しました。Web SQL Database標準は2009年4月に提案され、2010年11月に放棄された標準で、FireFoxはこの機能を搭載せず、Safariも2019年から非推奨としています。またW3Cは代替手段として、Web StorageとIndexed Databaseを推奨しています。Chromeとしても使用率が十分に低くなった時点で完全に非推奨とし、削除する予定です。

その他 Chrome Platform Status に記載されていたもの

MediaCapabilities API for WebRTC

MediaCapabilities APIでWebRTCストリームをサポートするようになりました。

MediaCapabilities APIは、動画再生に使用できるコーデックや解像度などの情報を提供するAPIです。これらの情報によりwebアプリケーションは使用するコーデクなどがサポートされているかどうか、スムーズな再生が期待できるかどうかを判断できるようになります。

今回のリリースからWebRTCストリームについての情報もこのMediaCapabilities APIから取得できるようになります。この機能がない場合、アプリケーションが不必要に低い解像度やフレームレートを使用して品質が低下したり、クライアントが希望するフレームレートでストリームを処理できずスタッタリングが発生したりする可能性があります。

font-palette and custom @font-palette-values palettes

カラーフォントで利用するパレットを選択することができる、font-palette CSSプロパティがサポートされました。

また@font-palette-valuesルールを利用することで、ベースとなるカラーパレットを選択したり、カラーパレットの上書きなどができるようになります。

ベースとなるカラーパレットを選択する例

@font-palette-values --Pinks {
  font-family: MultiColorFont;
  base-palette: 1; /* パレットを番号で指定 */
}

.text-pink {
  font-palette: --Pinks; /* @font-palette-valuesで作成したパレットを指定 */
}

カラーパレットを上書きする例

@font-palette-values --SkyAndYellow {
  font-family: MultiColorFont;
  override-colors:　
    0 #87dbe8, 
    1 #f7ca25;　/* 対応する番号のカラーを上書き */
}

このようにfont-palette CSSプロパティのサポートは、すでにサポートしているCOLR/CPALカラーフォントの有用性を向上するものです。ダークモード対応をはじめとして、アイコンフォントをコンテンツの配色に合わせたいユースケースでこの機能はとても有用です。