デジタルマーケティングTips
Safari 18.2 仕様変更発表まとめ
Safari 18.2の主要な仕様変更発表のまとめです。(ベータ版時点での情報です)
要点
- 追加・拡張:
以下の機能が追加・拡張され、表現力・利便性が向上します
・ルビや印刷書式設定、スクロールバー表示制御等のCSS機能が拡充される
・表示不安定化(CLS…SEO阻害要因)対策となる描画一時待機機能が拡充される
・マウス副ボタンやペンの傾き等入力機器の処理機能が拡充される等
メルマガでも情報を配信中です! ぜひご登録ください。
追加・拡張
以下の機能が追加されます。
ブラウザ
- コンテキストメニューから選択部分のテキストフラグメントリンクを生成できるようになります。
CSS
@page
アットルール(印刷時のスタイル指定)について、以下の機能に対応します。- マージン指定が使えるようになります。
- 印刷縦横サイズを用紙サイズ規格で指定する際に、
size: jis-b4
(JIS規格B4…257mm×364mm)およびsize: jis-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
プロパティ…オーバーフロー時にスクロールさせるブロック等で、スクロールバーの要否に関わらず表示用の余剰領域(ガター)を確保しておくか否かを指定できます。スクロールバーの有無によって内部のコンテンツ幅が変動する部分で、表示安定性の確保に役立つ場合があります。scrollbar-gutter: auto;
…スクロールバーが必要な場合だけ領域を確保します。scrollbar-gutter: stable;
…スクロールバーの要否と関係なく領域を確保します。
:is()
擬似クラス関数(カッコ内に引数として入れた要素がマッチする場合にスタイルを適用)について、引数に:host
擬似クラス(シャドウDOMのシャドウホスト)が使えるようになります。::target-text
擬似要素…テキストフラグメントに対するスタイル指定が可能になります。radial-gradient()
関数…背景色を放射状グラデーション(指定座標から周辺の末端にかけて徐々に色が変化)にする場合、グラデ設定用の円/楕円の[末端](色変化の終了地点)をどこにするかを指定できます。closest-corner
…円/楕円の中心から一番近い角を末端が通過するようサイズが調整されます。farthest-corner
…円/楕円の中心から一番遠い角を末端が通過するようサイズが調整されます。
scrollbar-width
プロパティ…スクロールバーの表示幅を指定できます。scrollbar-width: auto;
…標準の幅でバーを表示します。scrollbar-width: thin;
…通常より細い幅でバーを表示します。scrollbar-width: none;
…バーを非表示にし、スクロールバーのドラッグでのスクロールができなくなります。
スクロールバー非表示の場合、端末やポインティングデバイスによってはスクロール不可能になることもあるため注意が必要です。
::marker
擬似要素(箇条書きの箇条書き記号のスタイル指定)について、cursor
プロパティ(マウスオーバー時のカーソル状態表示)が指定できるようになります。background-clip
プロパティ(背景指定を要素外周のどの部分まで適用されるか)について、background-clip: border-area
(境界線の太さ・外周スタイルを考慮した範囲までで、線の色指定の透明度は無視する)が指定できるようになります。- テキスト要素の外周トリミングに関する以下のプロパティに対応します。
text-box-trim
プロパティ…先頭・末尾それぞれに対してトリミングの有無を指定します。text-box-edge
プロパティ…文字種を指定して上下ベースライン計算の参考にします。text-box
プロパティ…text-box-trim
/text-box-edge
両プロパティの値を単一のプロパティ名で指定できます。
- ドキュメント/ページ間遷移時のトランジション(クロスフェード等のアニメーション効果)に対応します。これに伴い、関連するクラス指定・タイプ指定、
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
Float16Array
(16ビット浮動小数点数配列)の取り扱いに対応します。Uint8Array
(8ビット符号なし整数値配列)の変換について、以下のメソッドに対応します。Uint8Array.prototype.toBase64
…8ビット符号なし整数値配列→Base64文字列に変換Uint8Array.prototype.toHex
8ビット符号なし整数値配列→16進数文字列に変換Uint8Array.fromBase64
…Base64文字列→8ビット符号なし整数値配列に変換Uint8Array.prototype.setFromBase64
…入力したBase64の文字数と、出力した8ビット符号なし整数値配列のバイト数をプロパティに持つオブジェクトを返す
Intl.Locale
(ロケール設定)で、firstDayOfWeek
プロパティ(週の初めの曜日)が指定できるようになります。Promise.try()
メソッド(各種コールバックを受けとり、結果をPromiseでラップする)に対応します。RegExp.escape()
メソッド(文字列を入れると正規表現のエスケープ処理用文字を挿入)に対応します。WebAssembly.Module.imports()
メソッド・WebAssembly.Module.exports()
メソッド…指定したモジュールのインポート/エクスポート宣言の定義を配列として返す機能に対応します。- Temporal(RFC9557で承認された新世代の日時表示形式)において、タイムゾーン指定部分が「クリティカルフラグ」に対応します。
通常は[Asia/Tokyo]
等タイムゾーン部分の値に不備があった場合は無視されるのですが、[!Asia/Tokyo]
のように先頭に感嘆符をクリティカルフラグとして付けると、値に不備があった場合解析時にエラーを返すようになります。 - 反復子関連で
Iterator.prototype.constructor
・Iterator.prototype[@@toStringTag]
・Iterator.from
に対応します。
メディア
- visionOSで空間写真の表示に対応します。
- システムデフォルトのアクセシビリティスタイル指定を、Webサイト側の指定で上書きできるようになります。
ネットワーク
link rel=expect
属性…指定ファイルが読み込まれるまでドキュメントのレンダリングを一時的にブロックする(待機させる)機能に対応します。
重要ファイルの読み込み遅延で表示にガタつきが出る(⇒累積レイアウトシフトとしてSEOの阻害要因になる)場合の対策等に活用できます。- Navigation APIで
NavigationActivation.finished
の処理に対応します。
レンダリング
script
要素・style
要素でblocking="render"
(スクリプトやCSSの評価が終わるまでレンダリングをブロックする)が有効になります。表示のガタつきが出る場合、対策として活用できます。text-underline-position
プロパティで、縦書き時の傍線の配置を指定できるようになります。text-underline-position: left;
…縦書き時、左側に傍線を表示します。横書き時は下線になります。text-underline-position: right;
…縦書き時、右側に傍線を表示します。横書き時は下線になります。
セキュリティ
- 非セキュア接続でWebサイトにアクセスする際に警告表示を行うようになります。
- HTTPS接続リクエストが失敗した場合に、自動でHTTPでの再接続を試みるフォールバック処理を行うようになります。
- スキーム未指定時にデフォルトの優先接続先をHTTPSに変更します。
Web API
PointerEvent
インターフェイスが以下のメソッド/プロパティに対応します。getPredictedEvents
メソッドポインターの移動先座標を予測する機能です。マウスやペンの移動先を先読みした描画処理等に使えます。altitudeAngle
プロパティ…画面に対するペンデバイスの高度角=垂直方向の角度(垂直に立てるか、斜めに寝かせるか)を検出します。(ペン側の対応が必要)azimuthAngle
プロパティ…画面に対するペンデバイスの方位角=水平方向の角度(真横に近い斜めか、まっすぐに近い角度か、左と右のどちらに傾いているかetc.)を検出します。(ペン側の対応が必要)getCoalescedEvents
メソッド…ポインター移動(pointermove
/pointerrawupdate
)の連続したイベントを1つに結合します。
Webアプリ
- Webアプリマニフェスト(PWAのアプリとしての基本情報)について、
dir
メンバー(テキストの記述方向)の解析に対応します。
Web Assembly
- Web Assemblyがガベージコレクションに対応します。
- Web Assemblyが関数の末尾呼び出し(関数の末尾で別の関数を呼び出す)に対応します。また、末尾呼び出しに使われるreturn_call_ref命令にも対応します。
WebDriver
- WebDriverが永続的Webサイトデータストアの使用に対応します。
Webインスペクタ
- ファイル内の範囲をブラックボックス化する機能に対応します。
- ソースマップのブラックボックス化に対応します。
- アロー関数のboundThisをコンソール内で表示します。
WebXR
- WebXRコンテンツの深度をZ軸順方向から逆方向に変換して再投影する機能に対応します。
XRSession.enabledFeatures
属性(ドキュメントで許可された機能の一覧を返す)に対応します。
WKWebView
- アプリ内でのAI生成絵文字(Genmoji)の表示・挿入に対応します。
WKDownload
(ダウンロード処理用オブジェクトが以下のプロパティに対応します。WKDownload.originatingFrame
…ダウンロードが開始されたフレームの情報を返すWKDownload.userInitiated
…ダウンロードがユーザー手動操作で開始されたか否かを返す
WKWebpagePreferences
(ページ読み込み・レンダリング時の動作指定)について、WKWebpagePreferences.UpgradeToHTTPSPolicy
(HTTP→HTTPS接続に変更)に対応します。
修正・改善
以下のバグ・不具合が修正されます。
ブラウザ
- 「前回のセッションのウィンドウを開きなおす」を使用したときにウィンドウの状態を復元するようになります。
アクセシビリティ
- テキストのプロパティ値に
text-transform: full-size-kana;
(ァィゥェォ→アイウエオのように小書きカナ文字(捨て仮名)を大きいカナ文字に変換)を指定した場合、音声出力結果に影響を与えないように修正されます。本プロパティ設定は主にルビ表示時の文字可読性や活版印刷時代との表示互換性に配慮するための機能です。アクセシビリティ的には、ルビを読み上げる際にこれらの文字種変換が読みに影響を与えないようにすることが重要になります。
- VoiceOverのフォーカスが、PDFのフォーム項目にかかったときにアクティブ化されるように修正されます。
aria-modal
属性を付与されたダイアログが入れ子かつ動的に生成される場合の処理を修正します。
キャンバス
- キャンバス描画の合成処理時、
globalCompositeOperation
プロパティで演算の種類を指定する際に、globalAlpha
プロパティの値(不透明度)が一部無視されるのを修正します。
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-x
→pan-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・パスワード入力欄には非適用とし、空文字列を特殊な方法で処理していたのも修正します。
フォーム
HTMLSelectElement.prototype.add
メソッドで選択要素プロトタイプにoptgroup
(選択肢グループ)を追加する際の挙動を修正します。
履歴
Cross-Origin-Opener-Policy
HTTPヘッダーがバックフォワードキャッシュを無効化しているのを修正します。
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
で構造化されたデータを分割する際に、正しくない文法エラーが出ていたのを修正します。
メディア
- 全画面表示でのエラーが発生した場合、エラーメッセージを含めて処理を行うよう修正します。
- Command-Aで全選択した際に全ページが空白になりハングするのを修正します。
レンダリング
mix-blend-mode
(合成/描画モード指定)で、合成レイヤーの要素が分割されずに合成が適用されるよう修正します。- MathML(数式表示)で、無効なマークアップを
mrow
(式内部の部分的な演算のグループ化)とみなしてレイアウトを行うよう修正します。 - グリッドトラックのサイズ指定において、内包された列フレックスコンテナ・複数列コンテナ・縦横比が行方向サイズに依存する項目の処理に対応するよう修正します。
- グリッドアイテムの再レイアウト時に使用するマージンを修正します。
- グリッドエリアが表示レイアウトのオーバーフローに配慮するよう修正します。
- グリッドエリアのオーバーフローについて、インライン末尾およびブロック末尾のパディングも対象に含まれるよう修正します。
- 複数トラックにわたるアイテムの表示を最適化するよう修正します。
background-image
(背景画像指定)を繰り返しにした場合、インラインフレーム内でcontent-box
(コンテンツ領域)の表示領域を埋める表示が行われないのを修正します。- ページのズーム比率が等倍未満のときに、範囲選択が正しく表示されるよう修正します。
セキュリティ
- blob://~のリソースへの接続許可プロンプト表示時にオリジンが空になるのを修正します。
SVG
- SVG要素に
clip-path
プロパティ(クリッピング領域指定)が正しく適用されるよう修正します。 transform-origin
プロパティ(変換時の基準点座標)を指定したSVGのズームイン・アウト処理を修正します。getPointAtLength
メソッド(パスに沿った距離を返す)について、パスが空だった場合に例外を発するよう修正します。fill
プロパティ(塗りつぶし)がアニメーション要素のプレゼンテーション属性として考慮されないよう修正します。- XHTML内のスクリプトについて、信頼されている形式が強制された場合は動作するように修正します。
Webアニメーション
- 以下の属性・プロパティが離散アニメーション(連続的に変化せず中間地点で開始値→終了値にパッと切り替え)に対応するよう修正されます。
alignment-baseline
属性…SVG描画の親子要素の配置関係を指定buffered-rendering
プロパティ…SVG要素のバッファリング要否の参考情報として要素の変更頻度を指定hanging-punctuation
プロパティ…区切り文字の禁則処理制御scroll-snap-type
・scroll-snap-align
・scroll-snap-stop
プロパティ…スクロールスナップの表示調整column-span
プロパティ…段組み内で部分的に段組み解除(ぶち抜き)レイアウトを作成appearance
プロパティ…OS標準のスタイル指定をWebページ内に適用hyphenate-character
プロパティ…ハイフネーション時のハイフン文字変更font-optical-sizing
プロパティ…フォントのオプティカルサイズ(見出しや本文等の用途別に文字の太さ等を微妙に調整する)設定
mask-border
系各種プロパティ(画像等を境界線指定に沿って切り抜き)がアニメーション可能になります。stroke-color
プロパティ(境界線色指定)がアニメーション可能になります。- 連続アニメーションにならない交互切り替えのアニメーション変換処理を修正します。
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
WKWebViewConfiguration.writingToolsBehavior
プロパティが、iOS18より下を実装対象に含めた場合に利用できなくなるのを修正します。
廃止・削除
以下の機能が廃止されます。
JavaScript
- 使用されなくなっているTemporal.Instant APIへの対応を廃止します。
SVG
hasExtension
(ファイル拡張子の有無を判定、非標準)への対応を廃止します。
Web API
- 非標準の
overflow
イベントへの対応を廃止します。
※参照:Safari 18.2 Beta Release Notes - Apple Developers (2024/10/22)
https://developer.apple.com/documentation/safari-release-notes/safari-18_2-release-notes
マックスマウスからのお知らせ
Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け!
WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。
いますぐご登録ください!