Safari Technology Preview 246：CSS 色彩擴充、FileSystemHandle 入 IndexedDB，以及 SVG 修正
WebKit Blog · 2026-06-17
Apple 於 2026 年 6 月 17 日發布 Safari Technology Preview 246，涵蓋 macOS Golden Gate 與 macOS Tahoe，對應 WebKit 提交區間 313555@main…315033@main。本次釋出集中在 CSS 色彩函式擴充、Web API 新增，以及長期存在的 SVG 與 Canvas 行為修正。
核心改動：CSS 色彩與字型
light-dark() 函式新增對 <image> 值的支援，開發者可依作業系統的亮色或暗色模式自動切換圖片來源，不再侷限於純色值。同一脈絡下，image(<color>) 語法也在 <image> 值型別中正式啟用，允許以任意色彩值產生實心色塊圖像，作為 CSS 背景或 mask 的來源。
color-mix() 獲得一項語義擴充：原本只支援兩個顏色引數，本次預覽版開始允許混合兩個以上的色彩，對應 CSS Color Level 5 草案。此外，alpha() 相對色彩函式也同步落地，可在不拆解原色的情況下直接調整透明度，例如 alpha(var(--brand) 50%)。
字型方面，font-variant-emoji 屬性現已啟用，可控制 emoji 以文字或圖形形式呈現；word-break: auto-phrase 亦同步開放，供日文等語言依語意邊界斷行，而非單純依字元位置。
規格細節：Web API 新增
本次預覽版新增 FileSystemHandle 物件可儲存至 IndexedDB，讓 Web 應用程式得以持久化使用者授權的檔案系統控制代碼，下次開啟頁面時無需重新請求授權。此功能對離線優先應用（如文字編輯器、程式碼工具）具有明顯實用價值。
HTTP 回應標頭 Origin-Agent-Cluster 獲得支援，允許瀏覽器將特定來源隔離至獨立的代理程式叢集，強化記憶體隔離並降低側通道攻擊面。SVG <a> 元素現在也可作為 Origin.from() 的引數，完善跨 SVG 場景的來源解析邏輯。
Popover 關閉監聽器整合（Popover Close Watcher integration）讓 popover 的關閉行為可攔截並與瀏覽器的導覽歷史機制協作，改善單頁應用中返回按鈕與 popover 生命週期的互動。
影響範圍
SVG 修正部分，<use> 元素不再強制要求 fragment identifier，可直接引用完整 SVG 文件；vector-effect 屬性與 <animateMotion> 的 rotate 屬性均獲修正。Canvas 方面，CanvasPath.roundRect() 的 radii 引數改為選擇性，使呼叫更為簡潔。
CSS 修正涵蓋 flex 布局中 aspect-ratio 的錯誤計算、text-decoration-thickness 在繼承鏈中的異常傳播，以及 CSS Container Style Queries 在 display: contents 元素上的行為。CSS Anchor Positioning 的非預期 viewport 錨點問題也在本次更新中修正，對使用錨定浮層的 UI 元件有直接影響。
color-mix()支援兩個以上顏色引數（CSS Color Level 5）light-dark()接受<image>值型別alpha()相對色彩函式font-variant-emoji屬性啟用word-break: auto-phrase啟用FileSystemHandle可存入 IndexedDBOrigin-Agent-ClusterHTTP 標頭支援- Popover close watcher 整合
原始來源：WebKit Blog — Release Notes for Safari Technology Preview 246
Chrome 150 Beta：IndexedDB 改用 SQLite 後端、WebGPU Immediates，以及全面擴充的 CSS 工具
Chrome Developer Blog · 2026-06-03
Google 於 2026 年 6 月 3 日發布 Chrome 150 Beta，帶來 IndexedDB 儲存層架構替換、WebGPU 著色器資料傳遞機制、以及超過十五項 CSS 新特性。本次 Beta 版同時推出 Email Verification Protocol（EVP）Origin Trial，為帳號驗證流程提供替代方案。
核心改動：IndexedDB SQLite 後端
IndexedDB 的底層儲存引擎從 LevelDB 與平面檔案的混合架構改寫為 SQLite，適用於新建立的資料存放區（data store）。現有資料存放區不受影響，瀏覽器將在使用者的 Profile 生命週期中逐步遷移。SQLite 後端提供更一致的事務語意，並透過單一檔案簡化瀏覽器內部的資源管理。
同屬 Web API 領域，data: URL 的 Worker 現在獲得不透明來源（opaque origin），符合 HTML 規範要求，避免這類 Worker 共享主頁面的來源上下文；MediaStreamTrackProcessor 新增 discardedFrames 與 totalFrames 屬性，使媒體管線的幀率監控更為精確。
規格細節：WebGPU Immediates 與 CSS 擴充
WebGPU 新增 Immediate 位址空間，透過 setImmediateData() 方法在渲染通道（render pass）、計算通道（compute pass）及渲染束（render bundle）編碼器上直接傳遞少量頻繁更新的資料至著色器，無需建立 GPU buffer 物件或 bind group。此機制對每次繪製呼叫都需要更新參數（如物件索引、材質索引、變換矩陣）的場景具有明顯效能改善。
CSS 方面的新增項目量大而涵蓋面廣。text-fit 屬性可自動縮放文字節點的字型大小以完全填滿容器寬度，適用於標題排版等需動態適配的場景。zoom 屬性從此支援 CSS 過渡（transition）與動畫，補足了長期以來的規格缺口。flex-wrap: balance 仿照 text-wrap: balance 的概念，在多行 flex 容器中均勻分配各行內容量。
/* CSS URL request modifiers - Chrome 150 新增 */
background-image: url("image.png" cross-origin() integrity("sha256-abc123"));
/* polygon() 圓角參數 */
clip-path: polygon(round 8px, 0 0, 100% 0, 100% 100%, 0 100%);
/* animatable zoom */
.card {
zoom: 1;
transition: zoom 0.3s ease;
}
.card:hover {
zoom: 1.05;
}
CSS URL request modifiers 引入 cross-origin()、integrity()、referrer-policy() 等修飾子，允許在 url() 函式內直接宣告資源的跨域模式與完整性雜湊值，無需依賴 JavaScript fetch 層。
影響範圍
媒體元素偽類別 :playing、:paused、:seeking、:buffering、:stalled、:muted、:volume-locked 全部落地，讓開發者得以純 CSS 響應媒體播放狀態，無需 JavaScript 事件監聽。focusgroup 屬性宣告式地為複合元件提供方向鍵導覽，簡化無障礙鍵盤互動的實作。
程式化捲動（scrollTo()、scrollBy()）現在回傳 Promise，可等待捲動完成或被中斷，消弭了過去必須監聽 scrollend 事件才能得知捲動結束的不確定性。popover=hint 的堆疊模型簡化後，hint popover 不再關閉無關的 auto popover，減少意外的 UI 交互影響。
- IndexedDB SQLite 後端（新資料存放區）
- WebGPU
setImmediateData()Immediate 位址空間 text-fit屬性- CSS
zoom動畫支援 flex-wrap: balance- CSS URL request modifiers（
cross-origin()、integrity()、referrer-policy()） - 媒體元素偽類別（
:playing、:paused、:seeking等） focusgroup屬性- 程式化捲動 Promise
data:URL Worker 取得不透明來源- Email Verification Protocol（EVP）Origin Trial
Firefox 151 支援 Web Serial API：瀏覽器直連微控制器的技術細節
Mozilla Hacks · 2026-05-21
Mozilla 於 Firefox 151 桌面版正式啟用 Web Serial API，允許網頁透過 JavaScript 直接讀寫序列埠裝置，無需安裝原生應用程式。此 API 由 WICG 孵化，Chrome 自 89 版起已支援，Firefox 的加入使其在主要桌面瀏覽器中的覆蓋率大幅提升。
核心改動：API 結構與連線流程
Web Serial API 的進入點為 navigator.serial（或 Web Worker 中的 WorkerNavigator.serial），提供兩個主要方法：
Serial.requestPort(options?)：在使用者手勢觸發下顯示裝置選擇對話框，可透過usbVendorId/usbProductId或藍牙服務 UUID 篩選裝置Serial.getPorts()：取得站台已獲授權且仍連接的連接埠列表，不需使用者互動
取得 SerialPort 物件後，需呼叫 SerialPort.open(options) 建立連線。SerialOptions 字典的必填欄位為 baudRate，其餘為選填：
const port = await navigator.serial.requestPort();
await port.open({
baudRate: 115200, // 必填
dataBits: 8, // 預設 8，可為 7
stopBits: 1, // 預設 1，可為 2
parity: "none", // "none" | "even" | "odd"
bufferSize: 255, // 預設 255 bytes
flowControl: "none" // "none" | "hardware"（RTS/CTS）
});
連線開啟後，資料傳輸透過 Streams API 進行：port.readable 回傳 ReadableStream，port.writable 回傳 WritableStream，允許以背壓（backpressure）感知的串流管線處理大量資料。硬體訊號控制（DTR、RTS、break、DCD、CTS、RI、DSR）則透過 setSignals() 與 getSignals() 管理，滿足嵌入式韌體的握手需求。
受影響版本
Firefox 151 桌面版（Windows、macOS、Linux）為首個支援版本。Firefox for Android 不包含在此次釋出中，行動平台的支援計劃尚未公布。企業部署下，Web Serial 預設停用，需透過 DefaultSerialGuardSetting 政策設定開放。
| 瀏覽器 | 版本 | 平台 |
|---|---|---|
| Chrome | 89+ | 桌面 |
| Edge | 89+ | 桌面 |
| Firefox | 151+ | 桌面 |
| Safari | 不支援 | — |
修補與緩解：安全模型
安全脈絡（Secure Context）為必要條件，Web Serial API 僅在 HTTPS 或 localhost 下可用。每次連線均需明確的使用者手勢觸發 requestPort()，瀏覽器不暴露裝置枚舉能力，防止以裝置特徵進行指紋追蹤。站台可透過 HTTP 回應標頭 Permissions-Policy: serial=() 明確禁用此 API。
規範層面，Web Serial 目前仍在 WICG 孵化階段，Mozilla 已向 WHATWG 提交 標準化提案 PR #264，嘗試建立新的工作串流（workstream）進行正式標準化。中央管轄的藍牙服務 UUID 與 USB 廠商/產品 ID 黑名單機制亦列入規範，供瀏覽器廠商阻止特定高風險裝置的存取。
此 API 支援的硬體類型涵蓋 USB CDC-ACM 裝置、藍牙 SPP 模擬序列埠，以及系統直連序列埠，常見範例包括 ESP32、Raspberry Pi Pico、3D 印表機、LEGO 裝置與 CircuitPython 相容開發板。與 WebUSB API（原始 USB 存取）及 WebHID API（HID 輸入裝置）在使用場景上有所區隔，適合需要標準串列通訊協定的韌體互動場景。
原始來源：Mozilla Hacks — Announcing Web Serial Support in Firefox · WICG Web Serial API Specification · MDN Web Serial API