2024年03月22日Safari 17.4 仕様変更発表まとめ

追加・拡張

Webアプリ

• (macOS)Webアプリ内に、上部メニューの表示項目(ショートカット)を設定できるようになりました。表示名・URLをセットにしてマニフェストファイル内に記載すると実装できます。
  キーボードショートカットの設定も可能です。ただし、ユーザー側のmacOSシステム環境設定([キーボード]⇒[ショートカット])でWebアプリのショートカット設定を許可する必要があります。
  
• マニフェスト内にカテゴリーを記載しておけば、アプリアイコンをカテゴリー内に配置することも可能になります。

フォーム要素

• <input type="checkbox" switch>で、ページ内にチェックボックスをネイティブスイッチとして単独表示させられるようになりました。
• accent-colorプロパティ…使用すると、チェックを入れたときの背景色を変更できます。
• appearance: noneと指定すると、システムのデフォルトのスタイルを排除したうえで、独自のスタイルを適用できます。将来的には擬似要素に対しても独自スタイル適用がしやすくなる予定です。
• フォーム内に縦書きの入力要素を入れられるようになりました。writing-modeプロパティで記載方向を指定すると、縦書き(左方向にスクロール)のページでもフォームが縦書きで使用できます。
• (iOS/iPadOS/visionOS)select要素(プルダウン選択)の中にhr要素を入れることで、プルダウン内に仕切り線を入れられるようになりました。(macOSでは17.0で実装済み)
• (macOS)日付入力(input type="date")で、showPicker()メソッドを使って日付入力用ピッカーを呼び出せるようになりました。

CSS

• @scope…局所的に独自CSSを適用させたい場合向けのアットルールが使えるようになりました。
  • 独自CSSを適用したい要素の子要素に<style> @scope { (ここに要素とスタイル指定を入れる) } </style>という形で入れると、style要素の1つ親(外側)の要素全体では、@scope{…}内のCSSが優先適用されます。
  • @scopeで指定する独自CSSのスコープ内で、特定の下位要素(カッコ内に要素名指定)を該当CSSのスコープ外(スタイル非適用)に指定できます。
  • クラスを複数持つ要素(上位からの継承含む)に別々のスタイルが適用された場合、CSSの記載順によっては該当要素への直接クラス指定が上位から継承されたクラス指定に負ける(ことがある)場合、クラスごとに@scopeでくくってスタイルを記述すると解決しやすくなります。
  • @scope{…}内に :scope{…} という形で擬似クラスを記載した場合、styleの1つ上の親要素全体へスタイルが適用されます。
• white-space-collapseプロパティ…従来white-spaceプロパティ(空白圧縮・折り返し可否の指定)が持っていた機能のうち、連続した空白を1文字に圧縮するかどうかだけをピンポイントで指定できるようになりました。
  • white-space-collapse: collapse; …連続したスペースを1文字に圧縮する(デフォルト)
  • white-space-collapse: preserve; …連続したスペース・セグメント区切り文字(改行)を圧縮せずそのまま表示
  • white-space-collapse: preserve-breaks; …連続したスペースは圧縮、セグメント区切り文字はそのまま表示
  • white-space-collapse: preserve-spaces; …スペースはそのまま表示、タブとセグメント区切り文字スペースに変換
  • white-space-collapse: break-spaces; …基本的にはperserveと同様だが以下(主に禁則処理)が異なる
    • スペースは行末に溜まった場合も含めて常に表示領域を使う
    • 連続するスペースの途中は折り返し位置にカウントされる
    • ぶら下がり対象から除外される(ボックスサイズ min-content / max-contentに影響がある場合あり)
• text-wrap-modeプロパティ…従来white-spaceプロパティが持っていた機能のうち、行末での自動折り返しの可否だけをピンポイントで指定できるようになりました。
  • text-wrap-mode: wrap; …折り返し許可位置での自動折り返しを行う
  • text-wrap-mode: nowrap; …自動折り返しを行わない(長い行ははみ出る)
