Chrome 149 Beta：CSS gap 裝飾、path-length 屬性與 shape-outside 新形狀支援
Chrome for Developers · 2026-05-06
Google 於 2026 年 5 月 6 日發布 Chrome 149 Beta，帶來多項 CSS 新功能、Web API 改進與 Origin Trial，聚焦在浮動排版、動畫控制與安全性邊界。
CSS 新功能
CSS gap decorations 正式登場，允許在 grid 與 flexbox 的間距（gap）上套用視覺樣式，語法概念類似 column-rule，讓開發者不再需要靠假邊框或背景色模擬間距線。
shape-outside 新增對 path()、shape()、rect()、xywh() 四種函數的支援，浮動文繞圖可使用與 clip-path 相同的幾何語法，與 Firefox 及 Safari 達成跨瀏覽器對齊。SVG 展示屬性 pathLength 現在可透過新 CSS 屬性 path-length 控制，使 transition、動畫與 cascade 均可作用於路徑長度。
UA stylesheet 舊規則 table { border-color: gray } 被移除，解決長期與 HTML 規格不符的問題。image-rendering: crisp-edges 新增，確保像素圖縮放時保留邊緣對比而非模糊。
Web API 變動
程式化捲動回傳 Promise：scrollTo()、scrollBy()、scrollIntoView() 現在回傳 Promise，在平滑捲動結束後 resolve，解決此前必須靠 IntersectionObserver 判斷捲動完成的問題。
Intl.Locale.prototype.variants 新增對語言變體（variant subtag）的存取，實作 TC39 ECMA-402 最新修訂。bfcache 整合改善：Active WebSocket 連線不再阻止頁面進入 back/forward cache，大幅改善多頁應用導覽效能。Service Worker 的 FetchEvent 新增 Request.isReloadNavigation 布林屬性，方便判斷觸發事件是否為使用者主動重新載入。
Origin Trials
- Permissions Policy：
focus-without-user-activation：控制 embedded iframe 是否可在無使用者手勢情況下發起element.focus()，防範 focus 劫持。 - Gamepad event-driven input API：新增
rawgamepadinputchange事件，以事件驅動取代輪詢navigator.getGamepads()，降低遊戲控制器輸入延遲。 - WebAssembly custom descriptors：讓 Wasm 物件可綁定 JS prototype，並透過 imported builtin 函數宣告式安裝方法，縮小 Wasm 與 JS 物件模型語義差距。
Chrome DevTools 148：無障礙樹預設啟用、廣告標記溯源與 Speculation Rules 除錯強化
Chrome for Developers · 2026-05-05
Chrome 148 DevTools 將無障礙樹（Accessibility Tree）從實驗性功能升格為預設介面，並在廣告標記溯源與 Speculation Rules 除錯上提供更深的可見性。
全頁無障礙樹預設啟用
舊有麵包屑式（breadcrumb）無障礙樹檢視已移除，全頁無障礙樹成為 Elements 面板 Accessibility 側欄的預設模式。開發者現在可以在 DOM 樹與無障礙樹之間自由切換，方便同步比對語義角色與 DOM 結構是否一致，大幅改善螢幕閱讀器相容性除錯工作流程。
廣告溯源 tooltip
滑過 Elements 面板中被標記為廣告的元素，工具提示顯示兩類資訊：腳本祖先鏈（script ancestry）顯示哪個腳本建立了此元素；過濾器清單規則（filter list rule）指出哪條廣告攔截規則命中。此功能對除錯誤判（false positive）場景特別有用，讓開發者能快速定位並修正不必要的廣告標記。
Speculation Rules 除錯
Speculative loads 區塊新增文字篩選（url:、status: 等 key 篩選器）、HTTP 狀態碼欄位（顯示 404/503 等失敗碼），以及 form_submission 觸發器的明確標示，讓預載（preloading）管線的除錯從黑盒變透明。
- Network 面板新增可選欄位「Request #」，按請求發起順序排列，方便追蹤並行請求。
- 推薦節流預設值根據 CrUX 現場資料高亮顯示建議設定。
- Styles 面板正確顯示 name-only
@container查詢。
Safari Technology Preview 243：ES 模組載入器重寫、宣告式 Shadow DOM 新屬性與 WebGPU clip_distances
WebKit Blog · 2026-05-09
WebKit 團隊在 Safari Technology Preview 243 重寫了 ES 模組載入器以修正 top-level await 問題，同時新增宣告式 Shadow DOM 屬性與 WebGPU WGSL clip_distances builtin。
JavaScript 模組載入器重寫
Top-level await 正確性修正是此版本最重大的改動——Safari 以重寫整個 ES 模組載入器為代價，修復了多個 top-level await 邏輯錯誤，這些錯誤在複雜的模組依賴圖（module graph）中可能導致執行順序不確定。相關修正包括：Unicode 模式下 regex backreference 計數錯誤、import { "*" as x } 被錯誤視為 named import，以及 Object.defineProperties Proxy trap 呼叫順序問題。
HTML：Shadow DOM 新屬性
宣告式 Shadow Root 新增 shadowrootslotassignment 屬性，允許在 HTML 標記層指定 slot 指派模式（named 或 manual），不再需要 JavaScript 才能控制此行為。同時 <img sizes="auto"> 解析與規格對齊，MathML 元素的 href 屬性除 <a> 外全面廢棄。
CSS 定位與動畫修正
Flex layout 修正了 definiteness 評估使用不正確 flex-basis 值的問題，clip-path: inset() 的 border-radius 渲染錯誤修復，:has() 兄弟選擇器失效（invalidation）問題與 anchor positioning 的 position-area 也一併修正。CSS 動畫對 !important 宣告的處理現在符合規格，identity matrix decompose 修正了 transform 動畫的計算錯誤。
WebGPU
WGSL 著色器語言新增 clip_distances builtin 支援，讓頂點著色器可輸出自訂裁切距離（clip distance），適用於需要使用者定義裁切平面的 3D 渲染場景。Web Inspector 新增 Subgrid 與 Grid-Lanes 徽章（badge）於 Elements 頁籤，改善格線布局除錯體驗。
原始來源：Release Notes for Safari Technology Preview 243 (WebKit Blog)