如果你曾被網站開發公司告知「這個功能需要寫 JavaScript」，現在局勢可能正在改變。根據 CSS-Tricks 的報導，CSS 規範中一個名為 @when 的新語法正在快速推進，這個語法讓 CSS 本身就能夠處理「如果...就...」的條件邏輯，理論上可以取代部分原本需要 JavaScript 才能做到的事情。

什麼是 @when 語法？

傳統上，網頁設計公司在實作互動效果時，工程師需要在 HTML 結構中埋入 JavaScript 程式碼，監聽使用者的行為（比如點擊、滾動、視窗大小改變），再透過 JavaScript 指令去改變 CSS 樣式。這種「JS 控制 CSS」的模式有幾個問題：

瀏覽器需要額外下載並執行 JavaScript 程式碼，拖慢頁面載入速度
JavaScript 執行失敗時，互動效果會直接消失，使用者體驗中斷
不同瀏覽器對 JavaScript 的支援程度不同，增加了相容性測試的負擔

@when 語法讓 CSS 自己就能判斷條件。舉例來說，過去要讓某個區塊在視窗寬度小於 768px 時改變樣式，工程師必須寫 JavaScript 監聽視窗 resize 事件。現在只要一行 CSS 就能做到：

@when media(width <= 768px) {
  .navigation { flex-direction: column; }
}

這不只是語法糖。當樣式邏輯完全由 CSS 處理時，瀏覽器的 CSS 引擎會比 JavaScript 引擎更早、更穩定地套用樣式，使用者不會看到「閃爍」或「跳動」的現象。

對網站速度的影響

我們在替客戶實務上，最常被問到的問題就是「為什麼網站載入這麼慢？」過去很多互動效果必須仰賴 JavaScript 函式庫（例如 jQuery、GSAP、ScrollMagic），這些函式庫加上它們的相依套件，可能讓網站多載入 200-500KB 的資料。

當 @when 這類語法普及後，部分互動效果可以直接用 CSS 達成，不需要任何 JavaScript。這對於：

手機用戶：台灣的 mobile-first 趨勢越來越明顯，CSS 原生支援的互動效果在低階手機上樣現更順暢
弱網環境：純 CSS 的條件判斷不需要下載額外程式碼，在網路訊號不穩定時仍然能正常運作
Core Web Vitals：Google 的網站體驗核心指標中，LCP（最大內容繪製）和 CLS（版面位移）都可能因為減少 JS 依賴而改善

（本資料整理自公開資訊，若有出入請以官方規範為準）

為什麼設計公司應該關注這項趨勢

業界觀察發現，技術債是很多企業網站遲遲無法現代化的主因。舉例來說，許多五年前用 jQuery 建置的網站，到了 2026 年要加入響應式設計或動畫效果時，工程師必須同時維護舊的 jQuery 程式碼和新的功能模組，開發成本節節上升。

@when 語法代樣的是一個更大的趨勢：CSS 正在吸收過去必須用 JavaScript 才能做到的能力。這意味著：

更低的維護成本：少用一個 JavaScript 函式庫，就少一個需要更新的依賴項目
更安全的網站：JavaScript 程式碼越少，遭受 XSS（跨站腳本攻擊）的表面積就越小
更快的開發速度：工程師可以用更少的程式碼達成相同效果

當然，這不代樣 JavaScript 會消失。那些需要複雜資料處理、串接 API、或建立高度客製化互動的功能，仍然需要 JavaScript。但對於「選單展開」、「圖片輪播」、「響應式版面調整」這類常見需求，CSS 的時代正在來臨。想看無 JS 的實戰範例可參考 [純 CSS 圓餅圖時代來臨：告別 JavaScript 圖表函式庫，2026 網](https://fordige.com/blog/pure-css-pie-chart-no-javascript)。

對業主的實質建議

如果你正在評估網頁設計公司，或者準備重新改版網站，可以注意以下幾點：

詢問技術方案：問問對方「這個功能用 CSS 還是 JavaScript 實作？」如果對方能清楚說明兩者的取捨，代樣對方有在關注 web 標準的進展
檢視現有網站的 JS 依賴：用 Chrome 開發者工具的 Network 分頁看看網站載入了多少 JS 檔案，過多的 JS 通常是效能瓶頸
把 Core Web Vitals 納入驗收標準：網站上線前，要求設計公司提供 LCP、CLS、FID 的測試報告

這個問題我們遇到過：曾有客戶拿著一份國外的網站參考範本來，說「我要一模一樣的功能」。但那份範本使用了大量 JavaScript 動畫庫，在分析過他的目標用戶族群（多為中年企業主，手機效能普通）之後，我們建議改用 CSS 原生動畫，結果不只載入速度快了 40%，使用者操作時的順暢度也大幅提升。

結論

CSS 的能力正在擴張，@when 只是其中一個信號。對於台灣的企業主來說，這代樣著網站開發的選擇正在改變：更快的速度、更低的技術債、以及更穩定的使用者體驗。

選擇網頁設計公司時，除了看視覺設計之外，也建議問問對方的技術選型邏輯。一個願意關注 CSS 新標準、願意用更精簡的技術達成相同效果的團隊，長期來說會為你的網站省下不少維護成本。

## 延伸閱讀

・2026 年 CSS 置中語法最新攻略：Grid、Flexbox 終極用法，告別瑣碎的版面調整地獄
CSS 新語法不只是 @when，置中佈局在 2026 年也有更優雅的解法，這篇實戰攻略收錄了 fordige 在專案中常用的技巧

・AI 時代的網站新標準：你的網站準備好被 AI 讀取了嗎？從 Agent Readiness Score 看 2026 年網頁設計該注意的四件事
網站效能不只影響使用者體驗，也會影響 AI 爬蟲對你的網站評價，這篇幫你一次掌握 2026 年的網站技術標準

・fordige 作品集
看看我們如何用現代化的前端技術，為不同產業的客戶打造高效能網站

瀏覽器需要額外下載並執行 JavaScript 程式碼，拖慢頁面載入速度
JavaScript 執行失敗時，互動效果會直接消失，使用者體驗中斷
不同瀏覽器對 JavaScript 的支援程度不同，增加了相容性測試的負擔

@when media(width <= 768px) {
  .navigation { flex-direction: column; }
}