デジタルマーケティングTips
2022年8月の各種ブラウザ仕様変更発表まとめ
2022年8月(～9月初め)に公式発表された、各種ブラウザ関連の主要な仕様変更発表のまとめです。
[Twitter | LINE | Instagram | Facebook | TikTok] [Google検索 | ブラウザ]
要点
メルマガでも情報を配信中です！ ぜひご登録ください。
Chrome 106 変更点
Chrome 106での機能追加・修正内容のまとめです。(ベータ版時点での情報)
追加・拡張
Client HintsがAndroid WebViewにも適用
Android WebViewが、他のプラットフォームと同様Client Hintsの適用対象となります。
グリッドサイズ指定用プロパティ
grid-template-columns / grid-template-rowsプロパティにより、グリッド列の各要素に個別に名前を指定し、幅・高さを指定することが可能になります。
SVG等の色調整設定継承指定
forced-color-adjustプロパティの値に、「preserve-parent-color」が指定できるようになりました(従来はauto / noneのみ)。指定すると、親要素の色調整設定をそのまま明示的に該当要素に引き継がせることができます。
サイズ指定単位「ic」追加
CSSでの幅・高さの指定単位に「ic」が追加されます。「水」という漢字(全角文字)のブラウザ上の表示サイズを基準とした倍数での指定(≒実質「全角文字○文字分」相当の指定)が可能となります。
Intl.NumberFormat機能追加
Intl.NumberFormatオブジェクトについて、以下の機能が追加されました。
- formatRange(), formatRangeToParts(), and selectRange()…数値の範囲を規定する関数
- グループ化列挙型
- 端数処理(丸め)オプション・精度オプション
- 端数処理の優先度設定
- 文字列扱いの数字を十進数に変換する機能
- 端数処理モード指定
- signDisplay: "negative"…-0を0と表示する
SerialPort BYOBリーダー
Webからシリアルポート経由でデータ受信する場合に「BYOB(bring your own buffer)」モードが使用可能になります。データ読み取りバッファを指定可能になるため、受信データ量やメモリ負荷の制御がしやすくなります。
WebCodecsにdequeueイベント追加
WebCodecsで映像・音声を変換する際に、キュー対象の変換が完了した際にdequeueイベントが発火するようになります。
ポーズ同期カメラ映像へのアクセス
WebXRでカメラでアクセスする際に、ポーズに同期したカメラのイメージにアクセスできるようになります。
オリジントライアル(先行試験実装)
Anonymous iframe
COEP(Cross-Origin-Embedder-Policy)ポリシーの設定されていない、未認証のサードパーティiframeを表示する手段が追加されます。(Chrome 108まで試験実施予定)
Pop-Up API
他のWebアプリのインターフェイス要素最上部にUI要素を表示するAPIです。(Chrome 110まで試験実施予定)
仕様変更
ハイフネーション文字指定CSSの移行
ハイフネーション文字を指定するCSSプロパティ「-webkit-hyphenate-character」の汎用版「hyphenate-character」がChromeでサポートされるようになりました。
これに伴い、「-webkit-hyphenate-character」はいずれサポートから外される予定です。
廃止・削除
Cookieのドメイン指定で非ASCII文字を排除
Cookieにおいて、Domain属性の値(ドメイン名)にASCII以外の文字を指定できなくなります。(Firefoxでは既に仕様変更済み)
国際化ドメイン名の場合、ASCII以外の文字を生で指定していた場合、これまでChromeではPunycodeへの変換を試みていましたが、今後はPunycode等でASCII変換した国際化ドメイン名をあらかじめ指定しておく必要があります。
HTTP/2のサーバーからのpushを無効化
HTTP/2の機能のうち、サーバーからストリームをpushする機能が削除されます。
表示高速化のための代替技術としては、103 Early Hintsや重要データの先行読み込みが挙げられています。
※参照：Chromium Blog: Chrome 106 Beta: New CSS Features, WebCodecs and WebXR Improvements, and More (2022/09/01)
https://blog.chromium.org/2022/09/chrome-106-beta-new-css-features.html
Chrome 105 変更点
Chrome 105での機能追加・修正内容のまとめです。(ベータ版時点での情報)
追加・拡張
Custom Highlight API
選択、スペル・文法エラーの疑似要素をハイライト表示する際の文字色・背景色を指定できるようになります。
コンテナクエリ
CSSでコンテナクエリが使用できるようになります。
メディアクエリがブラウザ幅によってCSSを切り替えるのに対して、コンテナクエリでは各コンテナの幅によってCSSが切り替えられます。
:has()疑似クラス
疑似クラスを付与した要素内に、指定した要素が含まれる場合に適用されるスタイルを記述できます。
フェッチアップロードストリーミング
Streams API (ReadableStream) を使用したWeb上のストリーミングデータ送信について、コンテンツ全体の準備ができていない状態であっても、データの送信が可能になります。
これによりコンテンツ全体の準備ができるまでデータ送信を待つ必要がなくなり、パフォーマンスの向上が改善します。
Webアプリのウィンドウ制御
Webアプリのタイトルバーや各種ウィンドウ制御ボタン(最小化・最大化・閉じる)等の表示を変更可能になります。Webアプリでも、PCのネイティブアプリと同様のウィンドウデザインが可能になります。
Media Source Extensions APIの改良
Media Source Extensions APIがDedicatedWorkerコンテキストから利用可能になり、メディア再生時にバッファリングする際のパフォーマンスが向上します。
(オリジントライアルから正規機能に昇格)
Client Htntsでビューポートの高さが取得可能
Client Hintsで、新たに「Sec-CH-Viewport-Height」が使えるようになりました。Accept-CHヘッダーにSec-CH-Viewport-Heightを渡すことで、ビューポートの高さの情報を伝達できるようになります。
(オリジントライアルから正規機能に昇格)
画面キャプチャ時のシステムオーディオ利用選択
MediaDevices.getDisplayMedia()で画面の動画キャプチャを行う場合、システム音声を含めるかどうかを、 systemAudio: "include" もしくは systemAudio: "exclude" で指定できるようになります。(PC版でのみ有効)
TransformStreamDefaultControllerの利用条件拡張
ストリーミング(読み書き)の操作に使用するTransformStreamDefaultControllerクラスが、グローバルスコープで利用可能になります。
HTML Sanitizer API
ユーザーから送信されるコンテンツから、脆弱性の元になる実行可能コードを削除するAPIが使えるようになります。105では「 Element.setHTML() 」のみがサポート対象で、今後追加される予定です。
import.meta.resolve()
指定子が現在のスクリプトのコンテキストで解決されるURLを返すメソッドが追加されました。これまでよりも短い記述で同様の機能が実現可能になります。
Navigation APIの機能拡張
NavigateEventに以下のメソッドが追加されます。
- NavigateEvent.intercept()…ナビゲーションに後続する状態を開発者側で制御できます。従来のtransitionWhile()を置き換えるもので、使いやすさが改善されます。
- NavigateEvent.scroll()…URL内の指定アンカーまでスクロールできます。従来のrestoreScroll()を置き換えるもので、使えるナビゲーションタイプが限定的だったのが改善されます。
onbeforeinput
beforeinputイベントの取り扱い方法として、「onbeforeinput」をグローバルイベントハンドラとして使用できるようになりました。
Opaque Response Blocking
オリジン間リソース共有におけるセキュリティ対策(no-corsサブリソースのクロスオリジン開示防止)として、Cross-Origin Read Blockingに代わる「Opaque Response Blocking」の実装が始まりました。
Picture-in-Picture API (Android)
Webサイト内で動画をピクチャーインピクチャー(子画面)再生するAPIが、Android版Chromeでも利用できるようになります。
Response.json()静的メソッド
Response.json()静的メソッドが使えるようになり、直接JSONオブジェクトを作成できるようになります。
File System Access APIの利便性向上
File System Access APIについて、従来アクセス取得作業が別々に必要だった読み取りと書き込みが、1つの処理でこなせるようになりました。
仕様変更
マルチスクリーン用画面名の変更
マルチスクリーンコンテンツを扱う際に画面を指定する名称(画面ラベル)について、「外部ディスプレイ1」のような抽象的なものから、OSで認識されている具体的な機種名等に置き換えられます。
ただしこれが有効になるのは、ユーザー側でサイトに許可(window-placement)を与えた場合に限ります。
固定要素のオーバースクロール抑止
CSSで表示位置固定(position: fixed;)に指定した要素は、スクロール境界到達時の効果指定(overscroll-behavior)が無効になります。これにより、固定位置の要素がオーバースクロール効果でうっかり移動したりする現象を防ぐことができます。
マークアップによるClient Hints権限移譲の記述方式変更
サードパーティコンテンツにClient Hints移譲を行う際のHTMLマークアップの方式が変更されます。
廃止・削除
WebSQLの非セキュア環境での利用停止
非セキュアなコンテキストでのWebSQL対応が削除されます。
また、将来的にWebSQLの利用状況に応じて、WebSQLが全面的に対応外になる可能性も示唆されています。
CSSカスタム識別子で「default」の使用を禁止
CSSのカスタム識別子名への使用が禁止されている予約語に、「default」が追加されます。
Navigation APIの一部メソッド廃止
NavigateEvent.transitionWhile() および NavigateEvent.restoreScroll()がChrome 105から非推奨となり、108で削除されます。
Cookieのドメイン指定で非ASCII文字を排除
Cookieにおいて、Domain属性の値(ドメイン名)にASCII以外の文字を指定できなくなります。
105より警告が表示され、106で削除されます。
ジェスチャースクロールDOMイベント廃止
ジェスチャースクロールに関するイベント「gesturescrollstart」「gesturescrollupdate」「gesturescrollend」への対応が削除されます。
※参照：Chromium Blog: Chrome 105 Beta: Custom Highlighting, Fetch Upload Streaming, and More (2022/08/05)
https://blog.chromium.org/2022/08/chrome-105-beta-custom-highlighting.html
Google Developers Japan: Chrome 105 ベータ版 : カスタム ハイライト、フェッチ アップロード ストリーミングなど (2022/08/26)
https://developers-jp.googleblog.com/2022/08/chrome-105.html
マックスマウスからのお知らせ
Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け！
WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。
いますぐご登録ください！
