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

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

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

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

記事バックナンバー一覧

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

要点

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

Chrome 112 変更点

Chrome 112での機能追加・修正内容のまとめです。(ベータ版時点での情報)

追加・拡張

  • CSSのスタイルルールを入れ子で記述できるようになります。
  • animation-composition…複数のアニメーション処理を合成して扱えるようになります。
  • FormDataコンストラクタでフォームオブジェクトを生成するときに、送信ボタンにパラメーターを設定できるようになります。
  • 正規表現の文字クラスで以下を扱えるようになります。
    　セット演算
    　文字列リテラル
    　入れ子になったクラス
    　文字列のUnicodeプロパティ情報
  • WebAssemblyに、明示的末尾呼び出し・間接的末尾呼び出しが追加されます。
  • Web WorkerでWebGLContextEventが使えるようになります。
  • WebViewのHTTPS接続で、Brotli(br)形式の可逆圧縮が汎用的に利用できるようになります。

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

  • Auto re-authentication API…FedCMで再認証が必要になった場合に自動で再認証処理を行えるようになります。

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

仕様変更

  • 許可の状態が変更した際に、再読み込みを促す表示が出なくなります。
  • dialog要素が開かれたときのフォーカス関連の挙動が変更になります。
    　フォーカスステップ時、キーボードがフォーカス可能な要素に限定してフォーカスを行う
    　dialogにautofocus属性が設定されている場合は、dialog要素自体がフォーカスを受ける
    　フォールバック時、body要素にフォーカスがリセットされる代わりに、dialog要素自体がフォーカスを受ける
  • no-op(ノーオペレーション、無演算)サービスワーカーのフェッチハンドラー処理がスキップ対象になります。これにより処理が高速化されます。

デプリケーショントライアル(廃止猶予)

  • RTCPeerConnectionのgetStatsメソッド…type == "track"もしくは"stream"の場合、統計オブジェクトを返さなくなります。デプリケーショントライアルに登録すると本機能の削除をオリジン単位で115まで猶予できます。登録しない場合、本機能はChrome 112で削除されます。
  • X-Requested-With…クロスオリジン読み込みの制限を回避するヘッダーの非推奨化について、デプリケーショントライアルに登録すると本機能の削除を猶予できます。

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

廃止・削除

  • document.domain…同一オリジンポリシーの制限緩和を行う機能ですが、セキュリティ境界が複雑になるため非推奨化対象となります。
  • RTCPeerConnectionのgetStatsメソッドについて、type == "track"もしくは"stream"の場合、統計オブジェクトを返さなくなります。(デプリケーショントライアルでChrome 115まで猶予可)

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

Firefox 111 変更点

Firefox 111.0～111.0.1での機能追加・修正内容のまとめです。

追加・拡張

  • Windowsネイティブの通知機能に対応しました。
  • Firefox Relay(メールアドレスマスク＝フォーム入力時メールアドレスを知られたくない場合のための別名設定機能)について、Firefoxの認証情報マネージャーから直接マスク(別名)を生成できるようになりました。使用するにはFirefoxへのログインが必要です。
  • フリウリ語・サルデーニャ語のロケールが追加されました。
  • フォームの要素にrel属性が付与できるようになりました。
  • ストレージファイル操作用のAPIで、Webアプリからサンドボックス内ファイルシステムのデータの読み書きができるようになりました。

修正・改善

  • 各種バグ修正が行われました。

※参照：Firefox 111.0, See All New Features, Updates and Fixes - Firefox Release Notes (2023/03/14)
　https://www.mozilla.org/en-US/firefox/111.0/releasenotes/新しいウィンドウで開きます
　Firefox 111.0.1, See All New Features, Updates and Fixes - Firefox Release Notes (2023/03/21)
　https://www.mozilla.org/en-US/firefox/111.0.1/releasenotes/新しいウィンドウで開きます

Safari 16.4 変更点

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

追加・拡張

Web通知関連

  • Webプッシュ通知をホーム画面に出せるようになりました。
  • Badging API…[ホーム画面に追加]したWebアプリのアイコンの右上に、ネイティブアプリと同様の通知バッジが表示できるようになりました。

