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

Safari 18.2 仕様変更発表まとめ

記事タイトル画像:Safari 18.2 仕様変更発表まとめ

Safari 18.2の主要な仕様変更発表のまとめです。(ベータ版時点での情報です)

記事バックナンバー一覧

要点

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

追加・拡張

以下の機能が追加されます。

ブラウザ

  • コンテキストメニューから選択部分のテキストフラグメントリンクを生成できるようになります。

CSS

  • @pageアットルール新しいウィンドウで開きます(印刷時のスタイル指定)について、以下の機能に対応します。
    • マージン指定が使えるようになります。
    • 印刷縦横サイズを用紙サイズ規格で指定する際に、size: jis-b4新しいウィンドウで開きます(JIS規格B4…257mm×364mm)およびsize: jis-b5新しいウィンドウで開きますが使えるようになります。

      size: b4新しいウィンドウで開きます(ISO規格B4…250mm×353mm)やsize: b5新しいウィンドウで開きます(ISO規格B5…176mm×250mm)とは別サイズです。日本国内で一般的に使われるのはJIS規格のB4/B5なので要注意です。

  • @propertyアットルール新しいウィンドウで開きますでカスタムプロパティを定義する際、受け付ける値の形式指定に syntax: "<string>";(文字列扱いで受け付け)が使えるようになります。
  • ルビ新しいウィンドウで開きます関連で以下の機能が追加されます。
    • ruby-alignプロパティ新しいウィンドウで開きます…ルビ/ふりがなを、ベースとなる文字列(親文字)に対して前後どちら寄りに配置するかを指定できるようになります。
      • ruby-align: space-around;新しいウィンドウで開きます…ルビを親文字両端より少し狭い範囲で均等割り付けします。文字間とルビ両端の周囲にスペースが入ります。
      • ruby-align: space-between;新しいウィンドウで開きます…ルビを親文字の範囲内に均等割り付けします。文字間にスペースが入りつつ、親文字の範囲をルビが両端いっぱいまで使います。
      • ruby-align: start;新しいウィンドウで開きます…ルビを親文字の始点側(左→右の横書きなら左側、上→下の縦書きなら上側)に寄せます。
      • ruby-align: center;新しいウィンドウで開きます…ルビを親文字の中央に寄せます。文字間にスペースが入らず、中央に字が集中します。
    • ruby-overhangプロパティ新しいウィンドウで開きます…ルビ/ふりがなの長さがベースとなる文字列(親文字)の範囲に収まりきらない場合、隣接する要素(文字列等)にルビが被る現象を許可するか否かを指定します。
      • ruby-overhang: auto;新しいウィンドウで開きます…隣接要素へルビが被る現象を許可します。(デフォルトはこちら)
      • ruby-overhang: none;新しいウィンドウで開きます…隣接要素へルビが被る現象を許可しません。この場合親文字の領域がルビの長さに応じて必要な分延長され、文字間に隙間が増えます。
    • ruby-positionプロパティ新しいウィンドウで開きます…ルビ/ふりがなを親文字のどちら側の行間に配置するかを指定します。
      • ruby-position: over;新しいウィンドウで開きます…ルビを親文字の上(縦書き時は右)に配置します。
      • ruby-position: under;新しいウィンドウで開きます…ルビを親文字の下(縦書き時は左)に配置します。
      • ruby-position: inter-character;新しいウィンドウで開きます…横書き時、ルビを親文字の右側(文字間)に配置します。縦書き時も右側(overと同じ)に配置します。中国語繫体字の注音符号等で使用します。
  • scrollbar-gutterプロパティ新しいウィンドウで開きます…オーバーフロー時にスクロールさせるブロック等で、スクロールバーの要否に関わらず表示用の余剰領域(ガター)を確保しておくか否かを指定できます。スクロールバーの有無によって内部のコンテンツ幅が変動する部分で、表示安定性の確保に役立つ場合があります。 なお、上記はあくまでクラシックスクロールバー([常に表示]設定)で適用されるスタイル設定です。オーバーレイスクロールバー([スクロール時に表示]設定)使用時は上記設定に関わらず領域確保を行いません。
  • :is()擬似クラス関数新しいウィンドウで開きます(カッコ内に引数として入れた要素がマッチする場合にスタイルを適用)について、引数に:host擬似クラス新しいウィンドウで開きます(シャドウDOMのシャドウホスト)が使えるようになります。
  • ::target-text擬似要素新しいウィンドウで開きます…テキストフラグメントに対するスタイル指定が可能になります。
  • radial-gradient()関数新しいウィンドウで開きます…背景色を放射状グラデーション(指定座標から周辺の末端にかけて徐々に色が変化)にする場合、グラデ設定用の円/楕円の[末端](色変化の終了地点)をどこにするかを指定できます。
    • closest-corner…円/楕円の中心から一番近い角を末端が通過するようサイズが調整されます。
    • farthest-corner…円/楕円の中心から一番遠い角を末端が通過するようサイズが調整されます。
  • scrollbar-widthプロパティ新しいウィンドウで開きます…スクロールバーの表示幅を指定できます。

    スクロールバー非表示の場合、端末やポインティングデバイスによってはスクロール不可能になることもあるため注意が必要です。

  • ::marker擬似要素新しいウィンドウで開きます(箇条書きの箇条書き記号のスタイル指定)について、cursorプロパティ新しいウィンドウで開きます(マウスオーバー時のカーソル状態表示)が指定できるようになります。
  • background-clipプロパティ新しいウィンドウで開きます(背景指定を要素外周のどの部分まで適用されるか)について、background-clip: border-area新しいウィンドウで開きます(境界線の太さ・外周スタイルを考慮した範囲までで、線の色指定の透明度は無視する)が指定できるようになります。
  • テキスト要素の外周トリミングに関する以下のプロパティに対応します。
  • ドキュメント/ページ間遷移時のトランジション(クロスフェード等のアニメーション効果)に対応します。これに伴い、関連するクラス指定・タイプ指定、view-transition-nameプロパティ新しいウィンドウで開きます(特定の要素に限り別のトランジションを適用させる際の要素指定を行う)にも対応します。
  • calc()関数新しいウィンドウで開きますでの計算仕様が最新のWeb標準に適用し、別単位の数値での除算等が可能になります。

