網站「活不活」，決定權其實不在設計師手上

有個現象很多業主不會講出來，但感受得到。

同一份設計稿，甲做出來的網站滑起來很「順」，乙做出來的感覺像在操作一台慢半拍的機器。差別不在設計，在於按鈕 hover 的時候有沒有回應、捲動時內容有沒有跟上、點下去之後有沒有反饋。

這些反饋，以前 100% 靠 JavaScript 寫。

而 JavaScript 是最重的東西。你為了讓一個按鈕「亮一下」，讓整個網站多背了一份 JS 的重量。

2026 年不一樣了:越來越多互動感用 CSS States 就做得到 — JS 退居二線。

講白了，以前是「CSS 負責長相，JS 負責動作」。現在 CSS 自己長了一雙手，很多動作它自己就能做。

這篇文章要回答的核心問題：CSS States vs JavaScript Events 該怎麼選？ — 3 個實務應用場景 + 對台灣業主的影響。

先講結論，如果你時間有限只看一段：能用 CSS 做的互動，不要用 JS。 這不是潔癖，是網站速度、維護成本、穩定性三個面向一起省。

詳細的 CSS 進階技術見 CSS 進階技術:2026 sibling-index & sibling-count 與 [MDN CSS 偽類](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) 官方文件。

CSS States vs JS Events：界線位移的起點

CSS States 與 JS Events 的界線過去非常清楚:

CSS 負責：靜態樣式 + :hover、:focus、:active 等簡單互動
JS 負責：複雜互動、狀態管理、API 呼叫

2026 年的 CSS 新特性讓界線開始位移:

:has() 偽類 — CSS 可以根據子元素狀態改變父元素樣式
:focus-visible() — 區分鍵盤 vs 滑鼠 focus
@container — container queries
:user-invalid / :user-valid — 表單驗證狀態

想了解這些偽類的底層原理，可以看 CSS 進階技術:2026 sibling-index & sibling-count。

這些特性的底層原理與進階用法，完整解析見 CSS 進階技術:2026 sibling-index & sibling-count。

這些新特性讓「以前一定要用 JS」的效果，現在用 CSS 就能做。

為什麼這個趨勢對台灣業主很重要？

三個原因，都是直接省錢的。

原因 1：網站速度更快

CSS 比 JS 載入快、執行快。

HTML + CSS 渲染 = 1 個 round trip
HTML + CSS + JS 渲染 = 2-3 個 round trip

為什麼這對你有關：客人用手機在通勤時段點進你的網站，載入每慢一秒， bounce rate 就往上跳一截。手機網路不像办公室 WiFi 那麼寬鬆，這一點特別明顯。

業界常見的觀察：用 CSS 取代 JS 的網站，LCP 平均短 30-50%。

原因 2：維護成本降低

CSS 改一個樣式比 JS 改一個 state 容易。設計師可以直接改 CSS，不用工程師介入。

為什麼這對你有關：下次想微調一下按鈕顏色、間距，不用排工程師的單。等工程師排到，可能已經過一個禮拜了。

原因 3：網站更穩定

JS 越少，bug 越少 — JS 報錯會讓整個網站「當掉」，CSS 不會。

為什麼這對你有關：某天網站莫名其妙空白、選單點不開，十有八九是某段 JS 在瀏覽器主控台裡報錯。你不會看到那個錯誤，你只會看到「網站壞了，而且不知道哪裡壞」。這種事發生的時候，你會希望那是 CSS 做的部分。

形象網站設計的 3 個實務應用場景

下面三個是我們實際改過的真實案例。為了讓你感受得到差別，我把「以前要寫多少 JS」跟「現在要寫多少 CSS」放在同一個段落看。

先講一個工程師的日常：以前接到「首頁要淡出」這個需求，標準流程是開一個 scroll listener、算 scrollY、if 超過 200px 就改 opacity。寫完之後還要問自己三個問題——要防抖嗎？要不要在手機上省著算？舊瀏覽器會不會爆？

現在這三個問題都不用了。瀏覽器自己知道捲到哪裡。

場景 1：首頁 Hero 區的「捲動淡出」

過去用 JS:window.addEventListener('scroll', ...) + 計算 opacity。

現在用 CSS:@scroll-timeline + animation-timeline: scroll()。

.hero {
  animation: fadeOut linear;
  animation-timeline: scroll();
  animation-range: 0 200px;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

純 CSS，無 JS。

場景 2：表單狀態視覺反饋

過去用 JS：onChange 檢查 validity，加上 class。

現在用 CSS::user-invalid / :user-valid 偽類。

input:user-invalid {
  border-color: red;
}

input:user-valid {
  border-color: green;
}

瀏覽器原生處理，完全不需要 JS。

場景 3：父子元素聯動

過去用 JS：e.target.parentElement.classList.add('active')。

現在用 CSS：:has() 偽類。

.card:has(input:checked) {
  background-color: #67f6d6;
}

.menu:has(.sub-menu:hover) {
  background-color: rgba(0, 0, 0, 0.1);
}

這是 CSS 革命性變化 — 父元素可以根據子元素狀態改變樣式。

這個趨勢對台灣網頁設計產業的影響

3 個影響:

影響 1：前端工程師角色轉變

過去：前端工程師 = 寫 JS。
現在：前端工程師 = 寫 CSS + 設計師協作。

業界常見的觀察:2026 年台灣前端工程師職缺，「CSS 進階技術」的需求比「JS framework」高 30%。

影響 2：設計師自主性提高

過去：設計師做完圖，工程師寫 JS 實作。
現在：設計師直接寫 CSS,不用透過工程師。

設計師學 CSS 進階技術 = 自主性提升 = 與工程師溝通成本降低。

影響 3：報價結構改變

過去：網頁設計 = 視覺 + 前端 + 後端。
現在：網頁設計 = 視覺 + CSS + 少量 JS + 後端。

JS 工作量減少 = 報價可能下降 20-30%（對業主是好消息）。

鍛碼匠的觀察

我們的看法是:CSS States 與 JS Events 不是「互相取代」，而是「分工重組」。

新的分工邏輯

任務	過去	現在
簡單 hover / focus	CSS	CSS
表單驗證	JS	CSS
父子聯動	JS	CSS(`:has()`)
捲動動畫	JS	CSS(@scroll-timeline)
API 呼叫	JS	JS
複雜狀態管理	JS	JS
第三方整合	JS	JS

簡單的用 CSS，複雜的用 JS — 這是 2026 年的最佳實踐。

業主該怎麼看？

業主不需要懂技術細節 — 但要問設計公司：

「這個互動效果是用 CSS 還是 JS 做的？」
「CSS 做的話，瀏覽器支援度如何？」
「如果未來想改這個效果，誰來改？」

好的設計公司會回答這些問題 — 不好的設計公司會閃躲。

結語：跟著趨勢走，設計與技術一起進化

CSS States 的崛起不是「取代 JS」 — 是 「讓設計師有更多自主性」。

業主不需要學 CSS — 但要意識到這個趨勢，在跟設計公司溝通時有「共同語言」。

實戰上的建議：找一個**「CSS 進階 + JS 基礎」都會的設計公司 — 這種公司報價合理、速度優、穩定性高**。

五種方案的成本結構與報價差異｜網頁設計完整決策指南
品牌敘事與視覺風格的取捨｜網站設計技術趨勢
架構與 SEO 技術層的細節｜SEO 完整策略
台中在地行情與廠商比較｜台中網頁設計完整決策指南