Webコンポーネント

  • 宣言的Shadow DOM…JavaScriptを使わなくても開発者側でShadow DOMの宣言を行えるようになりました。
  • ElementInternals…フォームのアクセシビリティを向上させつつ、内部にカスタム要素を組み込めるようになりました。
  • Imperative Slot API…JavaScript内でスロットにアサインするノードを指定できるようになり、柔軟性が向上しました。

    • ※Webコンポーネント…再利用可能なHTML要素をカプセル化する技術

    CSS：プロパティ/クラス等

    • margin-trimプロパティ…親要素(上位ブロック)の中にある子要素(下位/包含ブロック)に設定されているmarginが親要素の境界に接する場合、境界に接するmarginをカットするかを設定できるようになりました。親要素のpadding等と重複して空白過剰になる場合に、余計な空白を解消できます。
    • lh / rlh…余白設定等の長さの単位に、「行の高さの○倍」が指定できるようになりました。(例：margin-block:1.5lh;)　lhは現在の要素の行の高さ、rlhはルート要素の行の高さが基準となります。
    • font-size-adjustプロパティ…一部要素で別フォントを使った結果、フォントごとの基本文字サイズの違いにより文字サイズの不揃いが出る場合、指定した要素の文字サイズを個別調整できるようになりました。
    • :dir()擬似クラス…文字の記述方向によってスタイル指定を切り分けられるようになりました。(要素名:dir(ltr)＝左から右へ記述する要素を指定、要素名:dir(rtl)＝右から左へ記述する要素を指定)
    • :fullscreen擬似クラス…全画面モードになった場合の画面内全要素に適用されるスタイル指定を設定できるようになりました。全画面モードを解除すると、指定したスタイルも解除されます。全画面モード専用のレイアウト調整やスタイル指定を行いたい場合に向いていました。
    • :modal擬似クラス(モーダルウィンドウ時)も全画面用スタイルの適用対象となりました。
    • :lang()擬似クラス…要素内の、指定された言語の部分全てに適用されるスタイル指定を設定できるようになりました。
      言語判別はlang="○"属性やmetaタグでの指定に従うため、多言語コンテンツで個別適用させたい場合はその言語の要素ごとにlang属性等で指定していく必要があります。
      例えば、p:lang(en)だと、p要素内のうち、lang="en"(英語)が指定された要素がすべて対象となります。
    • :has()擬似クラス(引数が内部に含まれる場合にスタイル適用)について、動画再生状態を示す擬似クラス(:playing, :paused, :seeking, :buffering, :stalled, :picture-in-picture, :volume-locked, :muted)を含む要素を扱えるようになりました。

    CSS：色指定

    • Relative Color Syntax…色空間/色座標系を相互変換して計算処理する記述ができるようになりました。RGB16進値の色指定をHSLに変換して不透明度(≒半透過指定)を追加する、LChに変換して明度(L)だけを下げる、といった記述ができます。
    • currentColor(色指定キーワード)…color-mix()関数で、「現在の色」を取得できるようになりました。パーセント指定を後ろに付加することで、取得した現在の値を何割使用するかも指定できます。
    • システム色指定キーワード…現在のコンテンツの背景色等を変数のように指定して取得する機能について、新しいシステム色指定キーワード(CSS Color Level 4)に対応しました。

    CSS：メディアクエリ

    Media Queries Level 4で採用された記法が実装されました。

    • 比較演算子(関係演算子)…例えば「幅400px以上・900px未満」向けの記述を作る場合、min-widthとmax-widthを設定する代わりに、不等号を使って「@media (400px <= width < 900px) { (ここにスタイルを記述) }」という書き方が可能になります。
    • 論理演算子(and / or / not)を多段で入れ子にした記述が可能になり、構造が分かりやすくなります。

    CSS：カスタムプロパティ

    • @property…CSSのプロパティ名を指定して、仕様(構文、継承の有無、初期値)を独自に定義できるようになりました。

    アニメーション

    • カスタムプロパティの値を時系列変化させられるようになりました。
    • フィルターリストにミスマッチがある場合でも重ね合わせ処理アニメーションが行われるようになりました。
    • KeyframeEffect.iterationCompositeプロパティ…KeyframeEffect(アニメーションのキーフレーム設定)による時系列変化が繰り返される際に、値をリセットして繰り返すか、前のループの終了値から次のループを始めるかを設定できるようになりました。

    CSS：角丸処理

    • outlineの角丸が、border-radiusの境界角丸指定に追従した丸みで表示されるようになりました。
      ※outline(輪郭線)…要素のborder(境界線)よりも外側に表示される枠線。borderが太いほど要素の内側に食い込むのに対して、outlineは太いほど要素の外側に広がります。

    CSS型付きオブジェクトモデル

    • CSSの値をJavaScript型付きオブジェクトオブジェクトとして扱えるようになりました。CSSColorValuesの入力値の検証も、CSS型付きオブジェクトモデルの一部として取り込まれています。

    HTML

    • iframeにloading="lazy"属性を付与できるようになりました。
    • input type="file"でファイルを選択したときに、サムネイルが表示されるようになりました。(macOSのみ)
    • cancelイベントが使えるようになりました。

    JavaScript・WebAssembly

    • 正規表現の後読みパターンマッチ…メイン・サブ2種類の文字列を指定し、サブ文字列がメイン文字列の前にくる場合に限定してメイン文字列のパターンマッチを行う機能に対応しました。例としては以下の通りです。
      　(?<=shiro)kuma…shiroが先行するkumaにだけマッチ(他のkumaは無視)
      　(? ※cf.先読み…後続文字列をサブで指定してパターンマッチを行います。
      　kuma(?=moto)…motoが後続するkumaにだけマッチ(他のkumaは無視)
      　kuma(?!moto)…motoが後続しないkumaにだけマッチ(kumamotoのkumaは無視)
    • インポートマップ…JavaScriptファイルをimportするときに指定する名前を、まとめて指定しておけるようになります。の内側に、json形式でモジュール指定子と実体のパスをセットで指定します。
    • SharedArrayBufferのサイズ拡張、ArrayBufferのサイズ変更が可能になりました。
    • WebAssemblyで128bit SIMD命令に対応しました。

    そのほか以下のメソッド・関数等にも対応しました。

  • Array.fromAsync…反復可能オブジェクト等から配列を作成します。
  • Array#group・Array#groupToMap…配列要素のグループ化を行います。
  • Atomics.waitAsync…共有メモリ内で非同期処理の待機を行い、Promiseオブジェクトを返します。
  • import.meta.resolve()…モジュール指定子を引数としてカッコ内に入れると、どのURLから読み込んでいるかを返します。
  • Intl.DurationFormat…言語コードを指定して、それに応じた要素の持続時間を分岐設定できます。
  • String#isWellFormed…孤立サロゲートの有無を検出します。JavaScriptでUTF-16文字列を扱う際のチェック等に使用します。
  • String#toWellFormed…UTF-16文字列中の孤立サロゲートをすべてU+FFFDに置換します。
    ※孤立サロゲート(lone surrogate)…UTF-16文字コードにおいて、各1文字を16ビット値×2個のセットで表す「サロゲートペア」のうち、片方の16ビット値がもう片方を失い孤立(破損)したもの
  • Static初期化ブロックが使えるようになります。
  • WeakMap・WeakSet内でシンボル値が使えるようになります。

Web API

  • オフスクリーンキャンバス…Canvas APIで、DOMとcanvas要素を切り離し、Workerに処理を転送することで、キャンバス描画時のメインスレッド軽量化等が可能になります。
  • Fullscreen API…macOS・iPadOSにおける指定要素の全画面表示等を制御できます。(プレフィックスなしで利用可能)
  • Screen Orientation API…画面の向きを文字列や角度(整数値)で取得したり、向きが変わったときに発動するイベントハンドラーを仕込んだりできます。なお、向きのロック/ロック解除については引き続き実験機能のまま留め置かれます。
  • Screen Wake Lock API…端末がスリープに入ると困る場合向けに、スリープを抑止する機能が使えるようになります。
  • User Activation API…ユーザー操作によるアクティベーション処理を行う場合向けのAPIが使えるようになります。
  • WebGLの拡張色空間対応…WebGL CanvasがDisplay-P3(sRGBより広色域)での色指定に対応します。
  • Compression Streams API…データ転送をgzipもしくはdeflate形式で圧縮できるようになります。
  • Reporting API…サーバーのセキュリティポリシー違反、非推奨機能の利用、ブラウザクラッシュ等をレポートする仕組みを標準化するAPIが利用できるようになります。
  • Notification API…ブラウザでのシステム通知機能が専用ワーカー(dedicated worker)内で利用できるようになります。
  • Permissions API…特定のAPIへのアクセスが許可されているか否かを確認する(仕組みを共通化する)APIが、専用ワーカー内で利用できるようになります。
  • gamepad.vibrationActuator…ゲームコントローラーのバイブレーション(触覚フィードバック)を制御できるようになります。
  • FormDataコンストラクタでフォームオブジェクトを生成するときに、送信ボタンにパラメーターを設定できるようになります。
  • Cross-Origin-Embedder-Policy(COEP)の違反レポート、Cross-Origin-Opener-Policy(COOP)/Cross-Origin-Embedder-Policy(COEP)ナビゲーションの違反レポート機能に対応します。
  • Fetch Initiatorが使えるようになります。
  • Fetch metadata request header…サーバーに対してリクエスト送信元の追加情報を知らせるリクエストヘッダーに対応します。
  • Web Crypto APIで圧縮ECキーのインポートが可能になります。
  • 入れ子になったワーカーのスクリプト読み込みが可能になります。
  • autocomplete属性で、資格証明をオートフィル対象がら除外できるようになります。
  • 同一オリジンコンテキスト内でのBlob URLを無効化できるようになります。
  • InputEvent上で、「isComposing」属性(イベントが入力開始～入力完了の間に発生したかを論理値で返す)が使えるようになります。
  • 入れ子になったワーカーを終了させられるようになります。
  • Server-TimingヘッダーおよびPerformanceResourceTimingヘッダーで、ファーストパーティの転送サイズを測定できるようになります。
  • WEBGL_clip_cull_distance…クリップのカリング(カメラの画角的に表示対象外になったクリップを処理対象から除外すること)に対応します。

画像・動画・音声

  • AVIF形式がmacOS Monterey / Big Surでも使えるようになりました。
  • アニメーションAVIFや、フィルムグレイン(ノイズ)つきAVIFをpicture要素内で表示できるようになりました。
  • AVIF標準に完全準拠していない画像についても柔軟に表示を受け付けるようになりました。
  • Web Codecs APIの動画に対応しました。動画の個々のフレームにアクセスして処理できるようになります。
  • AudioSession Web APIの一部に対応しました。
  • AVCaptureで仮想カメラからのキャプチャーに対応しました。
  • RTP受信についてtrackIdentifier統計フィールドに対応しました。
  • VTTベースの拡張字幕形式に対応しました。
  • AirPlay利用中にサイトに代替URLを付与できるようになりました。

WKWebView

  • shouldPrintBackgrounds…アプリ内WebViewで、ページの背景を印刷に含めるかどうかをユーザー側で選択できるAPIが追加されました。

開発者ツール

  • isInspectableプロパティ…アプリのWebViewやJavaScriptがWebインスペクタで検証可能かどうかをコンテンツ側で指定できるようになりました。デフォルトはfalseになっており、これをtrueに指定することでWebインスペクタでの検証が許可されます。
  • WebDriver(safaridriver)で検証操作を自動化(スクリプト化)する際に、以下が使えるようになりました。
    　シャドウルート内(シャドウDOMコンテンツ)内の要素取得コマンド
    　要素とラベルの取得コマンド
    　SameSite属性
    　キー操作での修飾キー(ShiftやCtrl等)押し込み記述
    　複数のコードポイントで表される文字のタイピング(絵文字等)

Webインスペクタ

  • 検証メニュー内で指定要素のフォント(字体・サイズ等)がチェックできるようになりました。該当フォントがなく、合成や他フォントで代替処理されている場合は注意表示が出ます。
  • バリアブルフォント(太さや横幅等複数のバリエーションを単一のフォントファイルに詰め込んだもの)の設定取得・調整ができるようになりました。
  • CSS等コンテンツ側の指定より優先されるユーザー設定(アクセシビリティ用の高コントラスト設定等)を再現できるようになりました。
  • Gridコンテナ・Flexコンテナにバッジが表示されるようになりました。
  • その他細かい機能強化が行われました。

拡張機能

  • Declarative Net Request関連の機能/API強化が行われました。
  • 拡張機能にSVGアイコンが利用できるようになりました。
  • scripting.registerContentScript…動的コンテンツスクリプトを開発するためのAPIが強化されました。
  • tabs.toggleReaderMode…リーダーモードをトグルするためのAPIが使えるようになりました。
  • storage.session…セッションストレージを扱うためのAPIが使えるようになりました。
  • バックグラウンドのサービスワーカー/ページでモジュールが使えるようになりました。

コンテンツブロッカー

  • コンテンツブロッカーで「:has()」セレクターが使えるようになりました。引数に指定した子要素を含む親要素の表示をブロックできるようになります。

ロックダウンモード

セキュリティ脅威等の緊急事態向けに、ユーザー側で「ロックダウンモード」を選択できるようになりました。この場合以下の要素が無効化されます。

  • CSS Font Loading APIでのバイナリフォント
  • キャッシュAPI
  • CacheStorage API
  • サービスワーカー
  • SVGフォント
  • WebLocks API
  • WebSpeech API

修正・改善

  • CSS/JavaScript/HTMLの処理およびレンダリング処理のの各種バグ修正が行われました。
  • Webビデオ会議の音質が改善されました。

仕様変更

  • lazy loading対象の画像が読み込み中グレー枠で表示されなくなりました。

※参照：WebKit Features in Safari 16.4 - WebKit Blog (2023/03/27)
　https://webkit.org/blog/13966/webkit-features-in-safari-16-4/新しいウィンドウで開きます

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

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

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

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

その他のサービス