問題描述

我了解隱私問題，但在 這篇文章 Mozilla 聲明他們對 querySelector() 和 getComputedStyle() 撒謊.

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

如果他們已經(jīng)在對網(wǎng)站撒謊，那么為什么要將 :visited 限制為簡單的顏色?不能使用相同的方法對網(wǎng)站隱藏完整的樣式嗎?

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?

推薦答案

限制可以應(yīng)用于訪問鏈接的樣式，防止它們以可以通過 getComputedStyle() 查詢的方式影響不相關(guān)元素的布局——如果不秘密計算整個頁面的布局，就無法進行欺騙，就好像所有鏈接都未訪問一樣，這在性能方面將是極其昂貴的.這與 :visited + span 之類的東西不再被應(yīng)用(甚至 :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

這篇關(guān)于為什么瀏覽器會限制 :visited 選擇器?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！