在 6 月 11 日舉行的 Apple 全球開(kāi)發(fā)者大會(huì)（WWDC）上，Apple 揭開(kāi)了其最新軟件系列的面紗，其中包括 ios 18、watchOS 11、macOS 15、iPadOS 18、tvOS 18 以及 VisionOS 2 操作 系統(tǒng)。不僅如此，Apple 還發(fā)布了其 AI 套件 Apple Intelligence 。

在此次更新中，Safari 瀏覽器也迎來(lái)了全新的版本—— Safari 18，它也緊跟時(shí)代潮流帶來(lái)了令人矚目的 48 項(xiàng)全新 Web 功能，并對(duì) 174 個(gè)已知問(wèn)題進(jìn)行了修復(fù)。下面就來(lái)看看 Safari 18 的更新亮點(diǎn)！

WebXR 增強(qiáng)

• 對(duì) visionOS 2 Beta 的支持：為visionOS 2 Beta 增加了對(duì) WebXR 的支持，允許開(kāi)發(fā)者為 Apple Vision Pro 用戶創(chuàng)建完全沉浸式的Web體驗(yàn)。
• Transient-pointer輸入模式：Safari for visionOS 2 Beta支持新的WebXR transient-pointer輸入模式，使用戶可以通過(guò)視線和手勢(shì)進(jìn)行自然交互。
• 手部跟蹤：支持 WebXR 手部跟蹤，允許開(kāi)發(fā)者為用戶的手部動(dòng)畫(huà)創(chuàng)建3D模型。

CSS 更新

• 視圖轉(zhuǎn)換API：引入了視圖轉(zhuǎn)換API，允許開(kāi)發(fā)者在狀態(tài)之間平滑地轉(zhuǎn)換元素，并提供更靈活的頁(yè)面動(dòng)畫(huà)。
• 樣式查詢：支持樣式查詢，使開(kāi)發(fā)者能夠定義可重用的樣式組，并根據(jù)CSS自定義屬性的值應(yīng)用這些樣式。
• 相對(duì)顏色語(yǔ)法：擴(kuò)展了相對(duì)顏色語(yǔ)法，允許在定義新顏色時(shí)引用currentColor或系統(tǒng)顏色關(guān)鍵字。
• 顯示屬性的動(dòng)畫(huà)：引入了對(duì) display 屬性的過(guò)渡動(dòng)畫(huà)支持，結(jié)合 @starting-style 和 transition-behavior，允許開(kāi)發(fā)者在元素狀態(tài)間實(shí)現(xiàn)平滑的顯示轉(zhuǎn)換。
• 在visionOS上塑造交互區(qū)域：Safari in visionOS 2 Beta 允許開(kāi)發(fā)者通過(guò)CSS clip-path 和SVG來(lái)定義和顯示鏈接等交互元素的可見(jiàn)區(qū)域形狀，增強(qiáng)用戶體驗(yàn)。
• 背景濾鏡：改進(jìn)了背景濾鏡 backdrop-filter 的實(shí)現(xiàn)，無(wú)需前綴，支持 SVG 濾鏡函數(shù)，并增強(qiáng)了與其他瀏覽器的互操作性。
• Flexbox中的safe：增加了對(duì) Flexbox 中 safe 關(guān)鍵字的支持，用于改進(jìn) flex 項(xiàng)目溢出時(shí)的布局處理。
• 內(nèi)容可見(jiàn)性：支持 content-visibility 屬性，允許開(kāi)發(fā)者優(yōu)化頁(yè)面性能，通過(guò)延遲渲染屏幕外內(nèi)容來(lái)加速頁(yè)面加載。

Mac上的Web應(yīng)用

• 直接打開(kāi)鏈接：Mac上的Web應(yīng)用支持直接打開(kāi)與已添加Web應(yīng)用范圍匹配的鏈接，無(wú)需跳轉(zhuǎn)瀏覽器。
• 擴(kuò)展支持：Mac上的Web應(yīng)用現(xiàn)支持Safari Web擴(kuò)展和內(nèi)容攔截器，為用戶提供更多個(gè)性化選項(xiàng)。