• letter-spacingプロパティ(文字間余白指定)・word-spacingプロパティ(単語間余白指定)について、パーセンテージでの値指定が可能になりました。
• ::spelling-error擬似要素・::grammar-error擬似要素が使えるようになりました。spellcheck="true"属性でスペルや文法のミスを表示する属性にしてある要素について、スペルミス・文法ミスを強調表示する際のスタイルを指定できます。
• ::before等の擬似要素に表示させるコンテンツ(contentプロパティで指定)について、画像・絵文字等を表示する場合向けに、スラッシュを挟んで後ろにAlt文字列を記載できるようになりました。アイコン等を::before / ::afterで付与する場合のアクセシビリティ改善に活用できます。
• transition-behavior: allow-discrete; …プロパティが連続値を取りえない部分にもトランジションを有効にする指定ができるようになりました。「ホバーすると冒頭の記号が●→■に切り替わる」等の実装が可能になります。
• :has()擬似クラスについて、以下の擬似要素(リンク関連)の有無による条件分岐が可能になりました。
  • :has(:link)…未訪問リンクが含まれている場合を検出
  • :has(:any-link)…リンク(訪問履歴問わず)が含まれている場合を検出
  • :has(:-webkit-any-link)…WebKit系ブラウザで、リンク(訪問履歴問わず)が含まれている場合を検出
• ::backdrop擬似要素(全画面要素表示時の背景指定)でカスタムプロパティでの指定ができるようになりました。
• 円(circle)・楕円(ellipse)のシェイプについて、offset-positionプロパティによる位置指定が適用できるようになりました。

Web API

• checkVisibility()メソッド…指定した要素が表示されているかを確認できます。CSSのdisplay、visibility、opacityといった表示・可視性に関するプロパティの状態を見て、表示の有無をtrue / falseの値で返します。
• 宣言型シャドウルートへのサポートが拡大し、別のドキュメントツリーを無害化してサブDOMツリーとして組み込むメソッドが増えました。
  • setHTMLUnsafe()…サニタイズ未処理の外部DOMツリーを処理・無害化して、自分のDOMツリーのサブツリーとして内部に組み込む
  • parseHTMLUnsafe()…サニタイズ未処理のHTMLを宣言型シャドウルートつきで解析し、ドキュメントを返す
• CustomStateSetインターフェイス…カスタムステート＝要素等がどのような状態であるかを管理・検知する機能に対応します。機能の例としては以下の通りです。
  • CustomStateSet.add()…カスタムステートセットに値を指定
  • CustomStateSet.delete()…カスタムステートセットの値を削除
  • CustomStateSet.has()…指定した要素が指定した値で存在するか判定
  これらの状態設定は:state()擬似クラスと連携させることも可能です。
• DOMMatrixReadOnly.scaleNonUniform()メソッド…2D/3D座標変換用の読み取り専用行列について、非均一スケール変換(変形を伴う拡大縮小)が使えるようになりました。
  　変換スケールは、Y軸・Z軸は無指定時に1がデフォルト値になりますが、X軸の値のみ何かしら指定が必須になります。
  　中心点の座標はデフォルトだと(0, 0, 0)になります。
• AbortSignal.any()メソッドに対応しました。中止シグナル(ユーザー操作のタイムアウトによる受付停止等)のやり取りに活用できます。

JavaScript

• Promise.withResolvers()静的メソッド…プロミス(非同期処理が最終的に完了したか失敗したかを表すオブジェクト)に対して、それぞれ完了の場合・失敗の場合の値を返す機能が追加されました。
• Intl.DateTimeFormat…タイムゾーンの表示について、現地時間とUTCの差を数字4桁(±HHMM)の形式で指定できるようになりました。
• ArrayBuffer.prototype.transfer…ArrayBufferの現存データから新しいArrayBufferインスタンスを作り、元のArrayBufferデータから切り離す機能が使えるようになりました。
• Object.groupByメソッド / Map.groupByメソッド…配列を指定した要素でグループ化する機能に対応しました。

