计算机科学中只有两件难事：缓存失效和命名。

— Phil Karlton

在 Web 开发中，命名也很困难，从不断变化的 CSS 类到标题和链接。从信息架构的角度来看，标题和链接充当视觉路标，帮助用户建立网站的心智模型并从一个页面导航到另一个页面。

但标题和链接名称发挥的第二个、未被充分认识的作用是通过浏览器的内置查找功能。我只能从个人经验出发——也许我是这个规则的例外——但我经常依靠查找功能来检查页面内容是否存在并快速跳转到该内容。

不过，有时查找功能会失效。例如，假设一位访客喜欢您的网站并决定订阅您的 RSS Feed。他们搜索页面以查找“RSS”，但没有找到任何结果。问题在于您将链接命名为“Feed”或“Subscribe”，或使用了 RSS 符号。他们耸耸肩，然后离开——您失去了一个潜在的关注者。

我编写了 Cinnamon.js 来缓解命名问题，通过让查找功能支持同义词（演示）。

试一试

要使用 Cinnamon.js，您只需在页面上包含该脚本即可

然后用同义词（用逗号分隔）将您的单词括起来，如下所示

Fire

这是一个 标记 API 的示例，只需少量 HTML 代码即可开始使用。

基本样式

简而言之，该脚本获取在 data-cinnamon 属性中列出的每个同义词，并创建一个样式合适的子元素。

要为同义词设置样式，我将它们与以下 CSS 叠加在原始文本后面。同义词文本隐藏，而原始文本则突出显示。

position: absolute;
top: 0;
left: 0;
z-index: -1;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
color: transparent;

下面是在 Firefox 的 3D 视图 中的显示效果。绿色块表示同义词。

跨浏览器差异

出于脚本的目的，当找到同义词时，文本应保持不可见，同时其背景则突出显示。这会产生原始单词正在突出显示的错觉。

在测试过程中，我发现浏览器处理查找功能的方式存在一些差异。这些是您希望永远不必处理的极端情况，但在创建 Cinnamon.js 时，它们却显得尤为重要。

查找不可见文本

如果将文本设置为 display: none;，则查找功能根本无法看到它——所有浏览器都是如此。visibility: hidden; 也是如此（Opera 除外，Opera 中查找功能会匹配同义词，但看不到任何内容）。

当不透明度设置为 0 时，大多数浏览器都会匹配文本，但不会有任何明显的突出显示效果（Opera 再次成为例外，它会突出显示匹配文本的背景）。

当将文本设置为 color: transparent; 时，包括 Firefox 和 Chrome 在内的多数浏览器都会突出显示该区域，同时文本保持透明——这正是我们对脚本的要求。

Safari

但是，Safari 的处理方式有所不同。当找到透明文本时，Safari 会将其显示为黄色背景上的黑色文本。如果文本被具有更高 z 索引的元素覆盖，它会将其置于顶部。

另一个区别是：大多数浏览器都会匹配字符串中间的文本。Safari 仅在字符串为驼峰式命名法时才会这样做。

其他问题

以欺骗性方式使用的隐藏文本可能会在 Google 搜索结果中 受到处罚。鉴于所使用的技术，Cinnamon.js 存在一定的风险，尤其是在被滥用时。

另一个问题是 Cinnamon.js 对辅助功能的影响。幸运的是，有 aria-hidden="true"，它用于告诉屏幕阅读器忽略同义词。

继续搜索

多年来我一直使用浏览器的查找功能，但从未认真考虑过它。但在编写 Cinnamon.js 的过程中，我了解了很多关于 Web 的知识，以及如何扩展其一小部分。您永远不知道什么会激发您的下一个黑客行为。