ウェブブラウザ「Google Chrome」の最新安定版であるバージョン137がリリースされました。CSSにif()関数が導入され複雑な条件ロジックを簡潔に表現できるようになるなど、多数の機能が追加されています。
Chrome 137 | Release notes | Chrome for Developers
https://developer.chrome.com/release-notes/137
◆
従来はSVG内の要素を参照する場合、必ずフラグメント(ID)を指定する必要がありました。
今回のアップデートで、フラグメントを省略した場合は、SVG内のルート要素を参照するようになりました。
これが特に有効なのは外部のSVGドキュメントを使用している場合で、ルート要素にIDが設定されていない場合にわざわざSVGドキュメントを編集してIDを追加する必要がなくなります。
◆CSSにif()関数を導入
if()関数の導入により、CSSの条件値をより完結に記述する方法が提供されます。
以下は従来の記述の一例です。
同じ内容をif()関数を使用して記述する場合は以下のようになります。
if()関数は引数としてセミコロンで区切られた「条件」と「条件が真の場合の値」のペアを複数受け取り、最初に真となった条件に対応する値を返します。この例では「–color」というCSSカスタムプロパティにdarkクラスに対しては白を、lightクラスに対しては黒を設定することで、前景色はそのまま–colorを指定し、背景色はif()の条件として–colorを用いることでdarkクラスとlightクラスに別個の色を指定しています。
二つの記述を見比べると、一見if()を使用した方がややこしくなっている様に捉えられるかも知れませんが、要点は–colorという一つの値を決めるだけで全体のスタイルが確定するというところにあります。また、例ではカスタムプロパティを直接色の指定に使用していますが、これを単純に条件値だと捉えるならば、色以外の様々なプロパティを単一のカスタムプロパティで一括して制御することもできるため、CSSの要変更箇所の集約度は飛躍的に高まります。
◆CSSプロパティreading-flowとreading-orderの追加
CSSプロパティreading-flowはflex・grid・blockといったレイアウト内の要素がTabキーによるフォーカス切り替えでフォーカスされる順序を制御することができます。指定可能な値は以下のとおりです。
・normal
・flex-visual
・flex-flow
・grid-rows
・grid-columns
・grid-order
・source-order
一方、CSSプロパティreading-orderを使用すると、読み取りフローコンテナ内の順序を手動で上書きできます。reading-orderの値は整数で、デフォルト値は0です。
これらの動作については、以下のサイトにて実際に確認できます。
reading-flow examples
https://chrome.dev/reading-flow-examples/
◆Document-Isolation-Policy
Document-Isolation-Policyは、ドキュメントにCross-Origin-Opener-Policy(COOP)やCross-Origin-Embedder-Policy(COEP)を導入することなく、またページのcrossOriginIsolation(COI)プロパティのステータスに関係なく、それ単体でcrossOriginIsolationを有効化できます。
これにより、クロスオリジンポップアップとの通信を維持しながらSharedArrayBuffers(SAB)を用いた高速アプリケーションを安全に構築できるようになり、ドキュメントにクロスオリジンiframeを埋め込む作業が大幅に軽減されます。
期待されるユースケースとしては、計算負荷の高いタスク(ビデオゲーム・ビデオ会議・写真編集など)を高いパフォーマンスで実行しつつ、oAuthやクロスオリジンウィジェットの埋め込みなど利便性の高い機能を組み込んだウェブアプリケーションを、安全性を維持しつつ効率的に構築するといった状況が考えられます。
◆署名アルゴリズムEd25519のサポート
Web Cryptography APIが暗号アルゴリズムとしてEd25519をサポートしました。
これまで、TLS 1.3をサポートするブラウザには帯域幅送信アルゴリズムとしてEd25519が組み込まれているにもかかわらず、ウェブ開発者がブラウザ上でEd25519を利用することはできませんでした。このため、ウェブアプリケーションでEd25519を使用する場合、JavaScriptやWebAssemblyなどで独自に実装する必要がありました。これは無駄で煩雑であるだけでなく、セキュリティの面からも問題があったため、APIでのサポートが待ち望まれでいました。
◆HSTSトラッキングによるセキュリティリスクを予防
HSTSのアップグレードをトップレベルナビゲーションに限定して許可し、サブリソースリクエストによるHSTSアップグレードはブロックするようになりました。これにより、悪意あるサイトがHSTSキャッシュを悪用してウェブトラッキングすることが不可能になりました。
◆筆記体の文字間設定を無効に
CSSプロパティletter-spacingは文字間のスペースを指定できますが、例えばアラビア語のような言語では、筆記体の文字列にこれを適用すると、スペースが入ってしまうことにより単語として捉えることが困難になるケースがあります。
この対策としては、「余分なスペースを加える代わりに筆記体文字を伸長または圧縮する」か、「筆記体の文字間にletter-spacingで指定された文字間隔を適用しない」かの二つが考えられますが、前者では筆記体の接続維持・伸長グリフ・書体・カリグラフィといった筆記体の持つ固有の要素を考慮するために複雑な計算が必要であり、後者の方が処理効率の面で優位性があります。
こちらに関するより詳細な情報は、以下で確認できます。
CSS Text Module Level 3
この対応により、筆記体に依存する言語(アラビア語、ハニーフィー・ロヒンギャ語、マンダ語、モンゴル語、ンコ語、パグス・パ語、シリア語)の話者に対するユーザーエクスペリエンスの向上が期待できます。
◆Selection API：getComposedRanges()とdirection
Selection APIに以下が追加されます。
・Selection.direction： 選択範囲の方向を示し、「none(なし)」・「forward(前方)」・「backward(後方)」のいずれかの値をとる
・Selection.getComposedRanges()：0個または1個の「合成された」StaticRangeのリストを返す
通常のRangeではシャドウルートの境界を越えることはできませんが、「合成された」StaticRangeはそれが可能です。
選択範囲がリストに指定されていないシャドウルートの境界を越える場合は、StaticRangeのエンドポイントはそのツリーの外側になるように再スコープされるため、不明なシャドウツリーが公開されることはありません。
◆JavaScript Promise Integrationの導入
JavaScript Promise Integration(JSPI)は、WebAssemblyアプリケーションをJavaScriptのPromiseと統合するためのAPIです。JSPIを利用することで、WebAssembly プログラムはPromiseのジェネレータとして動作し、Promiseを前提とする非同期処理のAPIと連携できるようになります。つまり、アプリケーションがJSPIを使用してPromiseを前提とするJavaScript APIを呼び出すと、WebAssemblyコードは一時停止され、WebAssemblyプログラムの呼び出し元にはWebAssemblyプログラムが完了した時点で有効化されるPromiseが渡される、といった流れになります。
◆CSSプロパティ「accent-color」
CSSプロパティaccent-colorを利用することで、チェックボックス・ラジオボタン・プログレスバーといったフォーム要素に、プラットフォームで定義された強調色が自動的に適用できるようになりました。これにより、ウェブアプリケーションで使用される色をユーザーが選択したシステムテーマと一致させることが容易になり、統一感がありパーソナライズされたインターフェースを実現できるようになります。なお、accent-colorに値が指定されていない場合、または「auto」に設定されている場合は、プラットフォーム標準のアクセントカラーが適用されます。
◆view-transition-nameの値: match-element
CSSプロパティview-transition-nameの値にmatch-elementを指定することで、要素のIDに基づいた一意の値に変換されます。これは、シングルページアプリケーションで要素を移動させ、ビュー遷移でアニメーション化したい場合などに使用されることを想定しています。
例えば、このようなDOM要素がある場合を想定してみます。
これらに対してview-transition-nameを指定する場合、従来は各々の要素に対して逐一このような記述をするしかありませんでした。
これをmatch-elementを使用して書き換えると、以下のようになります。
◆オリジントライアル
・ブロッキング属性「full-frame-rate」の追加：#critical-content要素を解析し終わるまでレンダラーは低いフレームレートで動作する
・権限ポリシー「media-playback-while-not-rendered」の追加：非表示の埋め込みiframeのメディア再生を一時停止可能にする
・Writer API：ライティングタスクのプロンプトに応じて文書を生成する
・Rewriter API：要求された方法で入力テキストを変換および言い換えを行う
◆その他のアップデート
・「支払い」認証情報におけるWebAuthn認証情報作成時に発生する例外の変更(SecurityError→NotAllowedError)
・Blob URLアクセスのパーティショニングを実装
・JavaScriptコードに起因してページが無応答となった際にJSコールスタックをキャプチャ
・Web APIのCanvasRenderingContext2D・OffscreenCanvasRenderingContext2D・ImageDataで浮動小数点カラー値が使用可能に
・IPアドレスのロギング・トラッキングによるセキュリティ監視とインシデント対応機能の強化
・Language Detector API：テキストの言語を信頼度付きで検出するJavaScript API
・CSSプロパティoffset-pathがshape()関数をサポート
・SVGSVGElement：
また、Google Chrome 137には11件のセキュリティバグフィックスが含まれています。
なお、次期安定版の「Google Chrome 138」は現地時間の2025年6月24日(火)にリリース予定です。
この記事のタイトルとURLをコピーする
ソース元はコチラ
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。