2026-06-16 — 可客製化 select 黃金法則、Vue 3.5.38 與 3.6.0-beta.15 同日發布、CSS Grid Lanes 野外指南上線

可客製化 <select> 的黃金法則：Safari 27 正式帶來表單元素新時代

WebKit Blog · 2026-06-15

WebKit 工程師 Saron Yitbarek 與 Tim Nguyen 於 2026 年 6 月 15 日發表文章，說明即將隨 Safari 27 正式推出的可客製化 <select> 元素應遵守的核心原則。這項功能讓開發者首次能以純 CSS 完整覆蓋原生下拉選單外觀，而文章聚焦在一條鐵律：永遠為 <option> 元素保留可讀文字內容。

背景

<select> 長期是 HTML 中最難自訂樣式的元素之一。各瀏覽器的原生控件在不同作業系統上外觀迥異，CSS 對其內部幾乎沒有影響力，促使開發者改用 JavaScript 模擬的假下拉選單。可客製化 select 透過新屬性 appearance: base-select 啟用，讓瀏覽器退出原生繪製模式，將控制權完全移交給 CSS。

目前此功能已在 Safari 26 Technical Preview 可用，預計隨 Safari 27 穩定版正式推出。Chrome 也在先行版本中試驗同一套規格，標準化工作正在 W3C CSS Working Group 進行中。

核心改動

文章提出的「黃金法則」出發點是可及性（accessibility）。當 <option> 內只放圖示、色塊或其他視覺元素，而沒有文字節點時，螢幕閱讀器、點字顯示器與語音控制工具都無從讀取選項內容，在不支援新語法的瀏覽器中更會出現空白下拉清單。推薦的標記模式如下：

<select>
  <option>
    <img src="bird.svg" alt="">
    <span>Wildlife</span>
  </option>
</select>

圖片的 alt 刻意留空，語意由旁邊的 <span> 文字承載。文字本身可透過 CSS 視覺隱藏（clip-path、width: 0 等），但必須留在無障礙樹（accessibility tree）中。

規格細節

啟用客製化模式的正確做法是在 @supports 區塊內撰寫樣式，確保舊瀏覽器仍得到原生控件：

@supports (appearance: base-select) {
  select {
    appearance: base-select;
    /* 自訂按鈕、下拉面板、選項的樣式 */
  }
}

可客製化 select 暴露了幾個新的偽元素，包括 ::picker(select)（下拉面板）與 ::checkmark（已選中標記），讓開發者精確控制每個視覺層。這套方案採「漸進增強」思路——支援的瀏覽器呈現精美樣式，不支援的瀏覽器回退至功能完整的原生控件。

影響範圍

黃金法則的三項效益如下：

• 更好的使用者體驗：文字標籤讓選項在圖示旁依然清晰可辨，不仰賴視覺辨識圖案
• 更好的無障礙：螢幕閱讀器與語音輸入工具需要可存取文字，單靠圖片 alt 不足以應對所有輔助技術
• 更好的漸進增強：CSS 載入失敗或瀏覽器不支援時，原生 <select> 仍完整運作，不出現空白清單

這項規則對現有 UI 套件的影響不容忽視。許多元件庫的 Select 已習慣以圖示加 aria-label 取代文字，在切換至原生 <option> 時需重新審視標記結構。WebKit 團隊建議在遷移期間，無論圖示是否存在，始終在 <option> 內保留可見或視覺隱藏的文字，以確保任何瀏覽器條件下都能正常使用。

原始來源：WebKit Blog — The golden rule of Customizable Select

Vue 3.5.38 穩定版與 3.6.0-beta.15 同日發布，Vapor Mode 持續收斂

github.com/vuejs/core · 2026-06-11

2026 年 6 月 11 日，Vue.js 在同一天釋出了穩定版 v3.5.38 與 Vapor Mode 預覽版 v3.6.0-beta.15。穩定版延續 3.5.x 系列的例行修補節奏，beta 版以大量 Vapor 渲染器的 bug 修復與對齊 VDOM 行為為主軸，整體顯示 3.6.0 的穩定化工作已進入衝刺階段。

背景

Vue 3.6.0 的核心賣點是 Vapor Mode——一套繞過虛擬 DOM、直接操作真實 DOM 的編譯策略，靈感來自 Solid.js 的細粒度響應式架構。Vapor Mode 於 2025 年 12 月進入 beta（v3.6.0-beta.1），並宣告與 VDOM 模式達成功能對等。此後每個 beta 版本都在修復邊緣案例，讓 Vapor 與 VDOM 的行為差異縮小到可接受的範圍。同期，響應式系統底層依據 alien-signals 進行了全面重構，提升追蹤效率與記憶體使用。

穩定版 v3.5.38 本身的 CHANGELOG 條目為空，是配合 beta 同步發布的版本戳記（version bump），實質修復集中在此前的 v3.5.36，同日補齊進穩定分支。

核心改動：v3.5.36 穩定版修補

v3.5.36（同樣發布於 2026-06-11）包含跨多個套件的修復，按模組分組如下：

• compiler-core：修復文件根節點遇到 CDATA 時的崩潰問題（#14916）；修正 v-memo 元素上動態 key 的前綴處理（#14922）
• compiler-sfc：在 props 解構中尊重 var 變數提升（hoisting）；修復前置交集／聯合型別上 // vue-ignore 的解析（#14950）
• reactivity：保留 once: true 包裝後的 watch 回呼回傳值（#14902）；修正空來源列表觸發 immediate 回呼的問題（#14914）
• runtime-core：修正 model 在同步前被還原時未強制更新的問題（#14897）；unmount 後略過非同步元件的回呼（#14911）
• transition：避免 v-show group 中隱藏子元素觸發移動過渡（#14895）

