词汇表 Web 组件

主要观点:作者在博客中添加了秘密词汇表,通过特殊链接可找到,其想法源于对依赖 MDN 的担忧,实现方式是在 Markdown 中用占位链接指向 JSON 文件,构建脚本将其替换为 web 组件,利用渐进增强技术,支持不同浏览器,包括通过悬停或键盘聚焦激活的弹出框,还尝试过 CSS 锚定位等但失败,目前用 JavaScript 计算位置以支持所有浏览器,暂不打算给旧博客添加词汇链接,需得到积极反馈后再推进,且考虑将类似技术用于链接笔记。
关键信息:

  • 秘密词汇表可通过悬停特殊链接找到。
  • 用 Markdown 链接到 JSON 文件实现词汇表。
  • 利用 web 组件和渐进增强技术。
  • 尝试 CSS 锚定位等失败,最终用 JavaScript。
  • 暂不立即给旧博客添加词汇链接。
    重要细节:
  • JSON 文件格式包含标题、描述和链接等信息。
  • 弹出框可通过悬停或键盘聚焦激活, escape 键可关闭。
  • 对新 Apple Pencils 的悬停效果特殊。
  • CSS 锚定位在 Safari 等浏览器中存在问题。
  • 考虑将技术用于链接笔记。
阅读 9
0 条评论