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

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

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

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

記事バックナンバー一覧

[Twitter | LINE | Instagram | Facebook] [ブラウザ]

要点

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

Firefox 114 変更点

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

追加・拡張

開発者向け機能

  • 開発者ツールの[ネットワーク]パネルで、右クリックメニュー[コピー]の下に[cURLとしてコピー]が利用できるようになりました。
  • CSSの@importルールでsupports()が使えるようになりました。該当機能がサポートされているかどうかで外部CSSのインポートを切り替えられるようになります。
  • 専用ワーカーおよび共有ワーカーでES Moduleが利用できるようになりました。
  • WebTransportがデフォルトで有効化されました。ゲームやストリーミング配信等で有効です。まずはHTTP/3で対応し、HTTP/2については今後対応する予定です。
  • CSSのcalc()関数で無限とNaN(非数)を定数として受け付けられるようになりました。

一般機能

  • UIにDNS over HTTPSの例外リストが追加されました。
  • ブックマークメニューからブックマークの検索ができるようになりました。(ツールバーにメニューを追加する必要があり)
  • 履歴検索について、設定でローカルの履歴のみに対象を限定できるようになりました。
  • (macOS)あらゆるネイティブ解像度でカメラからの動画キャプチャができるようになりました。これにより、1280×720pxを超える解像度でのキャプチャが可能になりました。
  • 拡張機能パネル内で、拡張機能リストの並べ替えが可能になりました。
  • (macOS, Linux, Windows 7) FIDO2 / WebAuthnがUSB上で使えるようになりました。ログインパスワードの入力等を行うには認証アプリにPINを設定しておく必要があります。
  • Pocketのおすすめコンテンツがフランス・イタリア・スペインで使えるようになりました。

修正・改善

  • 開発者ツールのアクセシビリティ検証ツールが、ARIAロールを正しく認識できるようになりました。
  • セキュリティ修正が行われました。
  • 起動時クラッシュの修正が行われました。

仕様変更

  • DNS over HTTPS設定が設定メニューの[プライバシーとセキュリティ]カテゴリー内に移動しました。

※参照：Firefox 114.0, See All New Features, Updates and Fixes - Firefox Release Notes (2023/06/06)
　https://www.mozilla.org/en-US/firefox/114.0/releasenotes/新しいウィンドウで開きます
　Firefox 114.0.1, See All New Features, Updates and Fixes - Firefox Release Notes (2023/06/09)
　https://www.mozilla.org/en-US/firefox/114.0.1/releasenotes/新しいウィンドウで開きます
　Firefox 114.0.2, See All New Features, Updates and Fixes - Firefox Release Notes (2023/06/20)
　https://www.mozilla.org/en-US/firefox/114.0.2/releasenotes/新しいウィンドウで開きます

Safari 17 変更点

WWDCで発表された、Safari 17での機能追加・修正内容のまとめです。(ベータ版時点の情報)

追加・拡張

Webアプリ

  • WebアプリがmacOS Sonomaで利用できるようになります。
    メニュー[ファイル]-[Dockに追加]で、WebサイトをDockに追加(インストール)し、ネイティブアプリと同様の単独ウィンドウで開けます。
    マニフェストファイルもしくはmetaタグで、独自のアイコンを指定できます。 サービスワーカーも使用できます。
  • (iOS/iPadOS)Safari View Controllerから[ホーム画面に追加]ができるようになります。

3D/WebXR関連

  • model要素が使用できるようになります。
    特殊なスクリプト処理を行うことなく、imgやvideoと同じような感覚で3Dモデルコンテンツを表示できます。
    interactive属性を付与すると、ユーザー操作でモデルを回転できます。
    付属のJavaScript APIを使用すると、カメラ(視点)操作等も可能になります。
    非対応ブラウザ向けにフォールバック表示用の代替静止画・動画を指定することも可能です。
  • immersive-vrセッション形式のWebXRに対応し、没入型VRコンテンツをSafariで表示できるようになります。

画像表示

  • JPEG XL形式の画像(拡張子 *.jxl)の表示に対応します。
  • HEIC(HEIF)形式の画像の表示に対応します。
  • CSSのimage-set()で複数の種類の画像を使い分ける際の相互運用性が向上します。

映像処理

  • Managed Media Source API…ストリーミング映像処理を自動的に最適化してくれる機能に対応します。
  • video要素の動画再生中に再生品質の統計表示ができるようになります。元素材の解像度・表示解像度、ドロップフレーム発生回数、コーデック、色空間等が動画ウィンドウ内にオーバーレイ表示されます。
  • (iPadOS)iPadで外付けUSBカメラを認識するようになります。
  • WebRTCについて、デバイス情報取得やズーム・リサイズ等の機能が拡張されます。
  • 低出力モード…動画再生時の負荷を下げるべき場合に、映像の画質最適化や、色空間のHDR→SDR変換等が行われます。

