隐私与 :visited 选择器

在 2010 年之前，CSS 的 :visited 选择器允许网站揭示用户的浏览历史记录，并找出用户访问过哪些网站。这是通过 window.getComputedStyle 和其他技术实现的。此过程执行速度很快，不仅可以确定用户在网络上的活动，还可以用来猜测用户身份的大量信息。

为了缓解这个问题，浏览器限制了可以从已访问链接中获取的信息量。

善意的谎言

为了保护用户的隐私，Firefox 和其他浏览器在某些情况下会向 Web 应用程序撒谎。

  • window.getComputedStyle 方法以及类似的函数（如 element.querySelector）将始终返回表示用户从未访问过页面上任何链接的值。
  • 如果使用兄弟选择器，例如 :visited + span，则相邻元素（此示例中的 span）的样式将显示为未访问。
  • 在极少数情况下，如果使用嵌套链接元素，并且匹配的元素与正在测试其在历史记录中是否存在链接不同，则该元素也将呈现为未访问状态。

您可以设置已访问链接的样式，但您可以使用的样式有限。只有以下样式可以应用于已访问链接。

此外，即使对于上述样式，您也无法更改未访问和已访问链接之间的透明度，因为否则您可以使用 alpha 参数来使用 rgb() 或 hsl()，或者使用 transparent 关键字。

以下是如何使用具有上述限制的样式的示例。

css
:link {
  outline: 1px dotted blue;
  background-color: white;
  /* The default value of background-color is `transparent`. You need to
     specify a different value, otherwise changes on :visited won't apply. */
}

:visited {
  outline-color: orange; /* Visited links have an orange outline */
  background-color: green; /* Visited links have a green background */
  color: yellow; /* Visited links have yellow colored text */
}

对 Web 开发人员的影响

总的来说，这些限制不应该对 Web 开发人员造成太大的影响。但是，它们可能需要对现有站点进行以下更改。

  • 使用背景图像根据链接是否已被访问来设置链接样式将不再起作用，因为只能使用颜色来设置已访问链接的样式。
  • 如果在 :visited 选择器中设置其他透明颜色的样式，则这些颜色将无法显示。

另请参阅