是否可以让浏览器搜索 CSS 生成的内容？

Posted 2023-03-05

【中文标题】是否可以让浏览器搜索 CSS 生成的内容？

【英文标题】：Is it possible to make CSS generated content searchable by a browser?

【发布时间】：2012-10-29 02:33:52

【问题描述】：

我经营一个网站，它使用 CSS 伪元素在这里和那里插入文本。其中之一插入了 CSS 计数器的值（因此需要对系统进行大量重新设计才能做到这一点 CSS 文本注入）。具体的CSS规则是：

.num_defn .theorem_label:after 
    content: " " counter(definition, decimal);
    counter-increment: definition;

这会将“Definition”转换为“Definition 1”（比如说）。

但是，浏览器无法搜索注入的文本。它没有看到1：如果我搜索“定义 1”，那么它不会找到它，如果我搜索“定义。无论定义文本是什么”，那么浏览器会愉快地突出显示该行，除了插入1。因此，如果您将粗体文本想象为突出显示，它将如下所示：

定义 1 。无论定义文本是什么

这并不理想！人们喜欢通过编号来引用定义并说“查看 XYZ 页面上的定义 1”（以及在超链接不可用的情况下 - 我知道这很奇怪，但确实会发生）。

因此：

我在服务器端有什么方法可以将注入的文本指定为“可搜索”？ 如果没有，浏览器端是否有简单方式可以启用？

【问题讨论】：

您的搜索是否由您的服务器端代码执行？

@ryan 不。这是标准的浏览器在页面中查找。

如果更改服务器端代码以在 html 中执行此操作是不可能的，那么您只剩下 javascript。这应该是微不足道的。

【参考方案1】：

据我所知，没有办法。您可能可以使用 JS 来访问该信息，但这将是某种“黑客”的事情。

当您考虑 HTML 和 CSS 的用途时，我认为这有点道理。您可能知道 HTML 旨在描述内容的语义，而 CSS 旨在控制页面的外观。因此，简而言之，如果您使用 CSS 将任何文本添加到您的页面，那么它应该只是出于文体目的。

如果它是对您的网站访问者有意义的实际文本，您需要将其作为 HTML 直接放在您的网站中。

您这样做的方式也违反了最佳做法。因为如果你禁用 CSS，一些内容就会消失。

【讨论】：

感谢您的回答。不过，我可能会质疑你的观点。 CSS 计数器用于计算事物，并且可能会在某处显示该计数。如果您有一个很长的<ol> 列表，您可能会说“看第三十项”，然后有人可能会搜索30.。我刚刚测试了它，它也不起作用。 30. 是由 CSS 还是由 HTML 插入的，这是有争议的，因为 HTML 中有一个（非标准但广泛使用？）默认值可以被 CSS 覆盖。

井列表项目符号只是风格特征。