HTML

  • popover属性…ポップアップやダイアログ等をシンプルなHTMLだけで表示できます。button要素にpopovertarget属性でポップアップ部分のidを指定し、popovertargetaction属性にshow / hideを指定することで表示・非表示を切り替えます。JavaScriptによる制御(showPopover() / hidePopover() / togglePopover() )も可能です。
  • select要素で選択肢を一覧表示する際に、途中hrで仕切り線を入れられるようになります。
  • menu要素がrole=listでマップされるようになります。

CSS

  • @counter-styleを使って、リストのマーカー用文字の一覧を独自に作成できるようになります。
  • font-size-adjust…アルファベットの大文字・小文字で文字サイズのバランスを変更できるようになります。指定した数値に応じて、小文字のサイズ倍率が変更されます。
  • @font-face size-adjust…フォントの種類によってサイズの倍率を調整し、異なるフォントが混在するときに文字の大きさを揃えられるようになります。
  • text-transform: full-width…アルファベット等を全角文字相当の幅に引き延ばして表示できます。
  • text-transform: full-size-kana…フリガナ等小さい文字で表示される部分について、あえて通常と同サイズの文字でひらがな・カタカナを表示できます。
  • @supports font-tech() / @supports font-format()…指定したフォント技術/形式の有無によりCSS処理分岐を記述できます。
  • @font-face { src: url() tech() }…指定した技術の有無に応じたフォント指定を列記できます。
  • overflow-block / overflow-inline…メディアクエリLevel 4の機能で、それぞれ@mediaでブロック軸(縦方向)やインライン軸(横方向)にコンテンツの表示枠超過が発生する場合の処理をnone(表示しない) / scroll(スクロール) / paged(次ページ)※ で指定できます。
    ※pagedはoverflow-blockのみ指定可能
  • display: contents…アクセシビリティ関連のCSS対応が強化されます。
  • contain-intrinsic-size…指定した要素の本来あるべきサイズを指定できます。
  • :has()擬似クラスの機能が拡張され、以下の判定処理に対応します。
    :has(:buffering) / :has(:stalled)…メディア再生状況(バッファ中 / 異常停止)の有無を判定
    :has(:defined)…カスタム定義要素の有無を判定
  • containerName / containerQuery…コンテナクエリ利用時conditionTextで記載していた内容のうち、conditionTextで記載していたルール等をcontainerName / containerQueryに記載できるようになります。

JavaScript / Web API

  • オフスクリーンキャンバス※で3D描画が可能になります。
    ※オフスクリーンキャンバス…従来のcanvasと比べてDOMとCanvas APIが分離したキャンバスです。利点としては描画処理をメインスレッドから切り離し可能で、メインスレッド処理の軽量化・ユーザーエクスペリエンスの向上に繋げられます。
  • オリジンで扱えるストレージの上限(従来1GB)が、全体のディスク容量から計算される仕組みに変更されます。一般的には大幅な上限拡大になります。
    　navigator.storage.estimate()…上限の予測値を算定できます。
    　navigator.storage.persisted()…オリジン単位のストレージモード※が永続利用かどうか確認できます。
    　navigator.storage.persist()…オリジン単位のストレージモード※を永続利用に指定できます。
    ※ストレージモード…Safariの新しいストレージ管理では、各オリジンごとの上限値とは別に端末全体での上限値が設定されています。端末全体の上限に達すると、オリジン単位でデータ削除・ストレージ解放が勝手に行われます。サイト側でこれを回避したい場合は、オリジン単位でストレージ利用モードを【永続利用】に切り替える必要があります。
  • 正規表現vフラグ…従来の正規表現(uフラグ)では取り扱いの難しかった、複数のコードポイントからなる絵文字が正規表現で正しく扱えるようになります。また、[ ]で文字集合を扱う際に、差集合演算(--)、積集合演算(&&)、集合の入れ子処理が可能になります。
  • 正規表現で、マッチングパターンの複数指定(「|」で仕切る)が可能になります。年月日パターンマッチの複数パターン指定等が容易になります。
  • 集合演算メソッド…2つの集合に対する和集合・積集合・差集合の演算が可能になります。
  • Gamepad API…Gamepad.vibrationActuatorで、ゲームパッドの強弱2段階の振動機能を制御できるようになります。
  • URL APIで以下の機能が追加されます。
    URL.canParse()…URLの解析可否がtrue / falseで返されます。
    has()メソッド / delete()メソッド…URLのパラメーターのうち、指定した名称・値のペアの有無を検出したり、削除したりできます。
  • WebSocketで相対URLが使用できるようになります。
  • link rel="modulepreload"…link要素に該当属性値を指定した場合、モジュールスクリプトとその依存関係を先行読み込みできるようになります。
  • focus fixup rule…フォーカス要素が削除された場合のフォーカスの挙動(移動等)に関するルールに対応します。
  • Ed25519(暗号化用デジタル署名アルゴリズムとしては比較的新しく強力)が使用可能になります。
  • Background Fetch(大容量ファイルダウンロードのバックグランド取得)の一時停止・再開が可能になります。
  • ストリーミングデータ処理にReadableStreamが利用できるようになります。
  • 読み込み優先度指定ヒント(fetchpriority属性)に対応します。
  • customElements.getNameメソッド…カスタム要素の名称を取得できます。

