Chrome 98 ベータ版: カラー グラデーション ベクター フォント、リージョン キャプチャのオリジン トライアルなど
特に記載のない限り、下記の変更は Android、Chrome OS、Linux、macOS、Windows 向けの最新の Chrome ベータ版チャンネル リリースに適用されます。ここに記載されている機能の詳細については、リンクまたは ChromeStatus.com の一覧でご確認ください。2022 年 1 月 10 日の時点で Chrome 98 はベータ版です。PC 向けの最新版は Google.com で、Android では Google Play ストアでダウンロードできます。
このバージョンの Chrome は、新しく追加されたフォント形式として COLRv1 カラー グラデーション ベクター フォントをサポートします。カラーフォントのグリフには複数の色が含まれています。例として、絵文字や国旗、多色文字などが挙げられます。
COLRv1 は COLRv0 フォント形式が進化したもので、ウェブでのカラーフォントの普及を目的としています。COLRv1 フォントは、グラデーション、座標変換、合成などのさまざまな視覚表現に対応しながらも、フォントのサイズはとても小さくなっています。また、COLRv1 フォントは OpenType のバリエーションもサポートしています。フォントのサイズがとても小さいのは、内部形状の再利用とコンパクトなフォント形式定義、効率的な圧縮によるものです。
次のイメージは、Noto Color Emoji の例を示しています。これはビットマップ フォントでは約 9 MB ですが、COLRv1 ベクター フォントでは 1.85 MB しかありません（WOFF2 圧縮後）。
| 明瞭な COLRv1 ベクター フォント（左）と、ビットマップ フォント（右）の比較。 WOFF2 圧縮後のビットマップ フォントと COLRv1 フォントとしての Noto Emoji のフォントサイズ。 |
詳細については、Chrome 98 の COLRv1 カラー グラデーション ベクター フォントをご覧ください。
今年中に Chrome のバージョン 100 がリリースされ、ユーザー エージェント文字列で報告されるバージョン番号の桁数が増える予定です。サイトオーナーが新しい文字列をテストしやすくするために、Chrome 96 では、Chrome のユーザー エージェント文字列として「100」が返されるようにするランタイム フラグが導入されました。この新しいフラグ chrome://flags/#force-major-version-to-100 は、Chrome 96 以降で利用できます。詳細については、Chrome の User-Agent 文字列のメジャー バージョンを強制的に 100 にするをご覧ください。
このバージョンの Chrome には、以下のオリジン トライアルが導入されています。オリジン トライアルとして新機能を試せるようにすることで、ウェブ標準コミュニティにユーザビリティ、実用性、有効性についてのフィードバックを提供することができます。以下の項目を含め、現在 Chrome でサポートされているオリジン トライアルに登録するには、Chrome オリジン トライアル ダッシュボードをご覧ください。Chrome のオリジン トライアルの詳細については、ウェブ デベロッパーのためのオリジン トライアル ガイドをご覧ください。Microsoft Edge は、Chrome とは別に独自のオリジン トライアルを行っています。詳細については、Microsoft Edge オリジン トライアル デベロッパー コンソールをご覧ください。
リージョン キャプチャは、自分でキャプチャした動画トラックをクロップするための API です。現在、アプリケーションは、preferCurrentTab の指定の有無にかかわらず、getDisplayMedia() を使ってアプリケーション自体が実行されているタブをキャプチャできます。その際、（通常はリモートに共有する前に）結果の動画トラックをクロップし、コンテンツの一部を削除する場合があります。
contain-intrinsic-size に auto キーワードのサポートが追加され、ウェブサイトで最後に記憶した要素のサイズ（存在する場合）が利用できるようになります。これにより、content-visibility: auto が指定された要素よりもユーザー エクスペリエンスが向上します。この機能がない場合、ウェブ デベロッパーは要素がレンダリングされるサイズを推定しなければなりません。この機能と content-visibility: auto を併用すると、要素が飛び回る可能性があります。
新しい AudioContext.outputLatency プロパティは、オーディオ出力のレイテンシを秒単位で推定します。厳密に言えば、これはユーザー エージェントがホストシステムにバッファリングをリクエストした時間から、オーディオ出力デバイスがバッファ内の最初のサンプルを処理した時間までの間隔です。スピーカーやヘッドフォンなど、音響シグナルを生成するデバイスの場合、後者の時間はサンプルのサウンドが生成された時間です。Firefox では、すでにこの機能が実装されています。
color-scheme の仕様に再追加された only キーワードが Chrome でサポートされるようになりました。これにより、特定の単一要素で color-scheme を無効化できるようになります。たとえば、強制的なダーク化を無効化できます。いくつかの例で使い方を示します。
div { color-scheme: light }
これは、div 要素の color-scheme を強制的にダーク以外にします。
div { color-scheme: only light }
これは、上の例と同じく、要素の color-scheme をライトに保ち、ユーザー エージェントによる強制ダーク化を無効にします。
仕様に従い、document.adoptedStyleSheets プロパティの変更が可能になります。これにより、push() や pop() などの操作ができるようになります。これまでの adoptedStyleSheets の実装は扱いにくく、たとえばシートを追加する場合、配列全体を代入し直さなければなりませんでした。
document.adoptedStyleSheets = [...adoptedStyleSheets, newSheet];
新しい実装では、同じ操作を次のように行うことができます。
document.adoptedStyleSheets.push(newSheet);
Chrome で CSS メディアクエリ 'dynamic-range' と 'video-dynamic-range' がサポートされ、現在のディスプレイ デバイスの HDR サポート状況を検出できるようになります。有効な値は、'standard' と 'high' です。このクエリを使うと、ページで CSS ルールを切り替えたり、Window.matchMedia() を使って変更に対応したりできます。
仕様の更新に伴い、このバージョンの Chrome では window.open() で新しいウィンドウやタブを開くかどうかを指定できるようになります。次の例に新しい構文を示します。1 つ目は、ポップアップ ウィンドウを開きます。2 つ目は、新しいタブまたはウィンドウを開きます。
const popup = window.open('_blank','','popup=1');
const tab = window.open('_blank','','popup=0');
また、window.statusbar.visible が正しい値を返すようになります。具体的には、ポップアップでは false を、タブやウィンドウでは true を返します。
サブリソースに対するプライベート ネットワーク リクエストの前に CORS Preflight リクエストが送られ、対象サーバーから明示的なパーミッションを求めるようになります。プライベート ネットワーク リクエストとは、パブリックなウェブサイトからプライベート IP アドレスや localhost へのリクエスト、またはプライベートなウェブサイト（イントラネットなど）から localhost へのリクエストを指します。プリフライト リクエストを送ることで、ルーターなどのプライベート ネットワーク デバイスに対する Cross-Site Request Forgery (CSRF) 攻撃のリスクを緩和できます。多くの場合、プライベート ネットワーク デバイスはこのような脅威から保護されていません。
window と worker が、オブジェクトをディープコピーする structuredClone() メソッドをサポートします。ディープコピーでは、オブジェクトのプロパティがコピーされますが、その際に別のオブジェクトへの参照を見つけると、自身を再帰的に呼び出してそのオブジェクトもコピーします。これにより、2 つのコードで意図せずにオブジェクトが共有され、知らない間にお互いの状態を変更してしまうことがなくなります。ディープコピーの説明や使い方については、structuredClone による JavaScript のディープコピーをご覧ください。
Chrome で、Web Authentication を通して CTAP 2.1 minPinLength 拡張機能が公開されるようになります。これにより、あらかじめセキュリティ キーが構成されているサイトで、認証システムに設定された最小 PIN 長を知ることができるようになります。
インストールした PC ウェブアプリでウィンドウ コントロール オーバーレイが有効になっている場合、アプリのクライアント領域が拡張され、タイトルバー領域を含むウィンドウ全体を覆います。そのため、ウィンドウ コントロール ボタン（閉じる、最大化 / 復元、最小化）はクライアント領域の上に重なって表示されます。ウェブ デベロッパーは、ウィンドウ コントロール オーバーレイを除くウィンドウ全体の描画と入力ハンドリングをする必要があります。この機能を使うと、デベロッパーはインストールされた PC ウェブアプリを OS のアプリのように見せることができます。
WritableStreamDefaultController が signal プロパティをサポートします。このプロパティは、必要に応じて WritableStream 操作を停止できる AbortSignal のインスタンスを返します。ストリーム API では、データ ストリームの作成、構成、使用のためのユビキタスで相互運用可能なプリミティブが提供されます。この変更により、ライターからのリクエストがあったときに、下層のシンクが継続中の書き込み操作を即座に中断したりクローズしたりできるようになります。これまでは、writer.abort() が呼び出されても、時間がかかる書き込み操作が完了してからでないとストリームを中断できませんでした。この変更により、書き込みを即座に中断できるようになります。この機能は、JavaScript で作成したストリームだけでなく、プラットフォームが提供する WebTransport などのストリームでも利用できます。
このバージョンの Chrome では、以下のサポートの終了と機能の削除が行われます。現在サポートが終了している機能と以前に削除された機能のリストは、ChromeStatus.com をご覧ください。
2013 年以降、WebRTC の SDES 鍵交換メカニズムは、関連する IETF 標準で使用禁止と宣言されています。昨年には、Chrome での使用も大幅に減少しました。SDES が削除されるのは、これがセキュリティの問題になっているためです。Javascript にセッションキーが公開されるので、ネゴシエーションの交換にアクセスできるエンティティや Javascript を侵害できるエンティティが、その接続で送信されるメディアを復号化できることになります。
Reviewed by Eiji Kitamura - Developer Relations Team