デジタルマーケティングTips
Safari 17.2 仕様変更発表まとめ
Safari 17.2の主要な仕様変更発表のまとめです。
要点
メルマガでも情報を配信中です！ ぜひご登録ください。
追加・拡張
HTML
- 複数のdetails要素にname属性で同じ名称を指定することで、アコーディオングループ内の1要素を開くと別の開いている要素が自動で閉じる仕様が作れるようになります。
- (iOS/iPadOS)ワンタイムコードをフォーム入力するための入力フィールドが、WebViewで使えるようになります。
CSS
- CSSの入れ子処理について、外側の要素が入る位置を指定する「&」といった記号を付加しなくても入れ子を記述できるようになりました。
- 既に「&」をつけている入れ子CSSも引き続き有効であるため、既存のコードを修正する必要はありません。
- 外側の要素が入る位置を自由に指定したい場合は引き続き「&」を明示的に指定する必要があります。
- サイズ指定の単位が増えます。ルート要素(≒最上位の「html」要素)のサイズを直接参照する単位指定について、以下の単位に新たに対応します。
- rcap…ルート要素のcap(英大文字の高さ)の○倍
- rex…ルート要素のex(英小文字の高さ)の○倍
- rch…ルート要素のch(半角「0」(ゼロ)の幅)の○倍
- ric…ルート要素のic(漢字「水」の幅)の○倍
- モーションパス指定について、以下の機能が追加されます。
- パス形状にcircle(円)およびellipse(楕円)を指定するときに、offset-positionプロパティによる位置指定が使えるようになります。
- offset-position: normal;が使えるようになります。
- パス形状にray(直線)を指定するときに、内部のパラメーターにcoord-boxや<position>が使えるようになります。
- 長方形/角丸長方形パス指定にrect()・xywh()※が使えるようになります。
※rect()とxywh()の違い
- rect()…上辺のY座標・右辺のX座標・下辺のY座標・左辺のX座標の順に、カッコ内スペース区切りで指定
- xywh()…左上端のX座標・左上端のY座標・パスの幅・パスの高さの順に、カッコ内スペース区切りで指定
いずれも、角丸の場合はさらに後ろに round と記載したのちにborder-radiusプロパティの値と同じ形式で値を指定します。
- clip-pathプロパティ(画像等をパス指定でクリッピングする設定)やshape-outsideプロパティ(テキスト等をシェイプ指定に沿って回り込ませる設定)でもrect()・xywh()が利用できます。
- アニメーションやトランジションの指定で、linear()内にカンマ区切りでパラメーターを複数(3つ以上可)指定すると、指定した値を順にリニア補完した変化でアニメーション/トランジションが行われます。
- rem()・mod()…CSSで剰余演算の関数が使えるようになります。rem(被除数, 除数)やmod(被除数, 除数)で、被除数を除数で整数除算した剰余(余り)を返します。パーセンテージや単位付きの数値でも、種類(長さ・角度・時間等)を合わせられれば剰余を出せます。
rem()とmod()の違い
負の数を含む剰余演算の場合、出力結果となる剰余の正負(プラス/マイナス)の判定条件がrem()とmod()で違います。負の数を扱う場合は関数の使い分けが必要です。
- rem()…剰余の正負は被除数(割られる数)の正負で決まります。
- mod()…剰余の正負は除数(割る数)の正負で決まります。
- round()…CSSで端数処理を行う関数が使えるようになります。round(丸め方式, 元の値, 処理単位)の順にカンマ区切りで指定すると、指定した処理単位(例：10px)に満たない端数/余った端数を丸めます。長さ等単位を持つ数値も使用できます。
- round(up, 値, 単位)…単位の整数倍のうち、指定値より大きい次の倍数に端数を丸めます。
- round(down, 値, 単位)…単位の整数倍のうち、指定値より小さい前の倍数に端数を丸めます。
- round(nearest, 値, 単位)…「四捨五入」に近い概念で、単位の整数倍のうち元の値に近い方に端数を丸めます。
- round(to-zero, 値, 単位)…「正負とも小数点切り捨て(trunc)」に近い概念で、単位の整数倍のうち0に近い方に端数を丸めます。正の値の場合は減り、負の値の場合は増えます。
- 順番付きリストの番号を制御するプロパティについて、以下の項目に対応します。
- counter-setプロパティ…現在のリストの指定要素の番号を、任意の値に変更します。
- display: list-item;でリスト表示化したli以外の要素についても、li要素と同様に、以下のプロパティが使えるようになります。
- counter-setプロパティ…番号を変更します。
- counter-resetプロパティ…番号の初期化・多階層化制御を行います。
- counter-incrementプロパティ…リスト項目1つあたりの番号の増減数を指定します。デフォルトは1です。
- mask-border系のプロパティ(対象要素の境界線領域までマスクを適用)について、以下がベンダープレフィックス(-webkit-○)なしで使えるようになります。
- mask-border-mode…マスク画像を、輝度マスクと不透明度マスクのどちらとして扱うかを指定します。
- mask-border-outset…マスク領域が本来の領域からいくらはみ出るかを指定します。
- mask-border-repeat…マスクの繰り返し・引き延ばしを指定します。
- mask-border-slice…マスクで元画像を分割する際の分け方・幅を指定します。
- mask-border-source…マスクの画像URL指定(もしくは直接描画指定)を行います。
- mask-border-width…マスクの境界線の幅を指定します。
- ::highlight()擬似要素…任意のRangeオブジェクトについて、ハイライト表示用のスタイル指定(文字色・背景色・下線・影等)を付与できるようになります。Custom Highlights API対応に伴う新機能です。
静止画・動画
- レスポンシブイメージのプリロード設定…画像セットをlink要素で指定する際に「rel="preload"」属性を入れると、画面解像度に応じて選ばれた画像を先読み対象に指定できるようになります。
- SVGのimage要素にcrossorigin属性を付与できるようになります。canvas要素等から別オリジンの素材を呼び出すときに活用できます。
- animateTransform要素(SVGのアニメーション指定)で、属性値に"translate"(位置指定・移動)が使用できるようになります。
- WebCodecs APIがH.264 L1T2形式の動画に対応します。
- HTMLMediaElement.preservesPitchプロパティ…HTMLMediaElement.playbackRateプロパティによる再生速度変更を行った際に、音の高さ(ピッチ)を維持する変換処理※を行うかどうかを指定できます。以前から対応していたwebkitPreservesPitchプロパティのプレフィックスなし版に相当します。
※ピッチを維持する変換処理
同じ音声信号で再生速度を上下させる場合、信号がそのままだと速度変化に応じてピッチも上下します。例えば再生を2倍速にすると、周波数も2倍になり、ピッチは1オクターブ上になります。
このため、再生速度を変えてもピッチを維持したい場合は、音声信号自体を変換・補完してピッチだけを元に戻す処理が必要になります。 - 動画のmetadataトラックの中からテキストトラックを自動で選択できるようになります。
JavaScript
- import属性対応…importステートメントに型情報を追加できるようになります。これにより、JSONモジュールを明示的にJSON指定してインポートしたりできます。
- FormatApproximately演算…Intl.NumberFormatオブジェクトで、formatRange()メソッドを使って数値の最小値・最大値を記載する際に、双方の値が近い場合は両者の間の値をとって「～○」※のように表記できるようになります。
※「～○」の意味
「～○」と表記すると日本語圏では一般的に「○まで(○以下/○以前)」を表しますが、英語圏では「およそ○」を表します。よってこの機能を日本語圏向けに使うと誤解を招く可能性があります。
Web API
- fetchpriority属性…img要素等の読み込み優先度を個別に指定できるようになります。早く読み込み終了させたい要素の優先度を上げ、ほかの優先度を下げたりすることで、初期読み込みの高速化に活用できます。
- fetchpriority="high"…優先度[高]
- fetchpriority="low"…優先度[低]
- fetchpriority="auto"…自動(デフォルト)
- フォーム入力要素のtitle属性…フォーム最適化(EFO)向けの機能です。入力チェックでエラー(pattern属性記載条件外の入力)が発生した際に、エラーメッセージを「title="○○"」のように属性値で記載できます。
なお、判定はフォーム送信時もしくはreportValidity()メソッド使用時に行われます。送信前でも、必要なタイミングで適宜判定処理を行えばエラーメッセージを表示できます。 - CanvasRenderingContext2D.prototype.reset()メソッド…canvas要素に2D描画されている要素をすべてクリアし、デフォルトの状態に戻します。
- 無効化されているフォーム要素が一部マウスカーソル移動系イベントを受け取れるようになります。
受け取れるようになるイベント：
- mouseenter(要素外から要素内にカーソル進入)
- mouseleave(要素内から要素外にカーソル退出)
- mousemove(要素内部でのカーソル移動)
- mouseover(要素や子要素内にカーソル進入※)
- mousewheel(ホイール操作全般)
引き続き受け取れないイベント：
- click(クリック)
- mouseup(ボタン解放)
- mousedown(ボタン押下)
※mouseenterとmouseoverの違い
ホバー判定としては双方近似する概念ですが、違いとしては、要素内に子要素がある場合に追加発火の有無が分かれます。
- mouseenter…子要素への進入時に追加発火しません。対象要素内を出て再進入したときのみ再発火します。
- mouseover…子要素への進入時も追加でイベントが発火します。
Webアプリ
- (iOS/iPadOS)[ホーム画面に追加]したWebアプリについては、macOSと同様にSafari内でログインしたときの認証情報がCookieを通じてWebアプリに継承され、ログインし直す必要がなくなります。
- (macOS)Webアプリのアイコンを高解像度にできます。
サイトのWebアプリマニフェスト側で、SVG形式のベクターアイコンか、1024px×1024pxの高解像度ビットマップアイコン(いずれもマスク可能なもの)を用意すれば対応可能です。
Webアプリマニフェストでの指定が失敗した場合は、<link rel="apple-touch-icon">要素で指定するアイコンファイルが代用されます。 - (macOS)メニュー[表示]→[ステータスバーを表示]で、Webアプリでもユーザー側で自由に下部ステータスバーを表示し、利用中リンク先URLを確認できるようになります。
- アイコンからWebアプリを呼び出すときの初期表示URLを、現在表示中のURLに変更できるようになります。
WebGL
- EXT_blend_func_extended…シェーディング時にソース色とブレンド係数の2種類の情報を出力する機能に対応します。
- WEBGL_clip_cull_distance…クリップのカリング(画角外要素の処理対象除外)機能に対応します。
Webインスペクタ
- 開発者メニューでカラーピッカーを使用した場合、CSSカスタムプロパティを含めて別途定義された色を一覧表示できるようになります。
- animation-timing-functionプロパティ / transition-timing-functionプロパティでアニメーション/トランジションを調整する場合向けに、サイドバーパネルからアニメーション/トランジションの見本一覧を表示できるようになります。
- steps()で複数段移動のアニメーションを作る際に、リニアやイーズと同様のエディター＆プレビュー画面で編集ができるようになります。
仕様変更
CSS
- モーションパス位置指定の際に、offset-pathが要素ではなく含まれるブロックを基準とした相対値で位置を計算するようになります。
静止画・動画
- 画像のEXIF情報に画像の向き(回転)の指定が含まれている場合、それを表示に使用する(ImageBitmapOptions→imageOrientationの)プロパティ値が、「none」から「from-image」に変更されます。
「none」は非推奨扱いとなるため、該当部分がある場合変更が必要です。
プライバシー
- Blob型データへのアクセス権がサイト単位で分割されるようになります。これによって、クロスサイトでのBlobデータアクセス・追跡が阻害されます。
そのほか、アクセシビリティ・決済処理・CSS・HTML・JavaScript等で様々な不具合修正が行われています。
※参照：WebKit Features in Safari 17.2 - WebKit Blog (2023/12/11)
https://webkit.org/blog/14787/webkit-features-in-safari-17-2/
マックスマウスからのお知らせ
Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け！
WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。
いますぐご登録ください！
