用原生 HTML 取代 JS：我從 HTMHell 文章學到的減法思維

本篇文章更新時間：2025/12/29
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。

用 HTML 取代 JavaScript 的那一刻：不是退步，而是更成熟的前進

編輯前言：這篇來自 Replacing JS with just HTML - HTMHell 的文章，提供了一個很實用的視角：那些「以前非 JS 不可」的互動行為，其實正慢慢被 HTML 與 CSS 原生能力取代。對想提升網站效能的前端來說，值得仔細一讀。

核心觀點 (Key Takeaways)

• HTML 與 CSS 的原生能力近年大幅提升，許多簡單互動已不必依賴 JS。
• 減少 JS 不是為了「反 JS」，而是保留 JS 的能量在更必要的場景。
• 使用
  、、popover API 等原生功能，可以帶來更快、更穩定、更易維護的互動體驗。

深入解析

作者 Aaron T. Grogg 主張，前端長期習慣用 JS 實作手風琴選單、搜尋建議、彈窗、側欄選單等互動，但現在的 HTML/CSS 能力已經足以處理其中多數需求。他的核心訴求其實一句話就能總結：如果原生功能做得到，就不要讓 JS 來湊熱鬧。

原文提醒我們：JS 需要下載、解析、執行、佔記憶體，而原生 HTML/CSS 功能則不需這些成本。

以下整理幾個作者最具代表性的案例：

• 手風琴：用

  /

  即可完成
  不再需要自己寫開關邏輯。甚至可透過 name 屬性做成「一次只能展開一個」的群組互斥效果。

• 搜尋建議： +
  不需 JS 就能做出自動篩選的 dropdown。雖然目前在 Firefox、mobile 仍有限制，但對許多表單需求已相當實用。

• 彈窗／Popover：使用 popover 與 popovertarget
  不用再寫 overlay、關閉事件、點擊外部關閉等邏輯。原生 API 已幫你處理大部分互動。此外還提供 auto / hint / manual 三種模式。

• Offscreen Nav：利用 popover 做側邊選單
  把選單推到畫面外，使用 translate 控制顯示／隱藏，加上 ::backdrop 可直接做出遮罩層。完全不需要 JS。

筆者心得與啟發

對我而言，這篇文章最有價值的地方不在於展示「哪些功能可以不用 JS」，而是在於它提醒前端工程師：技術選擇本質上是在做資源配置，不是炫技。

我很常看到網站為了簡單的手風琴或彈窗，額外載入整包 JS library，最後造成首屏載入變慢、記憶體占用增高、甚至影響可及性。當原生 HTML/CSS 提供的 API 足夠時，選擇它不只是更快，也更穩定、更語意化、更容易維護。

在實際應用上，我建議的思考路線是：

• 能用 HTML 解決的互動，優先用 HTML。
• 需要 UI 動畫、複合狀態時，再引入 CSS。
• JS 留給不可或缺的「業務邏輯」，而不是 UI 裝飾。

簡單說，少一點 JS，不代表少一點功能，而是更精準、更乾淨的功能。

這篇文章也讓我開始思考未來前端的分工：或許真正的挑戰不是「如何寫更多 JS」，而是「如何讓 JS 只做該做的事」。