認証

  • HMAC鍵導出関数(HKDF)に、SHA224が使用できるようになります。
    ※SHA224…SHA-2系ハッシュ関数の一種で、256ビット中224ビットを抜粋したハッシュ値を返します

DOM

  • auxclickイベント新しいウィンドウで開きます(主ボタン以外のボタン/ホイールのクリック)の発行に対応します。
  • 新規ダイアログの初期フォーカスに関するアルゴリズムについて、仕様変更に適合するかたちで実装を行います。

フォーム

  • (iOS)フォームでinput type=week新しいウィンドウで開きます(週文字列入力)に対応します。週文字列形式でvalue属性に初期値を入れることも可能です。

    週文字列新しいウィンドウで開きます…1年のうち年初からの週数を「○年第△週」とし、それを「○○○○-W△△」(○○○○=西暦4桁、△△=週数2桁)で文字列にまとめたものです。
    例えば2024年第5週(2024/1/29~2/4)なら2024-W05となります。

JavaScript

メディア

  • visionOSで空間写真の表示に対応します。
  • システムデフォルトのアクセシビリティスタイル指定を、Webサイト側の指定で上書きできるようになります。

ネットワーク

  • link rel=expect属性新しいウィンドウで開きます…指定ファイルが読み込まれるまでドキュメントのレンダリングを一時的にブロックする(待機させる)機能に対応します。
    重要ファイルの読み込み遅延で表示にガタつきが出る(⇒累積レイアウトシフトとしてSEOの阻害要因になる)場合の対策等に活用できます。
  • Navigation APIでNavigationActivation新しいウィンドウで開きます.finishedの処理に対応します。