Safari 擴(kuò)展更新

• 移動(dòng)設(shè)備管理：增加了對(duì)移動(dòng)設(shè)備管理的支持，包括擴(kuò)展啟用狀態(tài)、私人瀏覽狀態(tài)和設(shè)備上的網(wǎng)站訪問(wèn)管理，使學(xué)校和企業(yè)能更方便地配置和管理iOS、iPadOS或macOS設(shè)備上的Safari應(yīng)用擴(kuò)展、內(nèi)容攔截器和Web擴(kuò)展。

空間媒體體驗(yàn)

• Fullscreen API：Safari 18 for visionOS 2 Beta 引入了 Fullscreen API，允許開(kāi)發(fā)者在Web上創(chuàng)建與Apple Vision Pro上類似的空間照片和全景圖體驗(yàn)。用戶點(diǎn)擊照片時(shí)，它們會(huì)彈出到浮動(dòng)框架中，進(jìn)一步點(diǎn)擊則展開(kāi)為完全沉浸式的體驗(yàn)。

HTML

• 內(nèi)聯(lián)預(yù)測(cè)文本：Safari 18 Beta 將 iOS、iPadOS、visionOS、macOS Sequoia 和 macOS Sonoma 上的內(nèi)聯(lián)預(yù)測(cè)文本功能帶到了Web，允許在輸入時(shí)預(yù)測(cè)并自動(dòng)完成文本。開(kāi)發(fā)人員可通過(guò)writingsuggestions屬性控制此功能。
• 開(kāi)關(guān)控件觸覺(jué)反饋：iOS 18 Beta 的 WebKit for Safari 為<input type=checkbox switch>添加了觸覺(jué)反饋，提升了iPhone上開(kāi)關(guān)控件的用戶體驗(yàn)。
• 日期和時(shí)間輸入輔助功能：macOS 上的 WebKit for Safari 18 Beta 改進(jìn)了對(duì)日期和時(shí)間輸入字段類型的輔助功能支持，使<input type="date">、<input type="datetime-local">和<input type="time">元素與VoiceOver正常協(xié)作。
• ARIA屬性擴(kuò)展：增加了對(duì)ariaBrailleLabel和ariaBrailleRoleDescription元素反射屬性的支持，允許通過(guò) JavaScript API 直接獲取和設(shè)置ARIA屬性，為特定可訪問(wèn)性需求提供了更多選項(xiàng)。
• Safari Viewer無(wú)干擾視頻觀看：引入Viewer功能，提供無(wú)干擾的視頻觀看體驗(yàn)，當(dāng)切換標(biāo)簽或窗口時(shí)自動(dòng)進(jìn)入畫(huà)中畫(huà)模式。
• visionOS沉浸式視頻：Safari for visionOS 2 Beta 支持全屏視頻?？康疆?dāng)前環(huán)境，提供完全沉浸式的視頻觀看體驗(yàn)，并通過(guò)數(shù)字表冠調(diào)節(jié)沉浸感。
• 受管理的媒體源支持：為Managed Media Source (MMS )和 Media Source Extensions (MSE) 添加了 Workers支持，增強(qiáng)了跨站點(diǎn)媒體播放的穩(wěn)定性和性能。

WebRTC

• WebRTC HEVC支持：WebKit for Safari 18 beta 增加了對(duì) WebRTC HEVC RFC 7789 RTP Payload Format 的支持，為視頻會(huì)議、視頻流和高比特率媒體傳輸提供了新選擇。

Passkeys

• 增加了對(duì)使用mediation=conditional進(jìn)行web認(rèn)證憑據(jù)創(chuàng)建的支持，支持網(wǎng)站自動(dòng)將密碼賬戶升級(jí)為passkeys。
• 支持跨相關(guān)來(lái)源使用 passkeys，允許網(wǎng)站在有限數(shù)量的共享憑證后端的域上使用相同的passkey。
• 增加了對(duì) WebAuthn prf 擴(kuò)展的支持，允許從passkey中檢索對(duì)稱密鑰用于加密用戶數(shù)據(jù)。

