Hiding elements that require JavaScript without JavaScript
a year ago
- #Web Development
- #Progressive Enhancement
- #JavaScript
- 该网站旨在无需JavaScript也能正常运行，但禁用JavaScript时某些元素可能显得笨拙。
- 通过7行代码（或单行代码）解决方案可隐藏依赖JavaScript的元素，避免对禁用JavaScript的用户造成功能缺失。
- 示例：分享按钮在启用JavaScript时显示SVG图标，禁用时通过`<noscript>`标签显示链接。
- 初始方案：通过在`<head>`中用JavaScript添加`js-enabled`类来差异化样式，但感觉不够优雅。
- 替代方案：结合`<noscript>`和`<style>`标签隐藏特定元素（如`.theme-toggle`、`.menu-trigger`）。
- 优化方案：引入单一类名`.d-js-required`配合极简CSS隐藏所有依赖JavaScript的元素，降低维护成本。
- 结论：此类创新方案能有效管理渐进增强策略，确保无论JavaScript是否可用都能提供流畅体验。