2026-05-29 — Safari 26.5 :open 偽類、Firefox Web Serial API 登場

Safari 26.5 帶來 :open 偽類、element-scoped random() 與 Origin API

WebKit Blog · 2026-05-27

Apple 於 2026 年 5 月發布 Safari 26.5（對應 iOS 26.5、iPadOS 26.5、macOS Tahoe 26.5），帶來一批 WebKit 平台功能更新。本次重點包含 CSS :open 偽類、random() 函數的 element-scoped 關鍵字調整、SVG 漸層的 color-interpolation 支援，以及新的 Origin API 和 ToggleEvent.source 屬性。

CSS :open 偽類

:open 偽類統一了原本散落在 <details>、<dialog>、<select> 與 <input> 各元素上的開啟狀態選取器，取代原先需要撰寫 [open] 屬性選擇器的做法。對於 <input>，當關聯的選取器（日期、色彩選擇器）彈出時即觸發。

語法範例：

select:open {
  border: 1px solid skyblue;
}
details:open summary {
  font-weight: bold;
}

random() 函數的 element-scoped 關鍵字

CSS random() 函數的具名值行為在本版本調整：具名值預設改為全域結果（所有使用相同名稱的元素共享同一個隨機數），若需要逐元素獨立亂數，改用新的 element-scoped 關鍵字。

/* 全域隨機（新預設） */
width: random(--s, 100px, 200px);

/* 逐元素隨機 */
width: random(--s element-scoped, 100px, 200px);

同時移除了 element-shared 關鍵字，其功能已被新預設行為涵蓋。

SVG color-interpolation 屬性

color-interpolation 屬性現在可套用於 SVG 漸層元素（<linearGradient>、<radialGradient>）。預設仍為 sRGB 色彩空間插值，設定為 linearRGB 可獲得更均勻的感知漸層過渡，對高飽和色彩尤為明顯。

ToggleEvent.source 與 Origin API

ToggleEvent.source 屬性可直接取得觸發彈出層（popover）的元素參考，免去手動在 JavaScript 中維護觸發元素與目標的對應關係。

新增的 Origin API 提供結構化的 Origin 物件，以 Origin.from(value) 從字串或內建物件構建，並透過 isSameSite() 方法進行同站比較——不依賴 Public Suffix List，也正確處理不透明 origin（先前會序列化為 "null" 字串）。

Anchor Positioning 與 Scroll-Driven Animations 修復

本版本對 anchor positioning 進行多項修正：三個以上錨定元素的鏈接解析、viewport 尺寸變化時的媒體查詢重計算、以及 display: contents 現在正確建立 anchor scope。Scroll-Driven Animations 方面，animation-play-state: paused 的動態變更處理以及 back-forward cache 的 timeline 還原均已修正。

原始來源：WebKit Blog — WebKit Features for Safari 26.5

Firefox 151 正式支援 Web Serial API：瀏覽器直連序列裝置

Mozilla Hacks · 2026-05-21

Firefox 151 桌面版帶來 Web Serial API 支援，讓網頁應用程式能夠透過 JavaScript 直接與序列埠裝置通訊，無需安裝原生軟體。這項 API 已在 Chrome 89（2021 年）先行推出，Firefox 的加入意味著主流桌面瀏覽器覆蓋率大幅提升。

API 介面與安全模型

主要入口為 navigator.serial.requestPort()，呼叫後觸發使用者選取序列埠對話框。網頁無法自動枚舉裝置清單，徹底防止裝置指紋識別。每次授權均為**逐站、逐埠**粒度，使用者可在事後撤銷。

// 請求存取序列埠
const port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });

const reader = port.readable.getReader();
const { value } = await reader.read();
console.log(new TextDecoder().decode(value));

企業部署可透過 DefaultSerialGuardSetting 政策停用此功能。

支援裝置與啟用場景

相容裝置涵蓋 Espressif ESP32、Raspberry Pi Pico、3D 列印機、電力監測儀以及 USB 或 Bluetooth 配對的序列裝置。具體應用場景包括：

CircuitPython 韌體安裝（透過 Adafruit 工具）
ESPHome 與 Home Assistant 家庭自動化整合
電力消耗即時監測
STEM 教育互動專案

標準化路徑

Web Serial API 規格目前由 Web Incubator Community Group（WICG）維護，Firefox 的實作同時提案透過 WHATWG 正式標準化。規格要求實作包含「Add-on gating」說明介面，在序列埠選取對話框出現前為使用者提供充分說明。

原始來源：Mozilla Hacks — Announcing Web Serial Support in Firefox

End of article