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

2022年5月の各種ブラウザ仕様変更発表まとめ

記事タイトル画像：2022年5月の各種ブラウザ仕様変更発表まとめ

2022年5月に公式発表された、各種ブラウザ関連の主要な仕様変更発表のまとめです。

記事バックナンバー一覧

[Twitter | LINE | Instagram | Facebook | TikTok] [Google検索 | ブラウザ]

要点

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

Chrome 103新機能・仕様変更

Chrome 103で実装予定の新機能・仕様変更のまとめです。(ベータ版時点での情報)

追加・拡張

103 Early Hints

重要ファイルの先行読み込み・表示高速化に使えるHTTPステータスコード「103 Early Hints」に対応します。 ※Webサーバー側での対応が必要です

ローカルフォントへのアクセス

Webアプリにおいて、端末ローカルフォントをフォント指定に列挙できるようになります。(オリジントライアルから正規機能に昇格)

以前102で搭載予定と報じられていましたが、103で搭載予定と修正されました。

Speculation Rules API

Speculation Rules APIによる同ドメイン内ページのプリレンダリング指定に対応します。表示を高速化するページ指定用の推測ルールをJSON形式で記述できるようになります。(オリジントライアルから正規機能に昇格)

User-agent Client HintsのGREASE文字

User-agent Client Hintsにおいて、セミコロン＋スペースのあとの部分に一部の記号を利用可能になります。(オリジントライアルから正規機能に昇格)

AbortSignal.timeout()静的メソッド

AbortSignal.timeoutについて、指定した時間(ミリ秒単位)が経過すると自動中断扱いとなるAbortSignalオブジェクトを返すようになります。 (タイムアウト判定処理向け)

ARIAプロパティ対応強化

要素のrole属性にARIAプロパティを直接指定可能になります。

Web Share APIのavif対応

Web Share APIでavif画像が利用可能になります。

※Web Share API…ユーザーが任意の宛先を指定してテキストや画像をWebサイト上から共有できるようにするAPI (Windows・ChromeOS版Chromeで利用可能)

圧縮データ対応拡張

deflate-raw形式の圧縮データ(zip等)が取り扱い可能になります。

フォーム要素のrel属性

フォーム要素にrel属性が利用可能になります。これにより、rel=noopenerやrel=noreferrerが指定できるようになります。

SerialPort.forget()メソッド

SerialPort.forget()メソッドにより、ユーザーが出したシリアルポート接続許可を削除できるようになります。共用PCでの利用を前提としたシステム等で活用可能です。

overflow-clip-marginの書式拡張

CSSのoverflow-clip-marginプロパティ(overflow: clip時の表示限界範囲指定)に、visual-box系の値(content-box、padding-box、border-box)を指定できるようになります。

デフォルトはpadding-box＝枠線内側0pxまでで、従来の仕様からの変更はありません。

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

Federated Credentials Management API

サードパーティCookieなしでサイト間をまたぐユーザー認証技術について、デスクトップ版Chromeでもトライアルが開始します。 ※Androidでは101でオリジントライアル開始済み

仕様変更

popstateイベントのタイミング修正

URL変更(戻る/進むボタン)時のpopstateイベント発動タイミングを、「読み込み後発動」→「URL変更後すぐ発動」(Firefoxと同じ)に変更します。

これにより、イベント発動順的に、popstateが確実にhashchangeよりも先に発動し、発動順の不安定さを解消します。

※popstate…URL変更の前後でアクティブな履歴項目に変更があった場合に発行されるイベント

gamepadの許可リスト入り

「self」のデフォルト許可リストに「gamepad」が追加されます。

Secure Payment Confirmation認証処理の条件制限

クロスドメインiframeでのSecure Payment Confirmation認証処理について、ユーザー側での有効化処理が必須になります。

廃止・削除

非暗号化でのGamepad API利用終了

Gamepad APIの利用環境が暗号化(https)接続に限定されます。

httpで接続した場合は、空配列を返すようになります。

サンドボックスiframeからの外部呼び出し遮断

サンドボックス化iframeからの外部プロトコル呼び出し(allow-popup等)がブロックされるようになります。

非暗号化でのBattery Status API利用終了

Battery Status APIの利用環境が暗号化(https)接続に限定されます。

httpでの接続は対応終了になります。

param要素終了

param要素への対応が終了になります。

※参照：Chrome 103 Beta: Early Navigation Hints, a Host of Completed Origin Trials, and More (2022/05/26)
　https://blog.chromium.org/2022/05/chrome-103-beta-early-navigation-hints.html新しいウィンドウで開きます

Safari 15.5 変更点

Safari 15.5での機能追加・修正内容のまとめです。

追加

  • inert属性…フォーカスやクリックの対象から外す不活性要素につける属性
  • worker-src…Workerスクリプトの動作領域を制限できるコンテンツセキュリティポリシー用ディレクティブ
  • minimumViewportInset / maximumViewportInset … WebKit WebView用の追加ビューポート

仕様変更・修正

HTML

  • モーダルの裏にあるSVGがクリッカブルにならないように修正
  • dialog要素が1回しかアニメーションしないのを修正
  • USDZがメインリソースとして読み込まれた場合のレンダリングを修正
  • .pagesファイルのアップロードに対して、入力として.pages以外に.jpegを受け付けるよう修正