開発者ツール

  • 開発者メニューのデザインが一新され、検証対象のデバイス・サイトや主要機能・ツールへのアクセスがしやすくなります。
  • [機能フラグ]パネル…開発者メニューの実験的機能のon/offがジャンル別に整理され、かつ安定版・テスト・プレビュー・開発者版の4種類のステータスも明示されます。
  • 一部の全体設定(画像・CSSの無効化等)がWebインスペクターでタブごとに個別設定できるようになります。
  • レスポンシブデザインモードについて、上部メニューでのデバイス選択のほか、画面端ドラッグでも表示領域のリサイズが可能になります。
  • Safari上部メニューの[開発]から直接シミュレーター機種を指定して、該当サイトをシミュレーター表示できるようになります。iOS・iPadOSのほか、近々visionOSにも対応する予定です。シミュレーターはXcodeをインストールすると無料でついてきます。
  • Webインスペクターで[要素][コンソール]タブでの検証機能が強化されます。

セキュリティ/GPUプロセス

  • (macOS)macOS SonomaでGPUプロセスをサポートするようになります。これにより全描画処理がGPUプロセスに移行し、WebContentプロセスから分離されることで、セキュリティが向上します。

WebGL関連

  • WEBGL_clip_cull_distance…クリップのカリング(表示画角外要素の処理対象除外)に対応します。
  • EXT_disjoint_timer_query_webgl2…WebGL要素で、クエリの結果が、定義された時間にのみ利用可能になるようにできます。

WebKit API関連

  • WKWebsiteDataStore…永続的データ保存、Cookieポリシーの調整、プロキシ設定のカスタマイズ、HTTPS(暗号化)への接続移行リクエスト、インライン入力予測や自動補完時の状態制御等が可能になります。

その他ブラウザ機能

  • プロファイル…ユーザーごとに履歴やお気に入り等の個人設定を保存して使い分けできるようになります。
  • プライベートブラウズのセキュリティ対策強化…既知のトラッカー・フィンガープリント、追跡用クエリパラメーター、第三者CNAMEクローキングを行うトラッカー、をブロックします。また、フィンガープリント可能なWeb APIにたいしてノイズを追加する機能も追加されます。
  • (macOS)デフォルトのテキストカーソル色が、システムアクセントカラーになります(iOSと同じ)。CSSのcaret-colorプロパティを使えばサイト側で変更できる点はそのままです。
  • 静止画・動画内の縦書き文字認識に対応します。
  • サードパーティiframeにallow="payment"属性がある場合、Payment Request APIがApple Payに対応します。なお、第三者サイトによる悪用を防ぐため、X-Frames-Options HTTPヘッダーによる埋め込み許可制限の併用が推奨されます。
  • Passkeyを使ったWeb認証がlargeBlobに対応します。
  • iCloud Keychain内のPasskeyがWebAuthnエンタープライズ証明書に対応します。
  • サーバーが103 Early Hintsを応答した場合のpreconnect指定(先行接続)に対応できるようになります。
  • ロックダウンモードになった場合、IndexedDBやFile API/File API等各種機能が無効化されるようになります。
  • Safariの拡張機能について、利用/許可を細かく設定できるようになります。
    拡張機能のアクセス許可をサイトごとに設定できるようになります。
    プライベートブラウズ時に拡張機能をオフにできます。(デフォルトでオフの拡張機能は許可にできます)
    プロファイルごとにon/offを使い分けできるようになります。

修正・改善

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

※参照：News from WWDC23: WebKit Features in Safari 17 beta - WebKit Blog (2023/06/06)
　https://webkit.org/blog/14205/news-from-wwdc23-webkit-features-in-safari-17-beta/新しいウィンドウで開きます

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

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

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

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

その他のサービス