Safari 17.2の新しいWebKit機能

HTML

• Exclusive Accordion: <details> 要素で name 属性をサポート。1つを選択すると他のアイテムは自動的に閉じる
• <input> フィールドに autocomplete="one-time-code" を指定することで、テキストで受信したOTPコードの自動入力をサポート

CSS

• CSS Nesting 時に要素セレクターへ & を付ける必要がある制限を撤廃
• rcap、rex、ric、rch などの Root ユニットをサポート
• CSS Motion Path を Web 標準へより準拠するよう更新
• アニメーションとトランジションに linear() 関数のサポートを追加
• rem()、mod()、round() などの数学関数をサポート
• counter-set 属性をサポート
• -webkit-mask-box-image からブラウザープレフィックスを削除し、mask-border-[mode|outset|repeat|slice|source|width] を直接サポート
• Custom Highlights API をサポート: ::selection のようなものを ::highlight() 関数でカスタム指定可能

Image と Video

• Responsive Image の Preloading をサポート: <link rel=preload> の imagesrcset/imagesizes を <img> の srcset/sizes のようにそのまま利用可能
• imageOrientation 属性で画像の値をそのまま使う指定を、none からより適切な from-image に変更
• SVG の <image crossorigin> をサポート
• H264 L1T2 コーデックをサポート
• webkitPreservesPitch からブラウザープレフィックスを削除し、HTMLMediaElement.preservesPitch として追加

JavaScript

• import attributes をサポート（インポート時に型情報を追加可能）
• Intl.NumberFormat の FormatApproximately をサポート

Web API

• Fetch Priority をサポート: 画像、スクリプト、CSS などに対して fetchpriority=[high|low|auto] などを設定可能
• Form Validation 時に title 属性をサポート。検証エラー時に title の値を表示
• CanvasRenderingContext2D.prototype.reset() をサポート
• 特定のマウスイベントを disabled されたフォームコントロールへ送ることをサポート: mouseenter、mouseleave、mousemove、mouseover、mousewheel など。click/mouseup/mousedown は受け取れない

Web Apps

• Login Cookies: Webアプリを Mac の「Add to Dock」や iOS の「Add to Home Screen」で追加した場合でも Login Cookie を保存し、ログイン状態を維持可能
• Webアプリのアイコンがよりきれいに見えるよう変更。最良の体験のためには SVG または 1024x1024 以上の画像の提供が必要
• Mac の Webアプリで「ステータスバーの表示を有効化」が可能。Webアプリのウィンドウで最初に読み込むページを簡単に変更可能

WebGL

• 新しい WebGL 拡張をサポート: EXT_blend_func_extended, WEBGL_clip_cull_distance

Privacy

• blob partitioning を追加

Web Inspector

• カラーパレットで Color Variable をサポート
• アニメーションのタイミングを調整して表示