2026-05-17 — Safari 26.5 :open 偽類、CSS random() 語義修訂、Tailwind CSS 架構遷移

Safari 26.5 登場：:open 偽類、element-scoped random() 與 Origin API

WebKit Blog · 2026-05-17

WebKit 團隊在 Safari 26.5 中交付了一批跨越 CSS、SVG 與 Web API 層的新特性，同時修復 63 個已知缺陷。這次發布的重心在於讓開發者在不依賴 JavaScript 的前提下，以統一的語法操控多種元素的開啟／關閉狀態，並強化跨來源通訊的安全性。

:open 偽類

:open 偽類正式落地，統一了 <details>、<dialog>、<select> 與 <input>（關聯 picker 時）的「展開」狀態選取方式。過去只能對前兩者使用 [open] 屬性選擇器，而 <select> 無對應機制；:open 的引入消弭了這個不一致。

select:open {
  border: 1px solid skyblue;
}

random() 的語義修訂

CSS random() 函式的行為調整是本次的重要規格對齊。Safari 26.2 率先引入 random()，26.5 則配合 CSS 工作組修訂：具名隨機值（如 random(--w, 100px, 200px)）預設改為全域共享結果，每個元素拿到同一隨機數；若需要各元素獨立取值，須明確加上 element-scoped 關鍵字。舊有的 element-shared 關鍵字已從規格移除。

/* 全域：所有 .box 拿到相同隨機寬度 */
.box { width: random(--w, 100px, 200px); }

/* 各元素獨立隨機 */
.box { width: random(--s element-scoped, 100px, 200px); }

SVG 與 Web API 新增

SVG 漸層的 color-interpolation 屬性現已支援 linearRGB 色彩空間插值，使高飽和色之間的過渡更加平均，不再出現中段色彩驟變。ToggleEvent.source 屬性讓 toggle 事件直接攜帶觸發元素引用，省去手動追蹤觸發者對應關係的邏輯。

新增的 Origin API 以結構化物件取代字串解析。Origin.from(value) 從字串或內建物件建立 Origin 實例；isSameSite(origin) 直接比對兩者是否同站，正確處理不透明 origin（過去序列化為字串 "null" 的情況），無需仰賴 Public Suffix List 解析邏輯。

const msgOrigin = Origin.from(messageEvent);
const local     = Origin.from("https://social.example");
if (msgOrigin.isSameSite(local)) grantAccess();

影響範圍

Safari Technology Preview 243 同步發布，測試 macOS Tahoe 與 Sequoia 的相容性。:open 現已跨主流瀏覽器可用。random() 的語義變更屬不向後相容的規格修訂，升級前需確認既有 element-shared 用法是否存在於生產代碼。

原始來源：WebKit Blog、Safari Technology Preview 243

放棄 Tailwind 之後：重學原生 CSS 架構組織

Julia Evans Blog · 2026-05-15

Julia Evans 在 2026 年 5 月發表了一篇廣受 Hacker News（382 分）與 Lobsters 討論的文章，描述她從 Tailwind CSS 遷出後重新學習 CSS 架構的過程。文章的核心不是評判 Tailwind 的優劣，而是習慣 utility-first 框架後，重新建立原生 CSS 組織思路的具體過程。

原本的問題

Evans 指出 Tailwind 的核心優勢是「所有樣式就在 HTML 上，不需要切換檔案」，但其代價是 class 清單爆炸，以及難以跨元素複用語意樣式。離開 Tailwind 後她發現最難的不是語法，而是決定「何時抽出 class」這個架構判斷。

採用的方法

她的策略是建立語意化的元件 class（如 .card、.nav-link），並用 CSS 自訂屬性集中管理間距與色彩 token。Utility class 仍然保留，但只保留少數高頻使用的全域輔助類（如 .visually-hidden），不再用 utility 描述所有視覺細節。這讓 HTML 保持可讀性，同時避免語意流失進 class 名稱的抽象層。

影響範圍

這篇文章引發廣泛共鳴，因為它觸及了 utility-first 普及後的隱性代價：許多開發者跳過了學習 CSS 級聯與選擇器組織的環節，導致離開框架後不知如何構造原生 CSS 架構。Evans 的記錄提供了具體的遷移路徑，而非對工具的非此即彼評判。

原始來源：Julia Evans Blog