HTTPS

• 混合內(nèi)容處理：通過(guò)在混合內(nèi)容設(shè)置中自動(dòng)升級(jí)被動(dòng)子資源請(qǐng)求，增強(qiáng)了對(duì)所有圖像、視頻和音頻的HTTPS支持，遵循混合內(nèi)容級(jí)別 2。

JavaScript

• 在RegExp中增加了對(duì)Unicode 15.1.0字符的支持，總共支持149,813個(gè)字符。
• 在RegExp.prototype[Symbol.matchAll]中增加了對(duì)v標(biāo)志的支持，提供了更強(qiáng)大的Unicode字符匹配能力。

Web API

• 增加了對(duì)URL.parse()的支持，這是一種新的URL解析方法，在解析失敗時(shí)返回null而不是拋出異常。
• 增強(qiáng)了聲明性Shadow Tree支持，通過(guò)向<template>元素添加shadowRootDelegatesFocus、shadowRootClonable、shadowRootSerializable IDL屬性和getHTML()方法，使它們更加靈活和可序列化。
• hasUAVisualTransition：增加了對(duì) PopStateEvent 的 hasUAVisualTransition 屬性的支持，該屬性指示用戶代理是否對(duì)片段導(dǎo)航提供了視覺(jué)過(guò)渡效果。
• 模塊腳本的子資源：支持模塊腳本的子資源完整性，為外部托管的模塊腳本提供了內(nèi)容完整性的加密保證，增強(qiáng)了安全性。
• bytes() 方法：為 Request、Response、Blob 和 PushMessageData 對(duì)象添加了 bytes() 方法，允許開(kāi)發(fā)者直接訪問(wèn)底層字節(jié)數(shù)據(jù)，而無(wú)需使用 arrayBuffer() 并將結(jié)果包裝在 Uint8Array 中。
• 文本片段的特性檢測(cè)：通過(guò) document.fragmentDirective 提供了對(duì)文本片段特性的檢測(cè)支持。雖然返回的 FragmentDirective 對(duì)象本身不提供任何功能，但它對(duì)于檢測(cè)瀏覽器是否支持片段指令很有幫助。

Canvas

• willReadFrequently： 在 getContext() 方法中添加了 willReadFrequently 上下文屬性，用于指示是否計(jì)劃進(jìn)行大量回讀操作。這有助于優(yōu)化在頻繁調(diào)用 getImageData() 時(shí)的性能。
• currentcolor：擴(kuò)展了 2D 畫(huà)布對(duì) currentcolor 的支持，使其可以在 color-mix() 或相對(duì)顏色語(yǔ)法中使用。在這些上下文中，currentcolor 將默認(rèn)為 canvas 元素上的計(jì)算顏色屬性值。

WebGL

增加了對(duì)以下 WebGL 擴(kuò)展的支持：

• EXT_texture_mirror_clamp_to_edge
• WEBGL_render_shared_exponent
• WEBGL_stencil_texturing
• EXT_render_snorm
• OES_sample_variables
• OES_shader_multisample_interpolation

Web Inspector 更新

• 在 Web Inspector 的 CSS 源編輯器中增加了模糊搜索代碼補(bǔ)全的支持，提高了開(kāi)發(fā)者的調(diào)試效率。

WKWebView

• WebKit 在 iOS 18 beta、iPadOS 18 beta、visionOS 2 beta 和 macOS Sequoia beta 中添加了對(duì)兩個(gè)新 API 的支持—— Writing Tools API 和用于控制自適應(yīng)圖像符號(hào)插入的 API。

Apple Pay

• WebKit for Safari 18 beta 增加了對(duì) Apple Pay 資金轉(zhuǎn)賬的支持。

參考：https://webkit.org/blog/15443/news-from-wwdc24-webkit-in-safari-18-beta