2023年09月29日Safari 17.0 仕様変更発表まとめ

Safari 17.0 変更点

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

ベータ版発表以降の追加情報

WWDC(6月)時点での発表に含まれない新情報は以下の通りです。

HTML

• search要素…従来「検索」のARIAロールについて<div class="search-box" role="search">のように実装していたものを、単独要素名のみで実装可能になりました。アクセシビリティ対応がしやすくなります。

CSS

• hyphens / hyphenate-character …ハイフネーションに関するCSSプロパティです。ハイフンによる単語途中での改行の有無、およびハイフン文字の指定がプレフィックスなしでできるようになります。従来「-webkit-hyphens」「-webkit-hyphenate-character」として使われていたものと同様です。なお、ハイフン使用時にはテキストのlang属性をハイフン対応言語(英語等)にしておく必要があります。ブラウザは指定言語の辞書(音節境界情報)に基づいてハイフネーションを行います。
• display: contents;指定を受けた要素のアクセシビリティ関連対応が以下の通り強化されます。
  • 表(table)の各種要素がアクセシビリティツリーに対応します。
  • ARIAロールのうち9種(grid / treegrid / table / row / gridcell / cell / columnheader / tree / treeitem)がアクセシビリティツリーで正常に扱われるようになります。　aria-checked属性(チェックボックスの状態定義)がtreeおよびtreeitemのARIAロールを持つ要素に対して動作するようになります。
  • directoryロールを持つ要素等で、リストに対して正しいサブロールを返すようになります。
  • 要素から子要素の見逃しがなくなります。
  • 要素がアクセシブルな子要素を選択して返せるようになります。
  • ラベルもしくはキャプションに基づいたアクセシブルな名称を計算できるようになります。
  • リンクや見出しのアクセシブルなクリック地点を正確に計算できるようになります。
  • display:contentsのリスト項目を持つリストを適切に公開できるようになります。
  • role="treeitem"を持つ要素に対してaria-checked属性が動作するようになります。
• 表のCSSにおいて、displayプロパティの値にflex / grid / block / inline-blockを適用した場合にアクセシビリティ上適切な扱いが行われるようになります。
• updateメディア特性…Media Queries Level 4の機能で、更新頻度の低い画面(電子書籍リーダー等)や全くない画面(紙への印刷等)に合わせたスタイル切り替えが可能になります。
• scriptingメディア特性…Media Queries Level 5の機能で、ブラウザ等がスクリプト言語(JavaScript等)に対応するか否かに応じたスタイル切り替えが可能になります。
• image-set()関数(複数画像指定)の引数としてresolution(解像度)とtype(形式)が指定できるようになります。

JavaScript / Web API

• Canvas 2D APIのCanvasRenderingContext2D.drawImage()メソッドで、SVG形式のベクターイメージを使用できるようになります。
• Intl.Localeを取得するメソッドの名称が変更になり、頭に「get」がつくようになります。
• FileSystemHandleのmove()メソッドで移動先に同名ファイルがあった場合、デフォルトで上書きするようになります。

メディア

• AV1形式の動画のハードウェアデコードに対応します。(iPhone 15 / 15 Pro)
• (macOS Sonoma)WebMおよびMPEG-4系コンテナで音声コーデックにOpusを使用したファイルの再生に対応します。(ステレオ限定)

その他ブラウザ機能

• テキスト編集時のオートコレクトや予測変換がより正確になります。

ベータ時点で発表済みの情報

そのほか、WWDCで事前発表されていた以下の機能も正式に実装されました。

HTML

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

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() }…指定した技術の有無に応じたフォント指定を列記できます。
• display: contents;指定を受けた要素のアクセシビリティ関連対応が以下の通り強化されます。
  • aria-activedescendant属性(アクティブな子オブジェクトのID指定)、aria-grabbed属性(ドラッグ＆ドロップ時の掴み判定)、aria-dropeffect属性(ドラッグ＆ドロップの掴み解放時の機能指定)がaria-flowto属性(次に読み上げる要素のID指定)、aria-owns属性(DOM要素間で関係が規定されない要素の関係定義)が動作するようになります。
  • CSS speak-asプロパティ…リスト先頭の数字や記号等をどう読むかを指定できるようになります。
  • AXAccessKeyおよびURL AX APIが動作するようになります。
• overflow-block / overflow-inline…メディアクエリLevel 4の機能で、それぞれ@mediaでブロック軸(縦方向)やインライン軸(横方向)にコンテンツの表示枠超過が発生する場合の処理をnone(表示しない) / scroll(スクロール) / paged(次ページ)^※ で指定できます。
  ※pagedはoverflow-blockのみ指定可能
• containerName / containerQuery…コンテナクエリ利用時conditionTextで記載していた内容のうち、conditionTextで記載していたルール等をcontainerName / containerQueryに記載できるようになります。
• contain-intrinsic-size…指定した要素の本来あるべきサイズを指定できます。
• :has()擬似クラスの機能が拡張され、以下の判定処理に対応します。
  :has(:buffering) / :has(:stalled)…メディア再生状況(バッファ中 / 異常停止)の有無を判定
  :has(:defined)…カスタム定義要素の有無を判定

