Safari Technology Preview 244：anchor 定位增強、SharedWorker 巢狀 DedicatedWorker、TypedArray SIMD 加速
WebKit Blog · 2026-05-28
Safari Technology Preview 244 於 2026 年 5 月 21 日發布，支援 macOS Tahoe 與 macOS Sequoia，修正超過 80 項問題，涵蓋 CSS Anchor Positioning 規格對齊、MathML 存取性改進、Web API 規格缺口補齊，以及效能優化。
CSS Anchor Positioning 更新
position-anchor 屬性新增 normal 與 none 值，更接近 CSS Anchor Positioning 規格草案的完整語意。anchor-valid 與 anchor-visible 作為 position-visibility 的別名加入，讓開發者可依錨點可視狀態切換定位行為。transform-aware anchor positioning 支援在 CSS transform 影響的錨點元素上正確計算位置。
Web API 規格對齊
SharedWorker 現允許在內部建立 DedicatedWorker，與 HTML Standard 對齊。多個頁面共用的 SharedWorker 可再分派子任務至 DedicatedWorker，簡化需要共享計算基礎設施的複雜應用架構。MathML 元素補齊 tabindex、focus()、blur()、autofocus 屬性支援，改善數學公式的鍵盤導航與存取性。MathML 多字元運算子的排版問題也在本版本修正。
AnimationEvent 新屬性與 Web Extensions 手勢傳遞
AnimationEvent 與 TransitionEvent 新增 animation 屬性，讓事件處理程式可直接取得觸發事件的 Animation 物件，省去手動維護動畫參考的需求。Web Extensions 方面，使用者手勢現可透過 sendMessage()、connect()、postMessage()、executeScript() 傳遞，解決跨 context 手勢遺失導致無法呼叫手勢敏感 API 的問題。
效能與正確性修正
- TypedArray 反向搜尋（
findLast、findLastIndex）啟用 SIMD 加速 - 模組命名空間在多 export statement 情況下的建構邏輯修正
- Worker parse error 現正確回報至主執行緒
- IndexedDB 升級中止時的版本號處理修正
:has()選擇器在動態 DOM 變更時的失效邏輯修正- flex 項目 aspect-ratio 計算與絕對定位 table 版面修正
- SVG SMIL
repeat()、stroke-dasharray 插值、glyph orientation vertical text 修正
原始來源：WebKit Blog — Safari Technology Preview 244 Release Notes
Chrome 內建 AI API：Prompt、Summarizer、Writer、Rewriter、Translator 五組介面的 On-Device 架構
Chrome for Developers (Google I/O 2026) · 2026-05-26
Google I/O 2026 期間，Chrome 團隊完整展示五組瀏覽器端 AI API，全以 on-device 模型執行，資料不送往雲端。本文整理各 API 的技術規格與部署架構。
Prompt API
Prompt API 支援 JSON Schema 指定輸出格式，讓回應可直接反序列化為應用程式所需的資料結構，省去輸出解析層。API 同時支援多模態輸入——傳入圖片像素，模型可自動產生 alt-text 或圖片描述，無需額外的視覺 API 呼叫。
Summarizer、Writer、Rewriter API
Summarizer API 接受 type（如 'headline'）與 sharedContext 參數，提供 summarizeStreaming() 串流方法，適合長文即時顯示摘要進度。Writer API 將條列要點擴展為完整段落；Rewriter API 接受語氣指令（如「更輕鬆」、「更短」）原地改寫文字，適合 CMS 與文字編輯器整合。
Translator API
Translator API 在裝置端完成翻譯，不依賴 Cloud Translation API，適合處理使用者即時輸入的轉換需求。展示案例包含英文草稿即時翻譯為西班牙文與日文。
部署架構與 Fallback
所有 API 共享同一組 on-device 模型，利用裝置 GPU 加速推論。針對尚未支援的裝置（主要為行動裝置），Firebase AI Logic 提供雲端 fallback 路由，讓相同程式碼在不同裝置上自動切換。TypeScript 型別定義透過 @types/dom-chromium-ai npm 套件取得。
原始來源：Chrome for Developers — Build new features using built-in AI in Chrome (I/O 2026)
CSS 動畫與 JavaScript 動畫的技術選擇：合成執行緒、WAAPI 與效能分界線
Josh W Comeau · 2026-05-27
CSS 動畫與 JavaScript 動畫的邊界在現代瀏覽器中已不如過去清晰。Web Animations API（WAAPI） 讓 JavaScript 可驅動與 CSS 相同的底層合成引擎，而 CSS 的某些屬性仍需主執行緒運算，不保證流暢度。本文整理兩者的效能分界與適用場景。
合成執行緒的條件
只有 transform 與 opacity 能保證完全在合成執行緒（compositor thread）執行，不阻塞主執行緒的 JavaScript 工作。filter 在部分瀏覽器可合成，clip-path 與 background-color 通常觸發 repaint，不論用 CSS 或 JS 驅動均在主執行緒處理。使用 DevTools 的 Rendering 面板可直接觀察各屬性的合成情況。
WAAPI 的優勢
WAAPI 透過 element.animate() 提供 Promise-based 介面（animation.finished），解決純 CSS 動畫難以在完成後觸發後續邏輯的問題。WAAPI 動畫同樣能進入合成執行緒（對支援合成的屬性），兼顧效能與 JavaScript 控制能力。
選擇準則
- 靜態、無狀態動畫（hover effect、入場動畫）：純 CSS，程式碼最少
- 需要 JavaScript 協調或動態值：WAAPI，保留合成執行緒優勢
- 複雜時間軸、物理模擬：Motion / GSAP 等函式庫，底層會優先使用 WAAPI
- 觸控手勢驅動動畫：Scroll-Linked Animations API（
@scroll-timeline）