デジタルマーケティングTips

Chrome 118 仕様変更発表まとめ

記事タイトル画像：Chrome 118 仕様変更発表まとめ

Google Chrome 118の主要な仕様変更発表のまとめです。(ベータ版時点での情報です)

記事バックナンバー一覧

要点

メルマガでも情報を配信中です！　ぜひご登録ください。

Chrome 118 変更点

追加・拡張

CSS

  • @scopeルール…CSS適用対象を限定する条件を設定できるようになります。
    • カラースキーム別のプロパティ指定
    • 特定の要素・要素属性値・ID等に限定したプロパティ指定
  • CSSのfloat・clear・resizeプロパティについて、言語別のテキスト記載方向(左→右、右→左、上→下)に依存した相対指定ができるようになります。
    これまで言語によらず「左」「右」のような決め打ち指定しかできなかったのが、言語に依存して「先頭側」のような指定が可能になるので、多言語展開時の実装簡略化に役立ちます。
    • float(浮動表示・テキスト回り込み)
      　float: inline-start; …浮動要素を親要素領域内の【先頭側】に配置します。
      　float: inline-end; …浮動要素を親要素領域内の【末尾側】に配置します。
    • clear(浮動要素に対するテキスト回り込みの解除)
      　clear: inline-start;…回り込みを解除する際に、【先頭側の浮動要素】の次から後続要素を開始します。
      　clear: inline-end;…回り込みを解除する際に、【末尾側の浮動要素】の次から後続要素を開始します。
    • resize(要素の角に縦方向・横方向へのリサイズつまみを設置)
      　resize: block;…リサイズが【ブロック方向】のみ可能になります。(横書きでは縦方向のみ、縦書きでは横方向のみリサイズ可能)
      　resize: inline;…リサイズが【インライン方向】のみ可能になります。(横書きでは横方向のみ、縦書きでは縦方向のみリサイズ可能)
  • prefers-reduced-transparency…メディアクエリのメディア特性項目で、【半透過UIの透明度を下げるOS設定】の有無に基づくスタイル切り替えが可能になります。OS設定のUI透明度設定をWebサイト内に連動させて持ち込むことが可能です。
    通常の色・不透明度指定とは別に、透明度低下設定向けのプロパティ値を入れることで実装を行います。
    @media (prefers-reduced-transparency) {
    　(ここに透明度低下設定向けのプロパティ値を入れる)
    }
  • scripting feature…メディアクエリのメディア特性項目で、スクリプト言語(JavaScript等)のサポートの有無に基づくスタイル切り替えが可能になります。
    　@media (scripting: enabled) { (スタイル指定を入れる) } …スクリプト言語が【有効】な環境向けの処理
    　@media (scripting: initial-only) { (スタイル指定を入れる) } …スクリプト言語が【読み込み中のみ有効】な環境向けの処理 ※ブラウザでは通常使用機会はない
    　@media (scripting: none) { (スタイル指定を入れる) } …スクリプトが言語が【無効】な環境向けの処理
  • CSSのtransform-boxプロパティ(transformで変形を適用する際の参照ボックス指定)で以下の値が指定できるようになります。例えば、「transform-origin:25% 50%;」のように変形の中心座標を指定した際に、そこがどこの領域の横25%・縦50%位置なのかを指定できるようになります。
    　transform-box: content-box; …正味のコンテンツ領域(paddingよりも内側)を対象に適用
    　transform-box: border-box; …境界線外縁までの領域を対象に適用
    　transform-box: stroke-box; …シェイプの線外縁までの領域を対象に適用

Web API

  • Protected Audience API(プライバシーサンドボックス利用時にターゲティングに使うAPI)で、指定したターゲティング集団を広告配信先から除外できるようになります。
  • ページ間遷移時にトランジション処理(ページ間のスライドやフェード等)を行う場合、ページ側で実装したトランジションとブラウザ(User-Agent)側で用意したトランジションの競合を避ける設定が可能になります。
    ブラウザ側のトランジションが発生した場合、API側でPopStateEventとNavigateEventにブール値が渡されます。これを参照することで、ページ側のトランジションを個別に省略できるようになります。
  • Payment Request (API)を使用した決済フローについて、Payment RequestおよびSecure Payment Confirmationを使う際に、ユーザー側での機能別アクティベーションが不要になり、全ユーザーに対して最初から有効になります。
  • WebUSB API(デバイスのUSB端子に接続した機器をブラウザから制御するAPI)が使えるようになります。ただし、APIを使うサービスワーカーがブラウザ拡張に登録されていることが条件です。サイトに登録されたサービスワーカーに対するWebUSB API使用は今のところ未対応です。