JavaScript / Web API

• オリジンで扱えるストレージの上限(従来1GB)が、全体のディスク容量から計算される仕組みに変更されます。一般的には大幅な上限拡大になります。
  　navigator.storage.estimate()…上限の予測値を算定できます。
  　navigator.storage.persisted()…オリジン単位のストレージモード^※が永続利用かどうか確認できます。
  　navigator.storage.persist()…オリジン単位のストレージモード^※を永続利用に指定できます。
  ※ストレージモード…Safariの新しいストレージ管理では、各オリジンごとの上限値とは別に端末全体での上限値が設定されています。端末全体の上限に達すると、オリジン単位でデータ削除・ストレージ解放が勝手に行われます。サイト側でこれを回避したい場合は、オリジン単位でストレージ利用モードを【永続利用】に切り替える必要があります。
• オフスクリーンキャンバス^※で3D描画が可能になります。
  ※オフスクリーンキャンバス…従来のcanvasと比べてDOMとCanvas APIが分離したキャンバスです。利点としては描画処理をメインスレッドから切り離し可能で、メインスレッド処理の軽量化・ユーザーエクスペリエンスの向上に繋げられます。
• 正規表現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(暗号化用デジタル署名アルゴリズムとしては比較的新しく強力)が使用可能になります。
• customElements.getNameメソッド…カスタム要素の名称を取得できます。

メディア

• JPEG XL形式の画像(拡張子 *.jxl)の表示に対応します。
• HEIC(HEIF)形式の画像の表示に対応します。
• CSSのimage-set()で複数の種類の画像を使い分ける際の相互運用性が向上します。
• Managed Media Source API…ストリーミング映像処理を自動的に最適化してくれる機能に対応します。
• video要素の動画再生中に再生品質の統計表示ができるようになります。元素材の解像度・表示解像度、ドロップフレーム発生回数、コーデック、色空間等が動画ウィンドウ内にオーバーレイ表示されます。
• (iPadOS)iPadで外付けUSBカメラを認識するようになります。
• WebRTCについて、デバイス情報取得やズーム・リサイズ等の機能が拡張されます。
• 低出力モード…動画再生時の負荷を下げるべき場合に、映像の画質最適化や、色空間のHDR→SDR変換等が行われます。
• scalabilityMode…ソフトウェアコーデックび変換処理・エラー制御等で一時的にscalabilityModeを使用できるようになります。

Webアプリ

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

開発者ツール

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

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

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

WebKit API関連

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

その他ブラウザ機能

• プロファイル…ユーザーごとに履歴やお気に入り等の個人設定を保存して使い分けできるようになります。
• プライベートブラウズのセキュリティ対策強化…既知のトラッカー・フィンガープリント、追跡用クエリパラメーター、第三者CNAMEクローキングを行うトラッカー、をブロックします。また、フィンガープリント可能なWeb APIにたいしてノイズを追加する機能も追加されます。
• 静止画・動画内の縦書き文字認識に対応します。
• サードパーティ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を使い分けできるようになります。
• その他各種バグ修正が行われます。

※参照：WebKit Features in Safari 17.0 - WebKit Blog (2023/09/18)
　https://webkit.org/blog/14445/webkit-features-in-safari-17-0/

関連ページ

• 過去の各種ブラウザ仕様変更発表まとめ
  記事バックナンバー一覧
  バージョン・年月を選択して表示 Chrome 125(2024年4月) Chrome 124(2024年3月) Safari 17.4(2024年3月) Chrome 123(2024年2月) Safari 17.3(2024年1月) Chrome 122(2024年1月) Safari 17.2(2023年12月) Chrome 121(2023年12月) Chrome 120(2023年11月) Safari 17.1(2023年10月) Chrome 119(2023年10月) Safari 17.0(2023年9月) Chrome 118(2023年9月) Chrome 117(2023年8月) Chrome 116(2023年7月) 2023年6月 2023年5月 2023年4月 2023年3月 2023年2月 2023年1月 2022年12月 2022年11月 2022年10月 2022年9月 2022年8月 2022年7月 2022年6月 2022年5月 2022年4月 2022年3月 2022年2月 2022年1月 2021年12月 2021年11月 2021年10月 2021年9月 2021年8月 2021年7月 2021年6月 2021年5月 2021年4月 2021年3月 2021年2月 2021年1月 2020年12月 2020年11月 2020年10月 2020年9月 2020年8月 2020年7月 2020年6月 2020年5月 2020年4月 2020年3月 2020年2月 2020年1月 2019年12月
• 2023年8月のTwitter規約改定・仕様変更発表まとめ
• 2023年8月のLINE仕様変更発表まとめ
• 2023年8月のInstagram仕様変更発表まとめ
• 2023年8月のFacebook規約改定・仕様変更発表まとめ

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