形象網站的「互動感」到底誰在負責?
業主看一個形象網站,最直接的感受是「有沒有互動感」——滑鼠 hover 時按鈕會不會反應、捲動時內容會不會動、點擊時會不會給反饋。
過去,這些互動感100% 交給 JavaScript。
2026 年的趨勢:越來越多互動感用 CSS States 就能做到 — JS 退居二線。
這篇文章要回答的核心問題:CSS States vs JavaScript Events 該怎麼選? — 3 個實務應用場景 + 對台灣業主的影響。
詳細的 CSS 進階技術見 CSS 進階技術:2026 sibling-index & sibling-count 與 [MDN CSS 偽類](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) 官方文件。
本文是「CSS 進階」pillar 系列的一部分。想看完整攻略?先從 CSS 進階 pillar 主頁 進入。
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— 表單驗證狀態
這些新特性讓「以前一定要用 JS」的效果,現在用 CSS 就能做。
為什麼這個趨勢對台灣業主很重要?
3 個原因:
原因 1:網站速度更快
CSS 比 JS 載入快、執行快。
- HTML + CSS 渲染 = 1 個 round trip
- HTML + CSS + JS 渲染 = 2-3 個 round trip
業界常見的觀察:用 CSS 取代 JS 的網站,LCP 平均短 30-50%。
原因 2:維護成本降低
CSS 改一個樣式比 JS 改一個 state 容易。設計師可以直接改 CSS,不用工程師介入。
原因 3:網站更穩定
JS 越少,bug 越少 — JS 報錯會讓整個網站「當掉」,CSS 不會。
形象網站設計的 3 個實務應用場景
場景 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 基礎」都會的設計公司 — 這種公司報價合理、速度優、穩定性高**。