メディア(動画・音声)

• (iOS/iPadOS/visionOS)WebM(VP8/VP9)形式の動画がSafariで使えるようになりました。以前はSafariでのWebM動画再生はほぼmacOS版にとどまっており、iOS/iPadOS/visionOSではWebRTCに限りVP8のWebMに対応する程度でしたが、ほかの形式でも広く使えるようになりました。
• (iOS/iPadOS/visionOS)音声の圧縮形式にVorbisが使えるようになりました。
• WebCodecs API(ブラウザ内のデコーダー/エンコーダーにアクセスするAPI)がHEVC(H.265)に対応するようになりました。
• WebVTT(動画のテキスト字幕表示形式の一つ)について、文字参照(HTMLエンティティ)が使えるようになりました。
• MediaStream Image Capture API(画像/映像の撮影・キャプチャー)で、カメラ撮影時にホワイトバランスのモードを選べるようになりました。

SVG

• SVGFESpecularLightingElement.kernelUnitLengthX / SVGFESpecularLightingElement.kernelUnitLengthY …SVGの光源計算を行う際のライトの拡散・反射設定を指定する機能に対応しました。

WebGL

• EXT_clip_control…クリップをウィンドウ上にマッピングする際の設定に対応しました。
• EXT_depth_clamp…遠方表示の深度制限に対応しました。
• EXT_polygon_offset_clamp…ポリゴンの表示深度制限を行う際のオフセット最小値・最大値指定に対応しました。
• WEBGL_polygon_mode…ワイヤーフレームポリゴンの描画に対応しました。

Web Assembly

• 定数式の対応が強化され、高度なWebAssemblyリンクを実現できるようになりました。

Webインスペクタ

• ロックダウンモードでフォントURLの読み込みが遮断された場合、コンソールにメッセージが表示されるようになりました。
• ソースマップの読み込みエラーをグループ化できるようになりました。デバッグ時のノイズを減らすのに活用できます。

各種機能強化

• お気に入りバーに表示されるブックマークアイコンについて、アイコンだけ(文字なし)で表示できるようになりました。
• iframe要素の内側もWeb翻訳の対象に追加されました。
• Apple Cashのバーチャルカード番号の取り扱いに対応し、オートフィルから残高表示を行えるようになりました。

拡張機能

• プライベートブラウズへのアクセス権がない拡張機能に対して、ユーザー側でプライベートブラウズタブを開く許可を付与できるようになりました。

Web Authentication(WebAuthn)

• PublicKeyCredentials.getClientCapabilities()関数…どのWebAuthn機能がサポートされているかを確認する機能が追加されました。

仕様変更

CSS

• 擬似要素で「-apple-」プレフィックスがついているものが無効になりました。

JavaScript

• Number.prototype.toLocaleString / Intl.NumberFormat…数字を言語別にローカライズする機能が、最新の仕様に合わせて更新されました。

メディア(動画・音声)

• video要素内に複数の動画形式をsource要素で列記して1つ再生させる場合の挙動が変更になりました。
  • 変更前：再生可能な形式のうち、上にあるものを優先
    　↓
  • 変更後：ユーザーに最適なものを自動選択(端末側でハードウェアデコードに対応している形式があれば優先)

修正・改善

全体

• ブラウザの動作パフォーマンスを向上させる各種変更が行われました。
• その他各種バグ修正が行われました。

※参照：WebKit Features in Safari 17.4 - WebKit Blog (2024/03/05)
　https://webkit.org/blog/15063/webkit-features-in-safari-17-4/

関連ページ

• 過去の各種ブラウザ仕様変更発表まとめ
  記事バックナンバー一覧
  バージョン・年月を選択して表示 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月
• 2024年2月のX(旧Twitter)規約改定・仕様変更発表まとめ
• 2024年2月のLINE仕様変更発表まとめ
• 2024年2月のInstagram/Threads仕様変更発表まとめ
• 2024年2月のFacebook規約改定・仕様変更発表まとめ

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