为什么浏览器会限制 :visited 选择器?

2022-01-10 00:00:00 css-selectors css

我了解隐私问题，但在 这篇文章 Mozilla 声明他们对 querySelector() 和 getComputedStyle() 撒谎.

I understand the privacy concerns, but in this article Mozilla states that they are lying to querySelector() and getComputedStyle().

如果他们已经在对网站撒谎，那么为什么要将 :visited 限制为简单的颜色?不能使用相同的方法对网站隐藏完整的样式吗?

If they are already lying to sites, than why limit :visited to just simple colors? Couldn't full styling still be hidden from sites using the same method?

推荐答案

限制可以应用于访问链接的样式，防止它们以可以通过 getComputedStyle() 查询的方式影响不相关元素的布局——如果不秘密计算整个页面的布局，就无法进行欺骗，就好像所有链接都未访问一样，这在性能方面将是极其昂贵的.这与 :visited + span 之类的东西不再被应用(甚至 :visited 中仍然允许的属性)是一样的.

Limiting the styles that can be applied to visited links prevents them from affecting the layout of unrelated elements in a way that can be queried by getComputedStyle() — something that cannot be spoofed without secretly computing the layout of the entire page as if all links were unvisited, which would be extremely expensive performance-wise. This is in the same vein as things like :visited + span no longer being applied (not even the properties still allowed in :visited).

考虑一下这个概念验证，您可以在其中单击一个链接来切换模拟其访问性的类名，并查看如何在 :link 和 :visited 会影响布局:

Consider this proof-of-concept, in which you can click a link to toggle a class name that simulates its visitedness, and see how toggling between :link and :visited can affect layout:

var a = document.querySelector('a'),
    p = document.querySelector('p + p');

a.addEventListener('click', function(e) {
  a.className = a.className == 'unvisited' ? 'visited' : 'unvisited';
  console.log('a is now ' + a.className + '; top pos of following p is now ' + p.getBoundingClientRect().top);
}, false);

a.unvisited {
  font-size: 1em;
}

a.visited {
  font-size: 2em; /* A property not normally allowed on :visited */
}

<p><a class="unvisited" href="#">Toggle visitedness</a>
<p>Another paragraph

相关文章