这篇文章探讨了用纯HTML替代JavaScript的趋势，认为随着HTML和CSS功能的增强，原本依赖JS实现的功能（如手风琴菜单、导航菜单等）现在可以用更高效的HTML原生方法完成。这样做能减少JS的加载和处理负担，提升性能。作者强调并非反对JS，而是主张让JS专注于更复杂的任务。

用纯HTML替代JavaScript的实践指南

作者：Aaron T. Grogg | 发布日期：2025年12月27日

核心观点

随着HTML和CSS功能的不断增强，许多传统依赖JavaScript实现的功能现在可以通过原生HTML元素完成。这种转变不仅能减少代码量，还能提升性能表现——因为原生HTML无需经历JS的下载、解压、解析和执行过程。

四大实用案例

1. 手风琴/折叠面板（Accordions）

• 实现方案：使用<details>和<summary>标签组合
• 特点：
  • 默认闭合状态：<details><summary>标题</summary>内容</details>
  • 默认展开状态：添加open属性
  • 单选模式：为多个details设置相同name属性
• 兼容性：主流浏览器全面支持

2. 智能输入提示（Autofilter）

• 实现方案：<input>配合<datalist>元素
• 注意事项：
  • Firefox暂不支持日期/时间类输入
  • 移动端存在兼容性问题
• 示例： html <input list="browsers"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> </datalist>

3. 弹窗/浮层（Modals）

• 新技术：popover属性
• 三种模式：
  • auto：点击外部自动关闭（默认）
  • hint：允许多个提示共存
  • manual：必须手动关闭
• 示例： html <button popovertarget="modal">打开</button> <div popover id="modal">内容</div>

4. 侧边导航（Offscreen Nav）

• 创新用法：将弹窗技术应用于导航菜单
• 关键CSS： css #menu { translate: -100vw; } #menu:popover-open { translate: 0; }

开发者建议

文章强调应遵循"渐进增强"原则：优先采用HTML/CSS方案，仅在必要时引入JavaScript。这种开发理念能显著提升页面加载速度，特别是在移动设备上。

"JavaScript应该专注于处理HTML/CSS尚无法胜任的复杂交互，而不是被浪费在基础UI组件的管理上。" —— 作者在文中特别指出

对于需要更全面技术方案的读者，作者推荐参考其详细技术文章《用低JS或无JS方案替代传统实现》。

（注：原文中的代码演示动图、社交媒体链接及网站导航菜单等非核心内容已作精简处理）

以下是评论内容的总结：

1. HTML自动过滤输入框的局限性

   • 观点：<datalist>功能有限，无法处理拼写错误或复杂过滤需求
   • 引用：
     "It's great until you have a typo in the field" (theandrewbailey)
     "how are you supposed to use it with a non-trivial amount of items" (dpedu)

2. 渐进增强的开发理念

   • 观点：建议先使用简单HTML方案，再逐步增加复杂性
   • 引用：
     "start with the simplest solution like html-only autofilters first" (prisenco)
     "they still remain functional elements...far ahead of any javascript" (superkuh)

3. 对details/summary标签的评价

   • 正面：认为这个原生HTML功能强大且无需ARIA
   • 引用：
     "There's basically nothing you can't do with them" (subdavis)
   • 负面：批评其嵌套结构和样式限制
   • 引用：
     "Nesting the elements is a truly hideous choice" (econ)
     "The default styling gives no clue about it being clickable" (econ)

4. HTML与JavaScript的适用场景

   • 观点：两者各有优势，复杂应用仍需JavaScript
   • 引用：
     "Complex/interactive web apps requires JavaScript, period" (overflowy)
     "Is it really possible to replace JS with HTML in near future?" (anidsiam)

5. 对新HTML功能的期待

   • 包括：可定制select、Popover API、暗黑模式支持等
   • 引用：
     "Gimme a dark/light mode switch" (suprjami)
     "The Popover API looks really cool" (odie5533)
     "customizable selects...seen so many horrors with js-based dropdowns" (ronbenton)

6. 样式和功能限制的批评

   • 观点：原生HTML组件难以满足商业项目的样式需求
   • 引用：
     "it's difficukt to style or animate those things" (cantalopes)
     "doubt any real world commercial project would be satisfied" (cantalopes)

7. 浏览器兼容性问题

   • 观点：虽然部分功能在旧浏览器中不完美，但比JS方案更健壮
   • 引用：
     "don't fully work in my ancient browser...but all partially work" (superkuh)
     "The Pentagram does not load without JS" (smlavine)