デジタルマーケティングTips
Chrome 120 仕様変更発表まとめ
Google Chrome 120の主要な仕様変更発表のまとめです。(ベータ版時点での情報です)
要点
メルマガでも情報を配信中です! ぜひご登録ください。
追加・拡張
CSS
- カスタムプロパティ(CSSで使える変数のようなもの)を扱う際、@property{}やregisterProperty()メソッドの中で構文指定(登録値の種類制限)を行うときに、以下の指定が使えるようになりました。
- syntax: "<image>"…カスタムプロパティの値を、画像/イメージ関連(加工・合成を含む画像、ベクターシェイプ、単色ベタ/グラデーション等)に限定できます。
- syntax: "<transform-function>" / syntax: "<transform-list>"…カスタムプロパティの値を、各種二次元・三次元の座標変換(行列変換、回転、拡大縮小、斜め歪み、平行移動等、transform:○○で指定できる値)に限定できます。
- メディアクエリのメディア特性項目で、スクリプト言語(JavaScript等)のサポートの有無に基づくスタイル切り替えが可能になります。
- @media (scripting: enabled) { (スタイル指定を入れる) } …スクリプト言語が【有効】な環境向けの処理
- @media (scripting: initial-only) { (スタイル指定を入れる) } …スクリプト言語が【読み込み中のみ有効】な環境向けの処理 ※ブラウザでは通常使用機会はない
- @media (scripting: none) { (スタイル指定を入れる) } …スクリプト言語が【無効】な環境向けの処理
- :dir()擬似クラス…文字列の記述方向(右→左、左→右)に応じた要素選択・スタイル指定ができるようになります。(横方向の指定のみ対応)
- :dir(ltr){ (スタイル指定を入れる) }…左書き(左から右に書く)部分向けの処理
- :dir(rtl){ (スタイル指定を入れる) }…右書き(右から左に書く)部分向けの処理
- 値/単位指定Level 4で定義されたもののうち、以下の指数・対数関連の関数が新たに対応します。
- pow()…累乗を計算します。
pow(a, b)で「aのb乗()」が出力されます。 - sqrt()…平方根を計算します。
sqrt(a)で「aの平方根()」が出力されます。 - hypot()…多次元ベクトルの大きさ(長さ)を計算します。(仕様上は一次元でも可)
hypot(a, b, …)で、「それぞれの2乗の和の平方根()」が出力されます。
なお、単位が揃っていれば単位付きの値(30px等)も使用できます。 - log()…対数を計算します。
log(a, b)で「bを底とするaの対数()」が出力されます。
なお、bを省略してlog(a)と記述した場合は自然対数(を底とする対数)になります。 - exp()…自然対数の底()の累乗を計算します。
exp(a)での計算値が出力されます。
- pow()…累乗を計算します。
- 画像等のマスクに使用する「mask-○○」について、従来「-webkit-mask-○○」で記載していたのが、「-webkit-」プレフィックスを取った形で使用できるようになります。
- CSSの入れ子表記で要素名を指定する際の書式が柔軟になり、先頭に「&」を付加したり「is()」で囲まなくても要素名を指定できるようになります。
HTML
- details…アコーディオン開閉部をdetails要素で作れるようになります。
details要素にはname属性を付加可能です。
1つのグループには複数のdetails要素を配置でき、グループ内で同時に開けるアコーディオンは1つのみです。
Web API
- ArrayBufferオブジェクト(のバイナリデータバッファ)を、複製不要でVideoFrame(動画内の1フレーム)・AudioData(音声)・EncodedVideoChunk(エンコード済み映像)・EncodedAudioChunk(エンコード済み音声)・ImageDecoder(画像デコード)オブジェクトに変換できるようになります。
- check()…CSS Font Loading APIでのフォント使用可否が確認できます。
FontFaceSetインターフェイスでのフォント読み込みが未完了の場合、他の指定フォント(フォント名を引数に入れる)でテキストを表示できるかどうかを確認し、結果をtrue / falseのいずれかで返します。
システムフォント等既にデバイス側で用意ができているものである場合はtrueが返されます。 - CloseWatcher…PCのエスケープキー(Esc)やAndroidの戻るボタンなど、今開いているものを閉じるユーザー操作/リクエストがあった場合、それをシステム側で拾うAPIが使えるようになります。
- FedCM(外部提供IDを使ったユーザー認証)の専用APIとして以下が追加されます。
- Error API…ユーザーがサインインに失敗した場合、ID提供元からユーザーおよびログイン先のサイト(Relying Party, RP)に対して失敗理由が提供されます。
- AutoSelectedFlag API…ID提供元およびRP開発者の双方がサインインのUX・パフォーマンス評価を行えるようになります。
- Fenced Frames(iframeよりセキュリティを重視した埋め込みフレーム)を使う際、プライバシーサンドボックスのProtected Audience API(第三者追跡を遮断しつつリマーケティング等を行うAPI)で、マクロを使って落札した広告のサイズをURL内に埋め込みできるようになります(URL末尾に「?width={/%AD_WIDTH%}&height={/%AD_HEIGHT%}」のような形で指定したりします)。また、deprecatedReplaceInURNメソッドやregisterAdMacro()でも、${AD_WIDTH}や${AD_HEIGHT}の形でマクロを使った広告サイズ指定が可能になります。
- Intersection Observer(交差オブザーバー=スクロールに応じた表示要素の画面内進入等を検知するAPI/インターフェイス)で、scrollMarginを活用すると、入れ子のスクロールコンテナ内でクリッピングされたターゲット要素の表示位置判定が正確にできるようになります。
- Permissions policy APIとReporting APIが機能的に統合され、どのエンドポイントに許可ポリシー違反レポートが送信されるかを設定できるようになります。サイト側のメリットとしては、無許可機能のリクエストがいつ行われたかがわかりやすくなります。
- Media Session APIで、enterpictureinpictureアクションが利用できるようになります。ピクチャーインピクチャーやドキュメントピクチャーインピクチャーを開く際に使用するアクションハンドラーを登録可能になります。
- WebGPUのシェーダー(WGSL)で、16ビットの半精度浮動小数点数型(f16)が使用可能になります。従来対応していた単精度浮動小数点数型(32ビット)に比べて、精度は下がりますが処理データ量が半減します。
- Media Capabilities APIで、HDR検出用の映像設定に以下を記述できるようになります。
- hdrMetadataType…HDRメタデータの種類を記述
- colorGamut…色空間の種類を記述
- transferFunction…伝達方式の種類を記述
- MediaStreamTrack…動画のうち映像部分の再生統計(フレームドロップの回数等)を取るAPIが使えるようになります。音声再生統計については別途開発される予定です。
- Private Aggregation API…サイトをまたいだデータアクセスによる集計データ収集を行うAPIが使用可能になります。
- Login Status API(旧称IdP Sign-in Status API)…FedCMで、ID提供元からブラウザに対してユーザーのログイン/ログアウト状態を伝えることができます。
- TLSの鍵カプセル化アルゴリズムについて、X25519とKyber768のハイブリッド方式(IETF標準準拠)に対応します。
オリジントライアル(先行試験実装)
- RFC 9218で定義されるHTTPリクエストヘッダーの優先度設定が使えるようになります。
- Storage Access APIが、Cookie以外のストレージにも使えるようになります。
- SSL/TLS証明書を持たないLAN内コンテンツへの接続について、fetch()メソッド使用時に追加のメタデータを持たせ、サーバーがプリフライトレスポンスヘッダーを返すことにより接続を可能にする機能が導入されます。
- Webアプリ(iframeやWebワーカー等)のメモリ使用量測定に使うperformance.measureUserAgentSpecificMemory()メソッドについて、従来クロスオリジン分離環境でのみ使用可能だったのが、それ以外の環境でも使えるようになります。
※オリジントライアルは、サイト管理者がオリジントライアル管理画面から対象オリジン(ドメイン)を登録し、発行されたトークンをHTMLにmetaタグとして設置した場合のみ、期間限定で有効になります。(詳細はGoogleの解説を参照)
仕様変更
Web API
- Storage Access APIで、専用ワーカーが親コンテキストのストレージアクセス権を継承するようになります。
例えばドキュメントがdocument.requestStorageAccess()でストレージアクセス権(非パーティション化Cookieへのアクセス等)を取得し、そのうえで専用ワーカーを作成した場合、専用ワーカーにも同様のアクセス権が与えられます。 - Fenced Frameについて以下の仕様変更が行われます。
- 自動ビーコンが登録された全URLに送信されるようになります。
- setReportEventDataForAutomaticBeacons()にonceを使う場合、[ビーコン全体が1回送信されたか]ではなく、[データが1回送信されたか]に関する結果を返すようになります。
- View Transitions API(フェード等要素表示のトランジション処理に関するAPI)のstartViewTransition()メソッド(トランジション処理の開始時に使用)について、オプションとしてコールバックにヌル値を許容していたのが、許容されないよう変更されます。
廃止・削除
- 動画圧縮用映像コーデックのうちTheoraへの対応が廃止されます。(セキュリティリスクがあり、かつ利用率が低いため)
- SVGUseElementインターフェイスでdata: URLが使用できなくなります。(クロスサイトスクリプティング(XSS)脆弱性のため)
- コンテンツセキュリティポリシー(CSP、XSS等の攻撃対策として外部コンテンツの取得制限を行う設定)の埋め込みコンテンツ適用について、自オリジンのiframe埋め込みが例外的に許可される扱いが廃止されます。今後はクロスオリジン(他ドメイン)iframeと同等の扱いが行われるよう変更されます。
※参照:Chrome 120 beta - Chrome Developers (2023/11/01)
https://developer.chrome.com/blog/chrome-120-beta/
マックスマウスからのお知らせ
Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け!
WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。
いますぐご登録ください!