ウェブブラウザ「Google Chrome」の最新安定版であるバージョン123.0.6312.58(Linux)／123.0.6312.59(Windows、Mac)がリリースされました。CSSやWeb APIに様々な機能が追加されており、従来よりさらにウェブコンテンツの表現力が豊かになっています。

Chrome Releases: Stable Channel Update for Desktop

New in Chrome 123: light-dark function, Service Worker Routing API, and more! - YouTube

◆CSS関数light-dark()

CSSの色関数として、新たにlight-dark()が追加されます。この関数は引数として2つの色を指定することができ、下記の状況に応じていずれか一方を返します。

・ウェブ開発者が明色か暗色かのいずれのカラースキームを設定しているか

・ユーザーがライトモードかダークモードかのいずれのテーマをリクエストしたか

CSSでlight-dark()関数を有効にするには、:root擬似クラス(もしくはhtml要素)のcolor-schemeプロパティに「light dark」値を設定する必要があります。

:root {
color-scheme: light dark;
}
body {
background-color: light-dark(lime, green);
}

この例の場合、以下の通りの挙動を示します。

・ユーザーがライトモードを選択した場合、body要素の背景はライム色になります。

・ユーザーがダークモードを選択した場合、body要素の背景は緑色になります。

◆CSSのpicture-in-picture表示モード

@mediaが扱うことのできるdisplay-modeメディア特性のひとつとして、「picture-in-picture」値が追加されます。これにより、ピクチャーインピクチャー表示に対してのみ適用されるCSSルールを記述できるようになります。

@media all and (display-mode: picture-in-picture) {
body {
margin: 0;
}
h1 {
font-size: 0.8em;
}
}

◆CSSプロパティalign-contentの適用可能レイアウト追加

align-contentプロパティは内部要素の配分方法を指定するために使用されますが、これまではグリッドとフレックスボックスでのみサポートされていました。今回の更新ではこれらに加え、以下のレイアウトについてもサポートされるようになりました。

・block

・list-item

・table-cell

◆CSSプロパティfield-sizingの追加

これまで、入力する文字列の長さに応じて自動的に増加するテキストフィールドを作成するには、JavaScriptによるコーディングが必要でした。新たに追加されるfield-sizingプロパティを使用すると、このようなフィールドがより簡単に作成できるようになります。

◆CSSプロパティtext-spacing-trimによるCJK句読点文字のカーニング

中国語・日本語・韓国語(CJK)の句読点文字には、グリフ内部のスペースが含まれています。たとえば、句点「。」や閉じかっこ「）」はグリフスペースの右半分に内部的なスペースを設定することにより、他の文字との位置合わせをおこなっています。しかしながら、このような文字が連続して表示される場合、グリフの内部スペースが過剰となってしまいます。



text-spacing-trimプロパティはCJKの句読点文字にカーニングを適用することにより、そういった過剰なスペースを調整する機能を提供します。



Chrome 123でtext-spacing-trimプロパティに設定可能な値およびその効果は、以下の通りです。

値行頭のトリム隣接するペアのトリム行末のトリムすべてトリムnormalしないするフィットしない
場合のみしないtrim-startするするフィットしない
場合のみしないspace-allしないしないしないしないspace-first1行目以外するフィットしない
場合のみしない

◆CSSプロパティpaint-orderのサポート対象をSVG以外に拡大

CSSプロパティpaint-orderはテキストコンテンツやシェイプが描画されるときの塗りつぶしと輪郭(およびマーカー)の描画について、その順序を制御することができます。このプロパティはこれまでSVGテキストを対象としていましたが、これをHTML(非SVG)テキストにも拡大します。

◆クロスオリジンのiframeでWebAuthn認証情報の作成を許可する

ウェブ認証API(WebAuthn)は従来のパスワードなどの代わりに公開鍵暗号を用いてセキュアな二要素認証を実現する資格情報管理APIの拡張機能です。今回の更新により、ウェブ開発者はクロスオリジンのiframeでWebAuthn認証情報(パスキーと呼ばれる「公開鍵」認証情報)を作成できるようになります。

クロスオリジンのiframeでWebAuthn認証情報を作成するには、以下の2つの前提条件があります。

・iframeにpublickey-credentials-create-feature権限ポリシーが設定されていること

・iframeで一時的なユーザーアクティベーションが行われること

◆zstd圧縮コンテンツのエンコーディング

Zstandard(zstd)はRFC8878で説明されている高速可逆圧縮アルゴリズムであり、zlibレベルでのリアルタイム圧縮シナリオとより優れた圧縮率が特徴です。

