デジタルマーケティングTips
2023年1月の各種ブラウザ仕様変更発表まとめ
2023年1月に公式発表された、各種ブラウザ関連の主要な仕様変更発表のまとめです。
[Twitter | LINE | Instagram | Facebook | TikTok] [Google検索 | ブラウザ]
要点
メルマガでも情報を配信中です！ ぜひご登録ください。
Chrome 110 変更点
Chrome 110での機能追加・修正内容のまとめです。(ベータ版時点での情報)
追加・拡張
- initial-letter CSSプロパティ…段落の先頭等にドロップキャップ(文字を複数行使って大きく表示するレイアウト)が使えるようになります。
- :picture-in-picture CSS疑似クラス…ピクチャーインピクチャー動画の表示をカスタマイズするための疑似クラスが使えるようになります。
- AudioContext.setSinkId()…音声出力先のオーディオデバイスにIDを振り、出力先を切り替えられるようになります。
- FedCMがクロスオリジンiframeの中でも使用できるようになります。
※Federated Credential Management(FedCM)…ログイン用ID連携手法の一つ - IFrame credentialless…COEP(クロスオリジン埋め込みポリシー)設定済みのサイトでも、COEP未設定のサードパーティiframeからコンテンツを読み込みできるようになります。
- FileSystemHandle::remove()メソッド…showSaveFilePicker()でファイルハンドルを取得したのち、不要になった場合に破棄することが可能になります。
- Speculation rules APIによるメインリソースのプリフェッチが可能になります。
- 国際化ドメイン名処理において、IDNA 2008のNon-Transitionalモードが使えるようになります。これにより、ß(小文字エスツェット)・ς(語末用小文字シグマ)・ゼロ幅接合子・ゼロ幅非接合子を含む国際化ドメインがChromeでも扱えるようになります。
- launch_handler…Webアプリの読み込み形態をカスタマイズできるようになります。例えば、すべてのWebアプリを新規ウィンドウではなく既存ウィンドウで開く等の設定が可能です。
- navigator.share()へのアクセスが制御できるようになります。(サードパーティiframeがWeb Share APIを使って共有したり等)
オリジントライアル(先行試験実装)
- No-Vary-Search HTTPヘッダー…URLのクエリパラメーターのうち、キャッシュのキーとして考慮しないものを指定できるようになります。
- PerformanceResourceTiming.deliveryType…リソースがどのような方法で伝達されたか(キャッシュから、前のページから等)の情報を取得できるようになります。
- SoftNavigation(ジェスチャーでURL遷移動作を起こせるようになる)が利用可能になります。
- Speculation rule(投機的先読みルール)を、インラインスクリプトタグ以外にSpeculation-Rules:ヘッダーでも指定できるようになります。MIMEタイプをapplication/speculationrules+jsonにしておくことが条件となります。
- Speculation rule(投機的先読みルール)を、link要素に記載した外部URLから取得できるようになります。
※オリジントライアルは、サイト管理者がオリジントライアル管理画面
から対象オリジン(ドメイン)を登録し、発行されたトークンをHTMLにmetaタグとして設置した場合のみ、期間限定で有効になります。(詳細はGoogleの解説を参照)
デプリケーショントライアル(廃止猶予)
- X-Requested-With…Android Webviewで使われるX-Requested-Headerヘッダー(埋め込みアプリのパッケージ名が入る)の廃止を一時的に先延ばしにします。
※デプリケーショントライアルは、サイト管理者がオリジントライアル管理画面から対象オリジン(ドメイン)を登録し、発行されたトークンをHTMLにmetaタグとして設置した場合のみ、期間限定で有効になります。(詳細はGoogleの解説を参照)
廃止・削除
- 非セキュア環境でのWebSQL対応が削除されます。代替としてはSQLite Wasmが推奨されています。
- window.webkitStorageInfo…Quota APIよりも前に使われていた旧式のストレージ上限機能が対応対象外となります。
※参照：Chrome 110 beta - Chrome Developers (2023/01/12)
https://developer.chrome.com/blog/chrome-110-beta/
Safari 16.3 変更点
Safari 16.3での機能追加・修正内容のまとめです。
追加・拡張
コンテンツセキュリティポリシー
- prefetch-srcディレクティブに対応しました。
Webサーバー設定で Content-Security-Policy HTTPヘッダーを出す設定にしてある場合、サーバーのレスポンスヘッダー出力内で
Content-Security-Policy: prefetch-src ○○(ドメイン等);
のように指定すると、クライアント(Webページ)側から事前読み込み指定を出したときに許可する外部リソースをサーバー側で制限し、セキュリティを向上できます。
修正・改善
CSS
- MediaQueryList.matchesについて、親ドキュメントのレイアウトをビューポート依存のメディアクエリに合うよう修正されました。
- aspect-ratioについて、変換の最小値・最大値について、定義したサイズ内に制限されるよう修正されました。
- gapのトラック位置を計算する際に、非固定サブグリッドのトラックサイズを使用するように修正されました。
- ブロックサイズを計算する際、 box-sizingの正しい値を使用して計算するよう修正しました。
- min・maxの値について、定義したサイズ内に制限されるよう修正されました。
- 要素入れ替え時のサイズ計算に、素材固有のアスペクト比を使用するよう修正されました。
- box-sizing: border-box(border・padding指定付き)指定時にコンテンツサイズの値がマイナスになる件が修正されました。
- overscroll-behavior: noneに設定したページで固定エレメントがスクロール限界からオーバーフローした場合のscrollTopの扱いが修正されました。
レンダリング
- 要素のアスペクト比と1次元のサイズを変更した際に、逆側の最大値・最小値制限に対応するよう修正されました。
Web API
- Content-Encoding: gzip設定つきのfetchでダウンロードした圧縮コンテンツの解凍が修正されました。
- 先読みを使用するService Workerから提供されるダウンロードが修正されました。
- リンク先読みが同期して失敗する場合のエラーイベント追加が修正されました。
- Cross-Origin-Embedder-Policyが正しくない形でスクリプトをブロックしているのが修正されました。
- リクエストヘッダー変更時に認証ヘッダーが後続する301リダイレクト用に使用されるのが修正されました。
- フォーカスデリゲートを持つシャドウホストがターゲットになった場合のダイアログ要素表示が修正されました。
コンテンツセキュリティポリシー
- script-srcディレクティブ・default-srcディレクティブにおいて、'strict-dynamic'指定のチェックが修正されました。
- コンテンツセキュリティポリシーがインラインスタイルシートをブロックした場合のエラーイベント追加について修正が行われました。
メディア
- Web Audioの出力先が勝手にスピーカーからヘッドホンに切り替えられるのが修正されました。
- 2つめのMediaStreamがaspectRatio制限つきで作成された場合の、動画トラックのサイズ設定が修正されました。
- Media Session APIのアートワーク表示が修正されました。
- 音声入力デバイスにBluetoothヘッドホンを選択したときに「MediaStreamTrackがキャプチャの失敗により終了しました」というエラーになるのが修正されました。
- WebVTT(動画のテキスト字幕)のスタイルが適用されるよう修正されました。
- コーデック名指定でVPxを指定する際の名称にvp8.0・vp9.0が指定できるよう修正されました。
SVG
- SVGの中に別オブジェクト(foreignObject)が設定されていて、別オブジェクトをクリックした場合、offsetX・offsetY(クリック位置のXY座標の数値)が「SVGコンテナ原点からの相対座標」ではなく「該当要素原点からの相対座標」を返すよう修正されました。
Webサーバー設定で Content-Security-Policy HTTPヘッダーを出す設定にしてある場合、サーバーのレスポンスヘッダー出力内で
Content-Security-Policy: prefetch-src ○○(ドメイン等);
のように指定すると、クライアント(Webページ)側から事前読み込み指定を出したときに許可する外部リソースをサーバー側で制限し、セキュリティを向上できます。
- MediaQueryList.matchesについて、親ドキュメントのレイアウトをビューポート依存のメディアクエリに合うよう修正されました。
- aspect-ratioについて、変換の最小値・最大値について、定義したサイズ内に制限されるよう修正されました。
- gapのトラック位置を計算する際に、非固定サブグリッドのトラックサイズを使用するように修正されました。
- ブロックサイズを計算する際、 box-sizingの正しい値を使用して計算するよう修正しました。
- min・maxの値について、定義したサイズ内に制限されるよう修正されました。
- 要素入れ替え時のサイズ計算に、素材固有のアスペクト比を使用するよう修正されました。
- box-sizing: border-box(border・padding指定付き)指定時にコンテンツサイズの値がマイナスになる件が修正されました。
- overscroll-behavior: noneに設定したページで固定エレメントがスクロール限界からオーバーフローした場合のscrollTopの扱いが修正されました。
レンダリング
- 要素のアスペクト比と1次元のサイズを変更した際に、逆側の最大値・最小値制限に対応するよう修正されました。
Web API
- Content-Encoding: gzip設定つきのfetchでダウンロードした圧縮コンテンツの解凍が修正されました。
- 先読みを使用するService Workerから提供されるダウンロードが修正されました。
- リンク先読みが同期して失敗する場合のエラーイベント追加が修正されました。
- Cross-Origin-Embedder-Policyが正しくない形でスクリプトをブロックしているのが修正されました。
- リクエストヘッダー変更時に認証ヘッダーが後続する301リダイレクト用に使用されるのが修正されました。
- フォーカスデリゲートを持つシャドウホストがターゲットになった場合のダイアログ要素表示が修正されました。
コンテンツセキュリティポリシー
- script-srcディレクティブ・default-srcディレクティブにおいて、'strict-dynamic'指定のチェックが修正されました。
- コンテンツセキュリティポリシーがインラインスタイルシートをブロックした場合のエラーイベント追加について修正が行われました。
メディア
- Web Audioの出力先が勝手にスピーカーからヘッドホンに切り替えられるのが修正されました。
- 2つめのMediaStreamがaspectRatio制限つきで作成された場合の、動画トラックのサイズ設定が修正されました。
- Media Session APIのアートワーク表示が修正されました。
- 音声入力デバイスにBluetoothヘッドホンを選択したときに「MediaStreamTrackがキャプチャの失敗により終了しました」というエラーになるのが修正されました。
- WebVTT(動画のテキスト字幕)のスタイルが適用されるよう修正されました。
- コーデック名指定でVPxを指定する際の名称にvp8.0・vp9.0が指定できるよう修正されました。
SVG
- SVGの中に別オブジェクト(foreignObject)が設定されていて、別オブジェクトをクリックした場合、offsetX・offsetY(クリック位置のXY座標の数値)が「SVGコンテナ原点からの相対座標」ではなく「該当要素原点からの相対座標」を返すよう修正されました。
- Content-Encoding: gzip設定つきのfetchでダウンロードした圧縮コンテンツの解凍が修正されました。
- 先読みを使用するService Workerから提供されるダウンロードが修正されました。
- リンク先読みが同期して失敗する場合のエラーイベント追加が修正されました。
- Cross-Origin-Embedder-Policyが正しくない形でスクリプトをブロックしているのが修正されました。
- リクエストヘッダー変更時に認証ヘッダーが後続する301リダイレクト用に使用されるのが修正されました。
- フォーカスデリゲートを持つシャドウホストがターゲットになった場合のダイアログ要素表示が修正されました。
コンテンツセキュリティポリシー
- script-srcディレクティブ・default-srcディレクティブにおいて、'strict-dynamic'指定のチェックが修正されました。
- コンテンツセキュリティポリシーがインラインスタイルシートをブロックした場合のエラーイベント追加について修正が行われました。
メディア
- Web Audioの出力先が勝手にスピーカーからヘッドホンに切り替えられるのが修正されました。
- 2つめのMediaStreamがaspectRatio制限つきで作成された場合の、動画トラックのサイズ設定が修正されました。
- Media Session APIのアートワーク表示が修正されました。
- 音声入力デバイスにBluetoothヘッドホンを選択したときに「MediaStreamTrackがキャプチャの失敗により終了しました」というエラーになるのが修正されました。
- WebVTT(動画のテキスト字幕)のスタイルが適用されるよう修正されました。
- コーデック名指定でVPxを指定する際の名称にvp8.0・vp9.0が指定できるよう修正されました。
SVG
- SVGの中に別オブジェクト(foreignObject)が設定されていて、別オブジェクトをクリックした場合、offsetX・offsetY(クリック位置のXY座標の数値)が「SVGコンテナ原点からの相対座標」ではなく「該当要素原点からの相対座標」を返すよう修正されました。
- Web Audioの出力先が勝手にスピーカーからヘッドホンに切り替えられるのが修正されました。
- 2つめのMediaStreamがaspectRatio制限つきで作成された場合の、動画トラックのサイズ設定が修正されました。
- Media Session APIのアートワーク表示が修正されました。
- 音声入力デバイスにBluetoothヘッドホンを選択したときに「MediaStreamTrackがキャプチャの失敗により終了しました」というエラーになるのが修正されました。
- WebVTT(動画のテキスト字幕)のスタイルが適用されるよう修正されました。
- コーデック名指定でVPxを指定する際の名称にvp8.0・vp9.0が指定できるよう修正されました。
SVG
- SVGの中に別オブジェクト(foreignObject)が設定されていて、別オブジェクトをクリックした場合、offsetX・offsetY(クリック位置のXY座標の数値)が「SVGコンテナ原点からの相対座標」ではなく「該当要素原点からの相対座標」を返すよう修正されました。
※参照：WebKit Features in Safari 16.3 - Webkit Blog (2023/01/23)
https://webkit.org/blog/13691/webkit-features-in-safari-16-3/
Firefox 108/109 変更点
Firefox 108.0.2～109.0.1での機能追加・修正内容のまとめです。
追加・拡張
- 機能拡張の新バージョン「Manifest Version 3」(MV3)がデフォルトで有効になりました。MV2のサポートは継続されます。
- Arbitrary Code Guard(プログラム乗っ取り保護)がメディア再生プロセスで有効になりました。
- 標準の日付・時刻ピッカーの入力機能がキーボードのみでの操作に対応し、アクセシビリティが向上しました。
- スペイン語版Firefox(スペイン版・アルゼンチン版)で、同言語の辞書が内蔵され、スペルチェッカーが使えるようになりました。
- 最近閉じたタブのリストからユーザーが履歴を任意で削除できるようになりました。
修正・改善
- Windows版でフォントスムージング有効時に一部設定でレンダリングが低品質になる件について、変更が元に戻されました。
- 大量の絵文字を含むページの読み込み中に表示がおかしくなる件が修正されました。
- 一部エンタープライズ環境でページ読み込み中に認証プロンプトが表示されなくなる問題が修正されました。
- 開発者ツールでの調査中にイベントリスナーチェックボックスのサイズの一貫性がなくなる件が修正されました。
- Mac OS X 10.12～10.14で動画再生中に発生するブラウザクラッシュが修正されました。
- ブラウザ履歴管理中に発生するブラウザクラッシュが修正されました。
- Firefox View使用時、[タブピックアップ][最近閉じたタブ]セクションに空のメッセージ・グラフィックコンポーネントが入っていたのが修正されました。
- その他各種セキュリティ修正が行われました。
仕様変更
- macOSで、Ctrl/Cmdを押しながらのトラックパッド/マウスホイール操作が、ズームからスクロールに変更されました。
- WebRTCの「タブ共有デバイス」メニューが、macOSに限りツールメニュー内に配置されました。
廃止・削除
- Colorway(デザインテーマ機能)が2023年1月16日をもって標準機能としては終了しました。アドオンとしては有効化すれば継続して利用可能です。保存・適用済みのColorwayはメニュー・テーマ設定で呼び出すことができます。
※参照：Firefox 108.0.2, See All New Features, Updates and Fixes - Firefox Release Notes (2023/01/05)
https://www.mozilla.org/en-US/firefox/108.0.2/releasenotes/
Firefox 109.0, See All New Features, Updates and Fixes - Firefox Release Notes (2023/01/17)
https://www.mozilla.org/en-US/firefox/109.0/releasenotes/
Firefox 109.0.1, See All New Features, Updates and Fixes - Firefox Release Notes (2023/01/31)
https://www.mozilla.org/en-US/firefox/109.0.1/releasenotes/
マックスマウスからのお知らせ
Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け！
WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。
いますぐご登録ください！