レンダリング

  • script要素・style要素でblocking="render"新しいウィンドウで開きます(スクリプトやCSSの評価が終わるまでレンダリングをブロックする)が有効になります。表示のガタつきが出る場合、対策として活用できます。
  • text-underline-positionプロパティ新しいウィンドウで開きますで、縦書き時の傍線の配置を指定できるようになります。

セキュリティ

  • 非セキュア接続でWebサイトにアクセスする際に警告表示を行うようになります。
  • HTTPS接続リクエストが失敗した場合に、自動でHTTPでの再接続を試みるフォールバック処理を行うようになります。
  • スキーム未指定時にデフォルトの優先接続先をHTTPSに変更します。

Web API

  • PointerEventインターフェイス新しいウィンドウで開きますが以下のメソッド/プロパティに対応します。
    • getPredictedEventsメソッド新しいウィンドウで開きますポインターの移動先座標を予測する機能です。マウスやペンの移動先を先読みした描画処理等に使えます。
    • altitudeAngleプロパティ新しいウィンドウで開きます…画面に対するペンデバイスの高度角=垂直方向の角度(垂直に立てるか、斜めに寝かせるか)を検出します。(ペン側の対応が必要)
    • azimuthAngleプロパティ新しいウィンドウで開きます…画面に対するペンデバイスの方位角=水平方向の角度(真横に近い斜めか、まっすぐに近い角度か、左と右のどちらに傾いているかetc.)を検出します。(ペン側の対応が必要)
    • getCoalescedEventsメソッド新しいウィンドウで開きます…ポインター移動(pointermove / pointerrawupdate)の連続したイベントを1つに結合します。

Webアプリ

Web Assembly

  • Web Assemblyがガベージコレクションに対応します。
  • Web Assemblyが関数の末尾呼び出し(関数の末尾で別の関数を呼び出す)に対応します。また、末尾呼び出しに使われるreturn_call_ref命令にも対応します。

WebDriver

  • WebDriverが永続的Webサイトデータストアの使用に対応します。

Webインスペクタ

  • ファイル内の範囲をブラックボックス化する機能に対応します。
  • ソースマップのブラックボックス化に対応します。
  • アロー関数のboundThisをコンソール内で表示します。

WebXR

  • WebXRコンテンツの深度をZ軸順方向から逆方向に変換して再投影する機能に対応します。
  • XRSession.enabledFeatures属性新しいウィンドウで開きます(ドキュメントで許可された機能の一覧を返す)に対応します。