Content-Encodingレベルでzstdをサポートすることにより、以下の効果が期待できます。

・ページの読み込み速度の向上

・帯域幅の使用量削減

・サーバーでの圧縮処理の軽減

・CPUリソースや消費電力の減少

・サーバー費用の削減

◆Long Animation Frames API

Long Animation Frames APIは、Chrome 58で追加されたLong Tasks APIの拡張機能です。

長いアニメーション フレーム API  |  Web Platform  |  Chrome for Developers

https://developer.chrome.com/docs/web-platform/long-animation-frames

タスクは後続のレンダリング更新とともに測定され、以下の情報などが追加されます。

・長時間実行スクリプト

・レンダリング時間

・強制レイアウトやスタイル(レイアウトスラッシング)にかかった時間

ウェブ開発者は、不適切なINPの原因となることが多いメインスレッドの輻輳について原因を特定することで、「遅延」の診断をすることが可能となります。監視方法はPerformanceObserverインターフェースを使用した監視と同様ですが、long-animation-framタイプを使用する点が異なります。



◆pagerevealイベント

pagerevealイベントは、ドキュメントが最初に読み込まれた後、BFCacheからの復元が行われた後、もしくは事前レンダリングから有効化された後の最初のレンダリングの際に、ドキュメントのウィンドウオブジェクトで発生します。



ページ作成者はこのイベントを利用することにより、ドキュメントの表示準備が整ってからレンダリングされるまでにDOMを変更できます。



◆サービスワーカーの静的ルーティングAPI

サービスワーカーはウェブサイトをオフラインで動作させたり専用のキャッシュルールを作成したりといった目的で使用される便利な機能ですが、ページが初めて読み込まれかつページを制御するためのサービスワーカーが未実行である場合、ウェブページのパフォーマンスが低下する原因になることがあります。

このAPIを使用することにより、ウェブ開発者はルーティングを構成し、サービスワーカーの単純な作業をオフロードできます。これにより上述した状況下において、サービスワーカーの介入によるパフォーマンスが低下するおそれがある場合に、サービスワーカーを起動したりJavaScriptを実行したりすることなくナビゲーションが可能となるため、パフォーマンス低下を抑制できるようになります。



◆その他のWebAPI関連の追加機能

ここまでに紹介した以外にも、様々な機能がWebAPIに追加実装されています。

・NotRestoredReason API：BFCacheがページを提供できなかった場合に、その理由をPerformanceNavigationTiming API経由で報告する

・Attribution Reporting API：トリガーデータのカスタマイズと集計可能値のフィルタの追加

・Attribution Reporting APIの拡張：ウェブで発生したコンバージョンとブラウザ外で発生したイベントとの関連付けに対応

・インラインモジュールスクリプトに対するblocking="render"属性の制約を撤廃

・ドキュメントのピクチャーインピクチャー：opener.focus()によるオープナーウィンドウへのフォーカス

・with構文による属性インポート

・jitterBufferTarget属性：WebRTCのバッファリング量の調整

・NavigationActivationインターフェース

・ナビゲーションリクエストのプライベートネットワークアクセスチェック：警告専用モード

・共有ストレージの更新：iframeを作成することなくクロスオリジンなワークレットの実行をサポート

・AuctionReportBuyersレポート用のプライベート集約デバッグモード

◆オリジントライアル：共有Brotli・共有Zstandardによる圧縮辞書トランスポート

指定された以前の応答をBrotliまたはZstandardによる圧縮HTTP応答の外部辞書として使用するためのサポートを追加します。これにより、ブラウザとサーバーが辞書を共有している場合、その辞書を圧縮に利用することで転送データ量を大幅に削減できるようになります。

◆オリジントライアル：WebAssembly JavaScript Promise統合API

WebAssemblyを利用した応答性の高いアプリケーションをサポートするには、WebAssemblyプログラムを一時停止／再開できる機能が必要となります。例えば、同期APIに依存しているWebAssemblyプログラムがウェブプラットフォームで一般的になりつつある非同期APIを使用するケースがこれに当てはまります。

WebAssembly JavaScript Promise統合(JSPI)APIを利用することで、WebAssemblyの仕様自体を変更することなくJavaScriptのPromiseを適切に扱うことにより、JavaScriptの非同期APIを中断させることなく動作させることが期待されています。

◆削除：window-placementエイリアス

Chrome 111で追加された権限ポリシーwindow-managementへの置き換え猶予で残されていたwindow-placement権限が、Chrome 123において削除されます。

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

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