核心改動：v3.6.0-beta.15 Vapor 對齊

本次 beta 的唯一新功能是 compiler-vapor 支援停用事件委派（event delegation）（#14924，commit 3d6f02f）。Vapor Mode 預設使用全域事件委派以減少監聽器數量，但在 Shadow DOM 或某些嵌入情境下行為不符預期；新選項允許開發者在需要時關閉此機制。

bug 修復集中在 runtime-vapor，修復項目幾乎都是「對齊 VDOM 行為」：

• 修正 Teleport 在 disabled 狀態下子節點排序的保留（commit 741be6e）
• 對齊 v-show appear 時序與 TransitionGroup key 繼承邏輯（bfab54f、954b045）
• 修正 keyed 直接模板 ref 清除舊值的問題（commit 368f33d）
• 防止跨 interop 邊界存取 vnode 時出現空指針（commit 1997b68）

效能方面，Teleport 的 raw props proxy 改為重複使用（commit bd08cdb），避免每次 render 重新分配；app-only bundle 中移除不必要的 fragment class 保留（commit fbeec00）。

影響範圍

對於維持在 3.5.x 穩定線的專案，本批修復主要針對使用 v-memo 搭配動態 key、以及 TypeScript props 型別解析的邊緣案例，升級無破壞性變更。使用 v3.6.0-beta 的開發者需留意 Vapor 元件中 Teleport 的行為已進一步對齊 VDOM，依賴舊行為的測試可能需要更新。Vapor Mode 正式穩定版在 3.6.0 GA 後才建議用於生產環境，目前的 beta 階段適合在效能敏感的子頁面或全新小型專案中試驗。

原始來源：vuejs/core — v3.5.38 · vuejs/core — v3.6.0-beta.15 · minor 分支 CHANGELOG

CSS Grid Lanes 野外指南上線：互動式文檔帶你掌握瀑布與磚牆排版

WebKit Blog · 2026-06-10

Apple WebKit 團隊成員 Jen Simmons 於 2026 年 6 月 10 日宣布，專為 CSS Grid Lanes 打造的互動式參考文檔「Field Guide」正式上線，網址為 gridlanes.webkit.org。這套文檔針對 Safari 26.4 已落地的 display: grid-lanes 功能，提供從入門到進階的單頁式參考，並附帶六組可即時編輯的互動展示。

背景

CSS Grid Lanes 是一種不同於傳統 CSS Grid 的新版面模式，專門解決「項目高度不一、但希望填滿欄位空白」的排版需求——也就是 Pinterest 或瀑布流圖庫那種效果。過去實現此類版面需要仰賴 JavaScript 計算位置，或使用 CSS columns 的折行行為（但後者無法控制排列方向）。Grid Lanes 在純 CSS 層面提供了這個能力，且在語義上保留 DOM 來源順序不變，Tab 焦點順序亦未被打亂。

Safari 26.4 是目前唯一穩定支援 display: grid-lanes 的瀏覽器；Can I Use 頁面已開始追蹤跨瀏覽器採用狀況，其他瀏覽器的實作時程尚未宣佈。

規格細節

Grid Lanes 有兩種主要排列模式，由使用哪個軸向定義軌道決定：

• 瀑布（Waterfall）：以 grid-template-columns 定義縱向軌道，項目從左至右依序進入各欄，Tab 鍵焦點移動方向為橫向
• 磚牆（Brick）：以 grid-template-rows 定義橫向軌道，項目由上至下填入各列，Tab 鍵焦點移動方向為縱向

關鍵屬性整理如下：

flow-tolerance 是 Grid Lanes 最獨特的屬性，控制排版引擎在尋找空位時能接受的最大空白高度。設為 0 時每個項目嚴格依序放置；值增大時，引擎會跳過較大的空白去尋找更合適的位置，產生更緊湊的磚牆效果，但視覺順序可能偏離 DOM 順序，需搭配 Web Inspector 的 Order Numbers 疊加層來除錯。

互動式指南內容

gridlanes.webkit.org 包含三個核心區塊。第一區是即時操場（playground），可切換瀑布與磚牆模式、拖動 flow-tolerance 滑桿、直接編輯 CSS，並即時預覽效果。第二區是單頁式完整參考，覆蓋所有屬性、有效值與邊緣行為。第三區是六組主題展示：

• Photos（照片牆）、Recipes（食譜卡）、Newspaper（新聞報版）
• Mega Menu（大型選單）、Timeline（時間軸）、Pinboard（釘板）

每組展示都提供多種變體（列數、間距、欄位比例），可即時調整並直接複製生成的 CSS。Safari 的 Web Inspector 新增了 Order Numbers 疊加層，在 DevTools 中視覺化顯示每個格線項目的放置順序，協助找出最佳的 flow-tolerance 設定值。

影響範圍

對於今日就需要多瀏覽器瀑布流的專案，CSS Masonry（即 display: masonry 提案，已在 Firefox Nightly 試驗）是另一條平行路徑，但兩者語法不同，尚未統一標準。WebKit 建議以 @supports (display: grid-lanes) 保護相關樣式，確保不支援的瀏覽器回退至傳統 Grid 或 Flexbox。Field Guide 的漸進增強配套文章亦收錄了具體的 fallback 寫法，協助開發者在跨瀏覽器支援完整前就開始試用。

原始來源：WebKit Blog — Introducing the Field Guide to Grid Lanes · gridlanes.webkit.org · 漸進增強指南