WKWebView

  • アプリ内でのAI生成絵文字(Genmoji)の表示・挿入に対応します。
  • WKDownload新しいウィンドウで開きます(ダウンロード処理用オブジェクトが以下のプロパティに対応します。
  • WKWebpagePreferences新しいウィンドウで開きます(ページ読み込み・レンダリング時の動作指定)について、WKWebpagePreferences.UpgradeToHTTPSPolicy(HTTP→HTTPS接続に変更)に対応します。

修正・改善

以下のバグ・不具合が修正されます。

ブラウザ

  • 「前回のセッションのウィンドウを開きなおす」を使用したときにウィンドウの状態を復元するようになります。

アクセシビリティ

  • テキストのプロパティ値にtext-transform: full-size-kana;新しいウィンドウで開きます(ァィゥェォ→アイウエオのように小書きカナ文字(捨て仮名)を大きいカナ文字に変換)を指定した場合、音声出力結果に影響を与えないように修正されます。

    本プロパティ設定は主にルビ表示時の文字可読性や活版印刷時代との表示互換性に配慮するための機能です。アクセシビリティ的には、ルビを読み上げる際にこれらの文字種変換が読みに影響を与えないようにすることが重要になります。

  • VoiceOverのフォーカスが、PDFのフォーム項目にかかったときにアクティブ化されるように修正されます。
  • aria-modal属性新しいウィンドウで開きますを付与されたダイアログが入れ子かつ動的に生成される場合の処理を修正します。

キャンバス

CSS

  • 表の行指定で適用させたCSSが表の全セルに繰り返し適用されるのを修正します。
  • @page新しいウィンドウで開きます内のsizeプロパティ新しいウィンドウで開きますがグローバルCSSプロパティとして動作していたのを、アットルール領域内の記述子として機能するよう修正します。
  • background-clip: text新しいウィンドウで開きます(テキストにのみ指定背景を適用)について、テキスト装飾が適切に行われるよう修正します。
  • font-variant:新しいウィンドウで開きます small-caps normal;と指定した際に、文法エラー扱いになるよう修正します。(normal新しいウィンドウで開きます(標準)とsmall-caps新しいウィンドウで開きます(小型大文字)は両立できません)
  • -webkit-line-clamp: none;新しいウィンドウで開きます(ブロックの行数制限を行わない)が正しく解析されるよう修正します。
  • text-underline-offsetプロパティ新しいウィンドウで開きます(テキストに下線を引く場合のテキストとの間隔調整)について、パーセンテージでの値指定に対応するよう修正します。
  • text-decoration-thicknessプロパティ新しいウィンドウで開きます(下線・打ち消し線等テキスト装飾線の太さ指定)が、ボタン内のテキストにも適用されるよう修正します。
  • 長さの単位のうちlh新しいウィンドウで開きます(行の高さの○倍)について、参照対象であるline-heightプロパティ新しいウィンドウで開きますの処理より前に計算されることがあるのを修正します。
  • touch-actionプロパティ新しいウィンドウで開きます(タッチ画面での対応操作を限定する)で値にpan-x新しいウィンドウで開きます(指1本での横移動を有効化)とpan-y新しいウィンドウで開きます(指1本での縦移動を有効化)を併用した場合、pan-xpan-yの順に適用されるよう修正します。
  • グリッドつきブロック内の複数アイテム配置について、place-contentプロパティ新しいウィンドウで開きますplace-itemsプロパティ新しいウィンドウで開きますplace-selfプロパティ新しいウィンドウで開きますを組み合わせた際の処理を修正します。
  • CSS入れ子処理において、巻き取り動作が削除されるのを修正します。
  • CSSでのOSシステムカラー設定呼び出し新しいウィンドウで開きますについて、ダークモード時のButtonFace新しいウィンドウで開きます(ボタン背景色)・ButtonText新しいウィンドウで開きます(ボタン文字色)のコントラストを修正します。
  • CSSを入れ子にした場合に:has()新しいウィンドウで開きますのマッチングを許可しないように修正します。
  • 日本語・中国語・韓国語で、テキストの下線と強調記号のデフォルト位置を修正します。
  • メイソンリーレイアウト(コンテンツブロックの素材縦横比をそのままに、複数列グリッドで下方向に積んでいくデザイン)で、固有サイズ指定を固定値やautoにしていた場合の処理を修正します。
  • プログラム側で属性値を変更したときに無効になる問題を修正し、ページ属性セレクタが想定通り動作するようにします。
  • @scopeアットルール新しいウィンドウで開きます内部での入れ子CSSによる宣言について、where(:scope)新しいウィンドウで開きますのように動作するよう修正します。

DOM

  • (OS全体の)プラットフォームマウスイベントから発生される(ブラウザレベルの)ポインターイベントについて、タイムスタンプはプラットフォームイベント側のものを使用するように修正されます。
  • ポップオーバータブのナビゲーションを修正します。
  • マウスがWebViewウィンドウに入ったときにmousemoveイベント新しいウィンドウで開きますが1回ではなく2回発行されるのを修正します。

編集

  • autocorrect属性新しいウィンドウで開きます(オートコレクト)の挙動を標準に合わせ、メールアドレス・URL・パスワード入力欄には非適用とし、空文字列を特殊な方法で処理していたのも修正します。

フォーム

履歴

JavaScript

  • クラスフィールド初期化時にyield新しいウィンドウで開きますawait新しいウィンドウで開きますの実行を許可しないよう修正します。
  • DestructuringAssignmentTarget新しいウィンドウで開きます(配列等の分割代入先)が[[Get]]新しいウィンドウで開きますメソッドの呼び出しやステップ反復子よりも前に評価されるよう修正します。
  • JITコンパイラがBigInt(長整数)型の負の指数に対して例外を発していたのを修正します。
  • 正規表現の範囲指定数量子(\n{2,5}のような繰り返しの上限~下限指定)が253-1(約9000兆)まで許可されるよう修正します。
  • Uint8Array#setFromBase64新しいウィンドウで開きますが不良データを受け取った場合でも、その前のチャンクまではエンコード・デコード処理を行うよう修正します。
  • TimeZone日時データで時間情報がないものを拒否するよう修正します。
  • Object.keys(global)新しいウィンドウで開きますに、最初に削除しない限り列挙不可能なプロパティが入り込む件を修正します。
  • Temporal.Instant.fromEpochMilliseconds新しいウィンドウで開きます(UNIX時間をミリ秒単位で取得)について以下の修正が行われます。
    • エラーメッセージを修正します。
    • 小数点以下については丸め込み端数処理された値を返すようにします。
  • 時間の長さの計算で、ナノ秒単位の計算順序を修正します。
  • Temporalのタイムゾーン表記について、1分単位より細かい指定を許可しないよう修正します。
  • WeakMapコンストラクタ新しいウィンドウで開きますが不正エントリをむりやり生成する反復可能オブジェクトを取得した場合に出るTypeErrorメッセージが改善されます。
  • let新しいウィンドウで開きますで構造化されたデータを分割する際に、正しくない文法エラーが出ていたのを修正します。

メディア

  • 全画面表示でのエラーが発生した場合、エラーメッセージを含めて処理を行うよう修正します。

PDF

  • Command-Aで全選択した際に全ページが空白になりハングするのを修正します。

レンダリング

  • mix-blend-mode新しいウィンドウで開きます(合成/描画モード指定)で、合成レイヤーの要素が分割されずに合成が適用されるよう修正します。
  • MathML(数式表示)で、無効なマークアップをmrow新しいウィンドウで開きます(式内部の部分的な演算のグループ化)とみなしてレイアウトを行うよう修正します。
  • グリッドトラックのサイズ指定において、内包された列フレックスコンテナ・複数列コンテナ・縦横比が行方向サイズに依存する項目の処理に対応するよう修正します。
  • グリッドアイテムの再レイアウト時に使用するマージンを修正します。
  • グリッドエリアが表示レイアウトのオーバーフローに配慮するよう修正します。
  • グリッドエリアのオーバーフローについて、インライン末尾およびブロック末尾のパディングも対象に含まれるよう修正します。
  • 複数トラックにわたるアイテムの表示を最適化するよう修正します。
  • background-image(背景画像指定)を繰り返しにした場合、インラインフレーム内でcontent-box(コンテンツ領域)の表示領域を埋める表示が行われないのを修正します。
  • ページのズーム比率が等倍未満のときに、範囲選択が正しく表示されるよう修正します。

セキュリティ

  • blob://~のリソースへの接続許可プロンプト表示時にオリジンが空になるのを修正します。

SVG

  • SVG要素にclip-pathプロパティ新しいウィンドウで開きます(クリッピング領域指定)が正しく適用されるよう修正します。
  • transform-originプロパティ新しいウィンドウで開きます(変換時の基準点座標)を指定したSVGのズームイン・アウト処理を修正します。
  • getPointAtLengthメソッド新しいウィンドウで開きます(パスに沿った距離を返す)について、パスが空だった場合に例外を発するよう修正します。
  • fillプロパティ新しいウィンドウで開きます(塗りつぶし)がアニメーション要素のプレゼンテーション属性として考慮されないよう修正します。
  • XHTML内のスクリプトについて、信頼されている形式が強制された場合は動作するように修正します。

Webアニメーション

Web API

  • click新しいウィンドウで開きます(主クリック) / auxclick新しいウィンドウで開きます(副クリック) / contextmenu新しいウィンドウで開きます(コンテキストメニュー表示)イベント、およびclick()メソッド新しいウィンドウで開きますPointerEventインターフェイス新しいウィンドウで開きますを使うよう修正します。
  • oncuechangeイベントハンドラー新しいウィンドウで開きます(テキスト字幕表示の変更時に反応)の動作が他のイベントハンドラーと連携するよう修正します。
  • Fullscreen API新しいウィンドウで開きます(全画面表示)が有効になっているときにPointer Lock API新しいウィンドウで開きます(マウスの動きの取得)が動作するよう修正します。
  • フォーム内ボタンのpopovertarget属性新しいウィンドウで開きます(ボタンをポップオーバー制御用にする)が動作するよう修正します。
  • 非HTML要素の文字記述方向(左→右etc.)の問題を修正します。
  • ポインターキャプチャーで生成されたポインターイベントを信頼・採用するよう修正します。
  • XMLSerializer.serializeToString()メソッド新しいウィンドウで開きます(DOMツリーをXML形式文字列に変換)が、imgの子要素のシリアル化および適切な閉じ処理を行っていない件を修正します。
  • シャドウツリーの文字記述方向(左→右etc.)の問題を修正します。
  • 一般的な言い回しで終わる大きなテキストを選択した場合のテキストハイライトを修正します。
  • ハイライト付きリンクの作成時、記事中の一般的な用語をハイライトするリンクを作ってアクセスしてみると、同じ単語の別の部分を強調表示してしまう、という現象を修正します。
  • onbeforeinputイベントハンドラー新しいウィンドウで開きます(要素の値が変更されようとしているときに反応)をGlobalEventHandlers新しいウィンドウで開きますに移動させます。
  • scrollIntoViewメソッド新しいウィンドウで開きます(指定した要素が見える位置まで親コンテナをスクロールさせる)がSVGでも正しく動作するよう修正します。
  • モーダル表示でないポップオーバーダイアログによって後ろのコンテンツに対する操作が阻害される件を修正します。

Webアプリ

  • Webアプリマニフェスト内の解析時に半角スペースをトリミングするよう修正します。

WebDriver

  • WebDriverがアプリケーションの状態と位置の処理を行う際に、ビューポートの原点ではなくポインターの原点を基準とするよう修正します。
  • 各マウスボタンの押下・解放アクションをボタンごとに正確に解釈するようにし、複数マウスボタンの同時操作(左右ボタン同時押し等)の処理を修正します。
  • ユーザー側のアクティベーション処理によってスクリプト評価が無条件に実行されるのを修正します。
  • WebDriverがスクリーンショットを取得するときに、上端に薄いグレーの線が出て、角が丸くならないことがあるのを修正します。

Webインスペクタ

  • タグ名編集中に追加された属性の解析を修正します。
  • コンソールプロンプト内の複数行コンテンツがスクロールできない問題を修正します。

WebXR

  • visionOSのイマーシブセッション中に音声が聞こえなくなるのを修正します。

WKWebView

廃止・削除

以下の機能が廃止されます。

JavaScript

  • 使用されなくなっているTemporal.Instant APIへの対応を廃止します。

SVG

  • hasExtension(ファイル拡張子の有無を判定、非標準)への対応を廃止します。

Web API

  • 非標準のoverflowイベントへの対応を廃止します。

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

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

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

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