為什麼身為老闆，你得開始看「瀏覽器原生 CSS 新功能」這件事

上個月翻 CSS-Tricks 的 What's !important 電子報，看到他們一口氣整理了幾個瀏覽器原生 CSS 的新進度：Gap Decorations 進入早期實作、CSS random() 函式有新一波討論、`` 的 field-sizing 屬性開始被瀏覽器採用。當下第一個念頭是，這些東西大概只有前端工程師會看。

但多看幾輪之後發現不對——這些不是工程師的自我感覺良好，而是瀏覽器廠商在告訴市場：「你網站上很多過去得靠套件或圖片做出來的效果，接下來原生就能做。」這對每個花錢做網站的業者來說，都是訊號。

以下這篇把國外前端社群正在熱議的進度，翻成台灣老闆在挑選網站設計公司時，實際可以觀察、可以提問的具體動作。

一、Gap Decorations：間隔不只能留白，還能「裝飾」

過去要做到這件事，Grid 或 Flex 排版之間想要加裝飾線、點點、icon，設計師得先出圖，再請前端切 icon font，不然就得寫 JavaScript 額外生 DOM 把元素塞進間距裡。

現在的進展是，CSS Gap Decorations 規格（W3C 草案）讓瀏覽器原生支援在 grid/flex 間距中放裝飾元素，不需要額外圖檔或 JS。這對業主有三層意義：

商品列表之間可以原生有「分隔 icon」，排版的視覺表現會細緻一截。設計公司不需要為了這種小裝飾反覆切圖、切 icon font，長久維護更友善。但說在前頭，這還是早期實作品，主流瀏覽器尚未全面支援。

你去訪商時，可以這樣問設計公司：「你們目前做 grid 排版時，若需要在格與格之間加裝飾線，會選擇 CSS 規格、還是切圖？是否有評估過 Gap Decorations 的瀏覽器支援狀況？」

> 觀察重點：願意回答瀏覽器支援度的設計團隊，代表有在追規格；直接說「我們都用切圖」的，可能工作流還停在 2018 年。

二、CSS `random()`：原生亂數，要用在哪些地方？

根據 CSS-Tricks What's !important #14 的整理，CSS random() 函式進入新一波討論，設計師可以在 CSS 內直接取亂數，搭配動畫或樣式變化使用。

實務上我們看到同業的用法多半落在「形象網站首頁輪播、活動頁 hero 區、遊戲化行銷頁的彩蛋效果」。過去這些都得靠 JavaScript 計算後再寫進 style，現在純 CSS 就有機會做到——少一層依賴、檔案少一個載入。

但有個眉角必須講：random() 比較適合用在裝飾、彩蛋、微互動，不建議用在商業關鍵決策邏輯，例如結帳金額計算、庫存數字顯示，這類還是得交給後端。

你訪商時可以問：「你們接到一個需要『每次進站看到不同 hero 視覺』的需求時，目前會怎麼實作？是否知道 CSS 原生 random() 的進度？」聽到「我們都靠 JS 抽」不會扣分，但聽到「我們已經在測試原生方案」，那是完全不同的等級。

三、`` 的 `field-sizing`：表單不再「爆版」

先講一個很多老闆沒注意過的小問題：HTML 原生下拉選單 `` 在不同瀏覽器、不同作業系統長相差很多。Windows 的 Chrome、Safari、Edge 跑出來的箭頭方向、padding、字距都不一樣。過去業界的解法是設計公司把它整個改寫成自製元件，硬把樣式抓回來。

field-sizing 屬性的出現就是為了解決這個老毛病——它讓 `` 可以依內容自動調整寬度與高度，減少「欄位太窄看不到完整選項」的尷尬狀況。

對業主的影響很直接：你網站上的預約表單、報名表單、付款頁，若有用到下拉選單，使用者體驗會明顯改善。同時設計公司不必再為了「讓下拉變好看」額外寫一整個自製元件，維護成本會跟著降。這對一頁式網站的表單轉換率特別有感——欄位一卡，填寫率就掉。

你可以在訪商時這樣問：「你們過往接到活動頁或預約頁的表單，是用原生 `` 還是自製元件？現在 field-sizing 推出後，你們會怎麼重新評估？」

四、為什麼這些「小進度」其實是挑選網站設計公司的訊號

把上面三個例子放在一起看，會浮出一條清楚的線：瀏覽器原生能力愈來愈強，過去需要靠 JavaScript 或套件才能做到的視覺與互動，現在 CSS 自己就能做。

這對業主挑選網站設計公司有兩個直接意涵：

長期維護成本下降。原生 CSS 寫出來的效果，瀏覽器升級就自動支援，不需要每年付錢請設計公司「修跑版」。這點我們在台中跟幾位長期客戶對焦時反覆被問到——三年下來維護費到底怎麼估，答案往往藏在這裡。

設計公司的技術敏銳度可以被驗證。願意在原生能力出現時就採用，跟永遠選擇「最熟悉的老方法」——這兩種團隊做出來的網站，三年後會差很多。想看 CSS 如何回應 JS 互動，可讀形象網站設計怎麼讓互動更流暢？CSS 監聽 JS 事件新趨勢與實務建議。想知道原生 CSS 如何監聽 JS 互動，可看形象網站設計怎麼讓互動更流暢？CSS 監聽 JS 事件新趨勢與實務建議。

但同時也要務實提醒：不是每個新功能都該立刻採用。設計公司應該要能說明「為什麼這次不用」、「目前瀏覽器覆蓋率到哪裡」、「退階方案是什麼」。想進一步了解原生 CSS 如何與 JS 事件協作，可讀形象網站設計怎麼讓互動更流暢？CSS 監聽 JS 事件新趨勢與實務建議。聽到「我們什麼都用最新的」反而要警覺——那通常代表沒在管使用者實際環境。