Web API

  • BroadcastChannelが明確に不透明なオリジン間で通信するのを防止
  • COOP (Cross Origin Opener Policy)ベースのプロセススワップ中のWebサイトポリシーの扱いを修正
  • PointerEvent.movementXが常に0になるように修正
  • ページがページキャッシュに入ったときのフェッチプロミスの問題を修正
  • ポインターイベントについて、キャプチャーターゲットのオーバーライドがない場合にのみヒットテストを実行するよう修正
  • window.openでドキュメントを生成した場合にサイトの演算を行うよう修正
  • Element.focus({preventScroll: true})がiOSで正常にスクロールを防止するよう修正

CSS

  • background-attachement: fixed 時のスクロールを修正
  • background-clip: text が display: flex で動作するよう修正
  • position: sticky 要素のレンダリングを修正
  • position: sticky 要素のスクロール時の動作異常を修正
  • span内のテキストについて、兄弟要素がwill-change: transform を持っているときに不透明度が更新されない問題を修正
  • スクリプト経由でフォーカスした際に:focus-visibleが間違った要素にマッチングする件を修正
  • text-shadowがクリッピングされる問題を修正
  • contain: paint 内でのposition: sticky 要素の挙動を修正
  • aspect-ratioをパーセンテージ指定した際の問題を修正
  • transitionもしくはanimationの簡略表記がない要素に対してデフォルトの演算方式を返すよう修正

認証

  • WebAuthnの実装について、makeCredentialのリストが空の場合、デフォルトのpubKeyCredParamsを使用するよう指定

コンテンツセキュリティポリシー

  • objectエレメント内での画像コンテンツのブロックを修正
  • ドキュメントの要素分離に対して違反レポートを送信する件を修正
  • nonceをDOMから隠蔽するのを改善
  • CSPにおけるJavaScript URLの取り扱いを改定

メディア

  • ネイティブHLSプレーヤーと合わせたモダンEMEにおいて、シングルキー音声のキーローテーションを修正
  • Safariでの動画再生時におけるコントロールセンターの空間コントロールが無効化されているのを修正
  • 追加パラメータを通した場合の、QuickLookでのモデル呼び出しを修正
  • ミュート再生動画をフルスクリーン化した際に停止する場合があるのを修正
  • iPhone 7上での動画再生を修正
  • HEVC動画について、スライディングウィンドウが広く設定されたBフレームが多くなるようエンコードされた場合の再生問題を修正
  • HLSストリーミング時にcurrentTimeがときどき逆方向に飛ぶのを修正
  • BLOB形式動画の一時停止が遅くなるのを修正
  • カメラを一時停止→解除した場合の音声エコーを修正
  • 無制限範囲指定でのHTML5埋め込み音声の再生を修正
  • 動画再生時にポスター画像が消えるタイミングが早すぎて、透明なvideo要素だけが表示されるのを修正

WebRTC

  • 選択言語に関わらずgetUserMediaが不正確なラベルを返していたのを修正
  • 音声の知覚レイテンシーを削減

レンダリング

  • 一定以上のウィンドウ幅でのテキスト折り返しを修正
  • 韓国語Webフォントレンダリングの問題を解決
  • transformの数値変更時にレンダリングが崩れることがある問題を修正
  • transform関連のアニメーションでテキストコンテンツが消えるのを修正
  • colgroupがthead / tbody / tfoot / tr要素に後続する場合、表のサイズ調整に使用するよう変更
  • bopomofo(台湾の注音符号)フォントでの縦書き時に、一部声調記号の位置に問題があったのを、正しい位置に修正

Apple Pay

  • iOSでApple PayシートがbillingContactを返すよう修正

WebGL

  • iOSでpreserveDrawingBufferを使用した場合のWebGLレンダリングを修正
  • 多くのWebGLコンテンツで問題になっていたマルチサンプリング関連の問題を多数修正
  • TypedArrayがAllowSharedと一緒に扱われるのを許可するよう修正
  • WEBGL_multi_drawの認証を修正

Webインスペクタ

  • リモートデバイスからの大型メッセージの取り扱いを修正
  • 開閉の繰り返しを修正

互換性

  • SafariからのMicrosoft Teams呼び出しを修正

SFSafariViewController

  • YouTube動画のフルスクリーン再生時に画面を回転させた場合の遅延問題を修正

機能拡張

  • Safari App Extensionツールバーアイテムをクリックしたときにクラッシュするのを修正
  • iOSでSFContentBlockerManager.getStateOfContentBlocker()が不正確な値を返すことがある問題を修正
  • Safari Web Extensionにoptional_host_permissionsへの対応を追加

※参照：New WebKit Features in Safari 15.5 - Webkit Blog (2022/05/16)
　https://webkit.org/blog/12669/new-webkit-features-in-safari-15-5/新しいウィンドウで開きます

Firefox 100 変更点

Firefox 100での機能追加等のまとめです。

  • ピクチャーインピクチャー動画再生でサブタイトルを使用可能
  • 壁紙を追加
  • 履歴・タブの整理機能を強化
  • HTTPS限定モード(Android版のみ)
  • 初回起動時にアプリの言語を自動設定
  • クレジットカード情報の自動入力について、北米以外に英仏独の3ヶ国にも対応

※参照：Celebrating Firefox: How we got to 100 - Mozilla Blog (2022/05/03)
　https://blog.mozilla.org/en/mozilla/celebrating-firefox-100/新しいウィンドウで開きます

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

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

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

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

その他のサービス