前端前線 2026 年 5 月 2 日

2026-05-02 — Safari TP 242 IndexedDB getAllRecords、Progressive Web Components、Mozilla 反對 Prompt API

Safari Technology Preview 242:…

Safari Technology Preview 242:IndexedDB getAllRecords、CSS attr() Level 5、dialog closedby 屬性

WebKit Blog · 2026-04-23

Safari Technology Preview 242 於 2026 年 4 月 23 日釋出,適用於 macOS Tahoe 與 macOS Sequoia。本次更新跨越 CSS、HTML、Web API 及網路層,帶來多項規範層面的新實作。

CSS:attr() 函式升級至 Level 5

WebKit 實作了 CSS Values Level 5 所定義的 attr() 函式完整語法。舊版 CSS2.1 的 attr() 只能回傳字串型別,Level 5 則允許指定型別——例如 attr(data-width type(<length>))——使屬性值直接套用為 CSS 長度、顏色、整數等型別,不再需要自訂屬性搭配 var() 的迂迴寫法。此外本次更新加入 CSS Fonts Level 4 的 font-synthesis-style: oblique-only 值,讓開發者可控制合成斜體的行為範圍。

HTML:dialog 元素新增 closedby 屬性

HTML 規範新草案定義了 <dialog closedby="any|closerequest|none"> 屬性,允許作者宣告對話框可被哪種使用者操作關閉:any 代表點擊對話框外部或按 Escape 鍵皆可關閉;closerequest 僅限 Escape 鍵;none 則完全由程式碼控制。Safari TP 242 實作了此屬性,並在 dialog 的 ARIA role 下正確觸發 close 事件。

Web API:IndexedDB getAllRecords 與 IDBGetAllOptions

IndexedDB 規範新增 IDBObjectStore.getAllRecords(query)IDBIndex.getAllRecords(query) 方法,搭配 IDBGetAllOptions 字典物件(含 querycountdirection 欄位),可在單次操作中同時取得鍵與值,取代原本需要開啟 cursor 逐筆讀取的寫法,在大量資料讀取場景可顯著減少往返次數。

WebRTC 更新

本版加入 RTCRtpReceiver.jitterBufferTarget,允許應用程式提示瀏覽器目標抖動緩衝延遲(毫秒),在低延遲與穩定性之間調節。RTC 統計數據中新增 video source 的 widthheight 欄位,對視訊編碼品質監控有幫助。

SVG 與網路層

SVG 元素現在正確支援 langxml:lang 屬性,影響字體選擇與文字渲染。網路層方面,loopback 主機(localhost127.x.x.x)的 Cookie 現在強制套用 Secure 旗標,與 Chromium 的同類變更一致。

原始來源:WebKit Blog — Safari TP 242 Release Notes


Progressive Web Components:零 JavaScript 優先的 Custom Element 設計模式

Ariel Salminen · 2026-03-25

Ariel Salminen 發表了 Progressive Web Components 概念,提出以「HTML/CSS 優先渲染、JavaScript 漸進增強」為核心的 Custom Element 架構,並配套釋出 Elena 函式庫(壓縮後 2.6 kB)。

三種元件類型

Composite Components 包裝既有 HTML,將內容保留在 Light DOM;頁面初始 HTML 渲染完成後,元件的 JavaScript 才接管行為層。Primitive Components 是自給自足的原始元素,自行生成 HTML 並在 Light DOM 中注入 CSS,不依賴 Shadow DOM 的封裝。Declarative Components 則混用 Declarative Shadow DOM,以 <template shadowrootmode="open"> 在伺服器端預先輸出 Shadow DOM,瀏覽器直接解析而無需等待 JavaScript 定義元件。

Elena 函式庫的技術取捨

Elena 以瀏覽器原生 customElements.define() 為基礎,透過 lifecycle callback(connectedCallbackattributeChangedCallback)管理狀態,避免引入虛擬 DOM。函式庫解決的痛點包括:首次渲染的佈局位移(CLS)、伺服器端渲染支援不足、以及跨框架設計系統的 JavaScript 耦合問題。與 Lit 或 Stencil 相比,Elena 不提供響應式狀態管理;開發者需自行整合 Signals(TC39 Stage 2.7)或其他狀態原語。適用場景以伺服器渲染為主、行為增強為輔的網站,而非 SPA 應用。

原始來源:Ariel Salminen — Progressive Web Components


Mozilla 正式反對 Chrome Prompt API:隱私、指紋識別與跨瀏覽器標準化疑慮

Mozilla Standards Positions · 2026-04-30

Mozilla 在其 standards-positions 倉庫中,對 Chrome Prompt API(即 window.ai / LanguageModel API)標記為 position: negative,表明 Firefox 不打算實作此提案。Chrome 148 已在 Origin Trial 中提供此功能,讓網頁 JavaScript 能直接呼叫瀏覽器內建的本機語言模型。

技術疑慮

Prompt API 目前以 Chrome 自身的 Gemini Nano 模型為實作基礎,API 的行為(包括輸出格式、安全過濾、token 計算方式)高度依賴具體模型實作,難以在跨瀏覽器、跨模型情境下保證一致性。Mozilla 認為,將推論行為暴露為瀏覽器 API 會製造碎片化的 Web 平台:同樣的 prompt() 呼叫在不同瀏覽器可能產生截然不同的結果,破壞 Web 的互通性承諾。

隱私與安全架構

本機推論雖可避免資料傳送至外部伺服器,但 Mozilla 指出模型本身可作為指紋識別向量:不同版本的 Gemini Nano 在相同輸入下的輸出差異可用於識別瀏覽器版本。此外,惡意頁面可利用推論回應作為旁路攻擊的信號來源。

標準化路徑

Mozilla 建議透過 W3C Web Machine Learning Working Group(WebML WG)進行更廣泛的利益相關者討論,而非由單一瀏覽器廠商先實作、後補充標準。相關討論正在 webmachinelearning/prompt-api GitHub 儲存庫進行。WebKit 亦尚未公開表態支持,目前此 API 的生態支持主要來自 Chrome/Blink。

原始來源:Mozilla Standards Positions GitHub Issue #1213


End of article
0
Would love your thoughts, please comment.x
()
x