Chrome 與 Firefox 改成兩週一版的第一個月，Safari 27 同步出貨：可自訂 select、sizes="auto"、progress()、alpha()、revert-rule 一次到位。給品牌官網與電商前台的實用升級清單。
每個做過網站的人都經歷過這段對話。設計師：「這個下拉選單可以照設計稿做嗎？圓角、品牌色、選項裡放小圖示。」工程師沉默三秒，然後開始解釋為什麼原生 <select> 很難改、為什麼要換成一整包 JavaScript 元件、為什麼那個元件在螢幕閱讀器上又有一堆問題。最後大家各退一步，選單長得「差不多」。
2026 年 10 月 2 日，web.dev 的 Rachel Andrew 發布了每月例行的〈New to the web platform in September〉。這一期有點不一樣：這是 Chrome 和 Firefox 改成每兩週發一次穩定版的第一個月，九月內 Chrome 153、154，Firefox 155、156、157，加上 Safari 27 全部進入穩定版。結果就是，一大批功能同時跨過「所有主流瀏覽器都支援」的門檻，成為 Baseline Newly available。
對工作室和品牌客戶來說，這不只是工程師的玩具清單。它意味著有些過去要靠套件、靠 hack、靠「請客戶接受差不多」才能完成的需求，現在可以用更輕、更穩的原生方式做了。
先說最有感的：select 終於可以照設計稿走
Safari 27 加入了可自訂的 <select>，加入 Chrome 的行列。做法是讓 <select> 與它的 ::picker(select) 偽元素選用 appearance: base-select，控制項就會切換成可以自由設計的基礎外觀：按鈕與下拉面板都能自訂樣式，<option> 裡也能放更豐富的 HTML 內容。
這對電商與表單密集的網站很有意義：國家／地區選擇器、尺寸選單、方案選單，以前常常為了「好看」而改用自製元件，連帶犧牲鍵盤操作與無障礙。現在可以保留原生語意，再把外觀交給 CSS。
不過要誠實說：web.dev 的支援表目前列出的是 Chrome、Edge（135 起）與 Safari 27，Firefox 欄位仍是空白，所以它還不是 Baseline。實務做法是「漸進增強」——支援的瀏覽器看到精緻版，不支援的就看到原生選單，功能完全不受影響。這比任何「先放一包 polyfill 再說」的做法都划算。
圖片：sizes="auto" 讓響應式圖片少寫一半的算術
如果你寫過 srcset 搭配 sizes，大概記得那種在斷點之間反覆計算「這張圖在手機佔多少 vw」的痛苦。Safari 27 現在支援在使用 loading="lazy" 的圖片上設定 sizes="auto"（或以 auto 開頭的 sizes 清單），瀏覽器會依圖片實際渲染的版面寬度挑選最適合的來源。加上 Chrome 與 Firefox 原本就支援，sizes="auto" 成為 Baseline Newly available。
對內容型網站、部落格和商品列表頁來說，這是很實在的效能工具：少算錯一次 sizes，就少讓手機下載一張過大的圖片。小提醒：它只適用於延遲載入的圖片，首屏主視覺（通常是 LCP 元素）不建議 lazy-load，那張圖還是要老老實實寫好 sizes。
顏色與尺寸：progress() 和 alpha() 讓設計系統更好維護
progress()：Firefox 155 加入支援後成為 Baseline。它會回傳某個值在起點與終點之間的位置，通常夾在 0 到 1 之間，很適合依視窗或容器尺寸驅動流體字級、透明度或顏色。官方範例是：
.card {
opacity: progress(100vw, 320px, 1200px);
}
過去要達成類似效果，常要在 clamp() 裡做代數。現在意圖寫得更直白，維護的人也比較不會在半年後看著公式懷疑人生。Firefox 155 與 Safari 27 也支援 no-clamp 選項，讓結果可以超出 0 到 1。
alpha()：CSS Color 5 的相對顏色函式，在 Chrome 151、Firefox 155、Safari 27 都支援後成為 Baseline。它拿一個顏色，只調整透明度，保留原本的色彩通道與色彩空間：
.overlay {
background-color: alpha(var(--brand-color) / 50%);
}
這對品牌設計系統很友善：只要維護一個品牌色 token，遮罩、hover、半透明背景都從它衍生，不用再另外維護一排「品牌色 50% 透明版」。
其他值得記下來的 Baseline 新成員
revert-rule關鍵字：讓某個屬性回到「如果目前這條規則不存在」時的值。和revert、revert-layer相比更精準，適合處理元件覆寫。light-dark()支援圖片值：除了顏色，現在也能依淺色／深色模式切換url()圖片或漸層。深色模式的 Logo、背景紋理，不必再寫兩套媒體查詢。overflow-anchor與捲動錨定：Safari 27 啟用後成為 Baseline。上方內容變動（例如廣告或圖片載入）時，瀏覽器會自動調整捲動位置，避免讀者正在看的段落突然跳走。font-width：取代font-stretch成為正式名稱，後者保留為舊別名。ReadableStream非同步迭代與可轉移、AnimationEvent.animation、cookieStore.set()的maxAge選項：對前端工程師是好消息，對串流 AI 回應或處理動畫事件的介面尤其實用。
另外 Safari 27 也加入 Service Worker Static Routing API，可以在安裝時宣告路由規則，讓符合條件的請求直接走網路或快取、不必先喚醒 service worker，有助導覽效能。
兩週一版，代表什麼？
最容易被忽略、卻最影響專案管理的一句話是：Chrome 與 Firefox 現在每兩週發一次穩定版。對維運與 QA 來說，這代表：
- 相容性測試要變成例行公事，而不是改版前才做一次。
- 「等某某瀏覽器支援再說」的等待時間變短了，功能從實驗到普及的節奏更快。
- Beta 版值得看。web.dev 也提到 Chrome 156 beta 帶來 CSS
random()、corner簡寫屬性、多種媒體狀態偽類（如:playing、:paused），Chrome 155 beta 則有margin-trim與 JPEG XL 解碼。這些還不是 Baseline，但值得排進技術雷達。
實際案例：一個電商結帳頁可以怎麼改
想像一個常見的台灣電商結帳頁：縣市與行政區用兩個下拉選單、配送方式用卡片式選項、商品縮圖列在右側、頁面上方還有活動公告列會在載入後才出現。
以前的做法往往是：下拉選單換成第三方元件（多載入一包 JavaScript）、縮圖固定寫好幾組 sizes、公告列出現時整頁往下跳，使用者剛要點的按鈕就這樣溜走。
用九月這批功能重寫，可以變成：縣市與行政區保留原生 <select>，在支援的瀏覽器套上 appearance: base-select 讓它符合品牌風格；延遲載入的推薦商品縮圖改用 sizes="auto"；使用者已往下捲動時，上方公告列插入造成的跳動可由捲動錨定緩解，但公告列本身仍建議預留高度；按鈕 hover 與遮罩顏色全部用 alpha() 從品牌色衍生。結果是更少的套件、更穩的版面，以及在螢幕閱讀器上依然好用的表單。
給品牌與工作室的導入清單
- 盤點自製的下拉選單元件。若主要目的是外觀，可以規劃改回原生
<select>加上appearance: base-select的漸進增強版本，同時改善無障礙。 - 列表頁、文章頁的延遲載入圖片加上
sizes="auto"，再用實機檢查下載的圖片尺寸是否變小。 - 設計系統色彩改用
alpha()衍生，減少重複的顏色 token。 - 深色模式素材用
light-dark()收斂，少一層媒體查詢。 - 用
@supports包住較新的功能，舊版瀏覽器看到的是合理的退路，而不是破版。 - 記住 Newly available 的意思：目前最新版的主流瀏覽器都支援，但使用者裝置上的舊版本未必。企業網站若有大量舊 iOS 或公司電腦用戶，退路設計一定要做。
你可能會問
Q：Baseline Newly available 就可以直接全站上線嗎？
可以用，但要有退路。Newly available 代表最新版瀏覽器都支援；要到 Widely available 才代表支援時間夠長、可以不太擔心舊版本。
Q：可自訂 select 現在能用嗎？
可以當作漸進增強使用。支援的瀏覽器會呈現自訂樣式，不支援的維持原生外觀，表單功能不受影響。
Q：sizes="auto" 會不會讓首屏變慢？
它只對 loading="lazy" 的圖片生效。首屏主圖本來就不該延遲載入，請繼續手動設定 sizes 並視需要加上預載。
Q：兩週一版會讓網站更常壞掉嗎？
不一定，但「發現問題」的頻率會變高。建議在 CI 加入跨瀏覽器的視覺回歸測試，並每月檢查一次 web.dev 的整理。
結語：少寫一點 hack，多留一點預算給內容
九月的更新沒有震撼的大功能，卻有一整串「讓日常工作變輕鬆」的小改進。下拉選單可以照設計稿走、圖片不用再算錯尺寸、品牌色可以少維護幾個變數——這些累積起來，就是更快的頁面、更少的套件，以及更穩的維護成本。
如果你的品牌網站還背著一堆為了相容性而存在的舊元件，現在是重新檢視的好時機。我們很樂意幫你盤點哪些可以換成原生功能、哪些需要保留退路，讓網站變輕，也讓設計師不用再聽到「這個做不到」。
資料來源：New to the web platform in September — web.dev（Rachel Andrew，2026/10/02）