オリジントライアル(先行試験実装)

  • WebRTC Encoded Transform API(ビデオ会議用の映像・音声変換を行うAPI)について、メタデータを操作する機能が追加されます。あらかじめ別途エンコード済みのデータをデコードなしでそのまま送受信に回すことも可能になります。

※オリジントライアルは、サイト管理者がオリジントライアル管理画面新しいウィンドウで開きますから対象オリジン(ドメイン)を登録し、発行されたトークンをHTMLにmetaタグとして設置した場合のみ、期間限定で有効になります。(詳細はGoogleの解説新しいウィンドウで開きますを参照)

仕様変更

HTML

  • デフォルト状態で、キーボードでスクロール制御部分のフォーカスが可能になります。(以前はtabIndexに0以上の値を入れる必要があった)　これにより、マウス(やタッチスクリーン等)がない、もしくは使用できない環境でのスクロール操作がしやすくなります。
  • 後方互換(Quirks)モードでoption要素する際に、選択肢表示名にlabel属性の値を使用していたのが廃止されます。今後は常にタグで囲まれたテキストを選択肢表示に利用するようになります。

Web API

  • プライバシーサンドボックス関連APIの開発者登録制度によって、該当開発者が利用登録していないAPIへのアクセスが制限される制度が始まります。
  • JavaScript経由で設定されるCookieに制御文字が入っている場合、Cookie全体がブラウザに拒否されるようになります。(以前は改行等が挟まれた場合、部分的に有効になることがありました)
  • 日本語、アラビア語、ペルシャ語、韓国語、タイ語、簡体字中国語、繁体字中国語について、最小フォントサイズ制限のブラウザデフォルト設定がオフになります。これにより、該当言語にのみあったブラウザ側でのフォントサイズ下限がすべて撤廃され、小さい文字のサイズの扱いが全言語で共通になります。
  • パーセントエンコードでUS-ASCII範囲内の半角英数文字をエンコードした場合、URLパーサーが(勝手に)元の文字に変換していたのが、変換しないように変更されます。
  • libxmlがXMLのCDATAを処理する際に、連続した複数のCDATAセクションが1つのノードにまとめられてしまうようになります。(本来は300バイト超の単一CDATAセクションが意図せず複数のノードに分割されてしまうバグを修正するものだったのですが、副作用が発生している状態)
  • beforeunloadイベントでキャンセルダイアログを表示する処理が一部変更されます。
    • event.preventDefault()が呼び出された場合…キャンセルダイアログが表示されます。
    • event.returnValueが空の場合…キャンセルダイアログは表示されません。

廃止・削除

  • appearanceプロパティ(OSテーマ設定のUIスタイルをそのままWebにも適用するCSS設定)について、以下の非標準キーワードが無効化されます。-webkit-appearanceプロパティでも同様に無効化されます。
    • appearance: inner-spin-button;
    • appearance: media-slider;
    • appearance: media-sliderthumb;
    • appearance: media-volume-slider;
    • appearance: media-volume-sliderthumb;
    • appearance: push-button;
    • appearance: searchfield-cancel-button;
    • appearance: slider-horizontal;
    • appearance: sliderthumb-horizontal;
    • appearance: sliderthumb-vertical;
    • appearance: square-button;
    なお、該当キーワードがある場合、開発者ツールのコンソールに警告が出ます。事前に対応する場合はこちらが活用できます。

※参照：Chrome 118 beta - Chrome Developers (2023/09/13)
　https://developer.chrome.com/blog/chrome-118-beta/新しいウィンドウで開きます

マックスマウスからのお知らせ

Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け！

WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。

いますぐご登録ください！

その他のサービス