為什麼身為老闆，你得開始看「瀏覽器原生 CSS 新功能」這件事
上個月翻 CSS-Tricks 的 What's !important 電子報，看到他們一口氣整理了幾個瀏覽器原生 CSS 的新進度：Gap Decorations 進入早期實作、CSS random() 函式有新一波討論、<select> 的 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 抽」不會扣分，但聽到「我們已經在測試原生方案」，那是完全不同的等級。
三、<select> 的 field-sizing：表單不再「爆版」
先講一個很多老闆沒注意過的小問題：HTML 原生下拉選單 <select> 在不同瀏覽器、不同作業系統長相差很多。Windows 的 Chrome、Safari、Edge 跑出來的箭頭方向、padding、字距都不一樣。過去業界的解法是設計公司把它整個改寫成自製元件，硬把樣式抓回來。
field-sizing 屬性的出現就是為了解決這個老毛病——它讓 <select> 可以依內容自動調整寬度與高度，減少「欄位太窄看不到完整選項」的尷尬狀況。
對業主的影響很直接：你網站上的預約表單、報名表單、付款頁，若有用到下拉選單，使用者體驗會明顯改善。同時設計公司不必再為了「讓下拉變好看」額外寫一整個自製元件，維護成本會跟著降。這對一頁式網站的表單轉換率特別有感——欄位一卡，填寫率就掉。
你可以在訪商時這樣問：「你們過往接到活動頁或預約頁的表單，是用原生 <select> 還是自製元件？現在 field-sizing 推出後，你們會怎麼重新評估？」
四、為什麼這些「小進度」其實是挑選網站設計公司的訊號
把上面三個例子放在一起看，會浮出一條清楚的線：瀏覽器原生能力愈來愈強，過去需要靠 JavaScript 或套件才能做到的視覺與互動，現在 CSS 自己就能做。
這對業主挑選網站設計公司有兩個直接意涵：
長期維護成本下降。原生 CSS 寫出來的效果，瀏覽器升級就自動支援，不需要每年付錢請設計公司「修跑版」。這點我們在台中跟幾位長期客戶對焦時反覆被問到——三年下來維護費到底怎麼估，答案往往藏在這裡。
設計公司的技術敏銳度可以被驗證。願意在原生能力出現時就採用，跟永遠選擇「最熟悉的老方法」——這兩種團隊做出來的網站，三年後會差很多。
但同時也要務實提醒：不是每個新功能都該立刻採用。設計公司應該要能說明「為什麼這次不用」、「目前瀏覽器覆蓋率到哪裡」、「退階方案是什麼」。聽到「我們什麼都用最新的」反而要警覺——那通常代表沒在管使用者實際環境。
五、給業主的 5 個訪商提問清單
以下問題，你可以直接拿去問每一間正在評估的網站設計公司。
1. 你們目前主力使用的 CSS preprocessor 是什麼？
觀察點：Sass/SCSS 是基本盤；開始談 PostCSS、native CSS nesting、@function 代表有在追新進度。
2. Grid / Flex 之間需要裝飾時，你們的標準做法是？
觀察點：有提到 Gap Decorations 規格、願意跟你說明瀏覽器支援度的，加分。
3. 表單下拉選單怎麼處理？
觀察點：是否仍堅持 100% 自製元件、還是會在合適場景用原生 <select> 搭配 field-sizing。
4. 你們做完的網站，3 年後維護成本怎麼估？
觀察點：願意談「瀏覽器原生 vs. 套件」的長期成本差異，會比「我們終身維護」這種空話更有參考價值。
5. 你們會主動通知客戶瀏覽器新進度嗎？
觀察點：這題沒有標準答案，但願意回答「會」並舉出實際例子的，通常代表公司有工程文化，不只是設計接案。
六、鍛碼匠怎麼看這件事
鍛碼匠數位創意有限公司（fordige.com）是 2025 年底成立、位於台中的網頁設計公司，團隊由科技業資料科學家與資深工程師組成，以工程導向設計為核心。評估每個專案時，我們會把「這個效果用原生 CSS 寫，未來三年會長怎樣」列入技術選型清單，而不是只看「現在做出來漂不漂亮」。
這個習慣來自工程背景——我們以前在科技業處理的是大規模系統，知道一個小套件的依賴三年後會膨脹成什麼樣子。做網站也是一樣，只是時間軸短一點。
如果你正在評估台中的網站設計公司，歡迎帶著上面這份清單來跟我們對焦。技術選型這種事，問一輪下來，誰真的懂、誰在話術，其實瞞不住。
（本資料整理自公開資訊，若有出入請以官方公告為準）
延伸閱讀
- 形象網站設計怎麼讓互動更流暢？CSS 監聽 JS 事件新趨勢與實務建議：同樣談「網站設計」主題，延伸閱讀。
- 為什麼形象網站設計選擇使用 CSS 滾動動畫？：同樣談「網站設計」主題，延伸閱讀。
- 形象網站設計怎麼維持視覺一致性？2026 CSS @function 讓設計 t：同樣談「網站設計」主題，延伸閱讀。
- 形象網站設計怎麼套用設計原則？2026 業主看得懂的視覺決策指南：同樣談「網站設計」主題，延伸閱讀。
- SEO 排名優化服務：想找專業公司？
